/* Copyright 2026 Element Creations Ltd. SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ import { beforeEach, describe, expect, test, type vi } from "vitest"; import { render, screen } from "@testing-library/react"; import { type WidgetApi, type I18nApi } from "@element-hq/element-web-module-api"; import { type IWidget } from "matrix-widget-api"; import { type PropsWithChildren } from "react"; import { TooltipProvider } from "@vector-im/compound-web"; import userEvent from "@testing-library/user-event"; import { WidgetToggle } from "../src/toggle"; import { mockI18nApi, mockWidget, mockWidgetApi } from "./mocks"; const roomId = "!room:example.com"; const wrapper = ({ children }: PropsWithChildren): React.JSX.Element => {children}; describe("WidgetToggle", () => { let widgetApi: WidgetApi; let i18nApi: I18nApi; let app: IWidget; beforeEach(() => { widgetApi = mockWidgetApi(); i18nApi = mockI18nApi(); app = mockWidget(); }); test("displays avatar image when widget has an avatar URL", () => { (widgetApi.getAppAvatarUrl as ReturnType).mockReturnValue("https://example.com/avatar.png"); render(, { wrapper }); const img = screen.getByRole("img", { name: app.name }); expect(img).toBeDefined(); expect(img.getAttribute("src")).toBe("https://example.com/avatar.png"); }); test("renders the Jitsi avatar for Jitsi widgets", () => { app = mockWidget({ type: "m.jitsi", name: "Jitsi" }); render(, { wrapper }); const img = screen.getByRole("img", { name: "Jitsi" }); expect(img.getAttribute("src")).toMatch(/^data:image\/svg\+xml;base64,/); }); test("shows 'Show' label when widget is not in container", () => { (widgetApi.isAppInContainer as ReturnType).mockReturnValue(false); render(, { wrapper }); const button = screen.getByRole("button", { name: "Show My Widget" }); expect(button).toBeDefined(); }); test("shows 'Hide' label when widget is in container", () => { (widgetApi.isAppInContainer as ReturnType).mockReturnValue(true); render(, { wrapper }); const button = screen.getByRole("button", { name: "Hide My Widget" }); expect(button).toBeDefined(); }); test("calls moveAppToContainer with 'top' when widget is not in container and button is clicked", async () => { const user = userEvent.setup(); (widgetApi.isAppInContainer as ReturnType).mockReturnValue(false); render(, { wrapper }); const button = screen.getByRole("button", { name: "Show My Widget" }); await user.click(button); expect(widgetApi.moveAppToContainer).toHaveBeenCalledWith(app, "top", roomId); }); test("calls moveAppToContainer with 'right' when widget is in container and button is clicked", async () => { const user = userEvent.setup(); (widgetApi.isAppInContainer as ReturnType).mockReturnValue(true); render(, { wrapper }); const button = screen.getByRole("button", { name: "Hide My Widget" }); await user.click(button); expect(widgetApi.moveAppToContainer).toHaveBeenCalledWith(app, "right", roomId); }); });