|
| 1 | +/* |
| 2 | +Copyright 2026 Element Creations Ltd. |
| 3 | +
|
| 4 | +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial |
| 5 | +Please see LICENSE files in the repository root for full details. |
| 6 | +*/ |
| 7 | + |
| 8 | +import { describe, expect, it, vi } from "vitest"; |
| 9 | +import { render, screen } from "@testing-library/react"; |
| 10 | +import userEvent from "@testing-library/user-event"; |
| 11 | +import { ThemeProvider } from "styled-components"; |
| 12 | +import { type Api } from "@element-hq/element-web-module-api"; |
| 13 | + |
| 14 | +import Menu from "./Menu"; |
| 15 | +import { Theme } from "./theme"; |
| 16 | +import { type StaticConfig } from "./config"; |
| 17 | + |
| 18 | +const makeApi = (): Api => { |
| 19 | + return { |
| 20 | + i18n: { |
| 21 | + translate: vi.fn((key: string) => key), |
| 22 | + }, |
| 23 | + } as unknown as Api; |
| 24 | +}; |
| 25 | + |
| 26 | +const config: StaticConfig = { |
| 27 | + type: "static", |
| 28 | + categories: [ |
| 29 | + { |
| 30 | + name: "Category", |
| 31 | + links: [{ icon_uri: "https://example.com/icon.png", name: "Link", link_url: "https://example.com/link" }], |
| 32 | + }, |
| 33 | + ], |
| 34 | + logo_url: "https://example.com/logo.png", |
| 35 | + logo_height: 40, |
| 36 | + logo_href: "https://example.com/target", |
| 37 | +}; |
| 38 | + |
| 39 | +describe("Menu", () => { |
| 40 | + it("opens the sidebar and renders categories, links, and a logo linked via logo_href", async () => { |
| 41 | + const user = userEvent.setup(); |
| 42 | + render( |
| 43 | + <ThemeProvider theme={Theme.parse({})}> |
| 44 | + <Menu api={makeApi()} config={config} fallbackLogoUrl="https://example.com/fallback.png" /> |
| 45 | + </ThemeProvider>, |
| 46 | + ); |
| 47 | + |
| 48 | + await user.click(screen.getByRole("button", { name: "trigger_label" })); |
| 49 | + |
| 50 | + expect(screen.getByText("Category")).toBeInTheDocument(); |
| 51 | + const link = await screen.findByRole("link", { name: "Link" }); |
| 52 | + expect(link).toHaveAttribute("href", "https://example.com/link"); |
| 53 | + |
| 54 | + const logoLink = screen.getByRole("link", { name: "logo_alt" }); |
| 55 | + expect(logoLink).toHaveAttribute("href", "https://example.com/target"); |
| 56 | + }); |
| 57 | + |
| 58 | + it("renders the logo without a wrapping link when logo_href is not configured", async () => { |
| 59 | + const user = userEvent.setup(); |
| 60 | + const configWithoutLogoHref: StaticConfig = { ...config, logo_href: undefined }; |
| 61 | + render( |
| 62 | + <ThemeProvider theme={Theme.parse({})}> |
| 63 | + <Menu |
| 64 | + api={makeApi()} |
| 65 | + config={configWithoutLogoHref} |
| 66 | + fallbackLogoUrl="https://example.com/fallback.png" |
| 67 | + /> |
| 68 | + </ThemeProvider>, |
| 69 | + ); |
| 70 | + |
| 71 | + await user.click(screen.getByRole("button", { name: "trigger_label" })); |
| 72 | + |
| 73 | + const logo = await screen.findByRole("img", { name: "logo_alt" }); |
| 74 | + expect(logo.closest("a")).toBeNull(); |
| 75 | + expect(screen.getAllByRole("link")).toHaveLength(1); |
| 76 | + }); |
| 77 | +}); |
0 commit comments