/*
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);
});
});