sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Add support for Widget & Room Header Buttons module APIs (#32734)

Browse Source 
* Add support for Widget & Room Header Buttons module APIs

To support https://github.com/element-hq/element-modules/pull/217

* Update for new api

* Test addRoomHeaderButtonCallback

* Extra mock api

* Test for widgetapi

* Convert enum

* Convert other enum usage

* Add tests for widget context menu move buttons

Which have just changed because of the enum

* Add tests for moving the widgets

* Fix copyright

Co-authored-by: Florian Duros <florianduros@element.io>

* Update module API

* A little import/export

---------

Co-authored-by: Florian Duros <florianduros@element.io>
This commit is contained in:
David Baker
2026-03-13 13:44:18 +00:00
committed by GitHub
co-authored by Florian Duros
parent 86692ce0a7
commit 09bbf796dc
30 changed files with 553 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/test/unit-tests/components/structures/PipContainer-test.tsx
+2 -2
View File
@@ -43,7 +43,7 @@ import { Action } from "../../../../src/dispatcher/actions";
import { type ViewRoomPayload } from "../../../../src/dispatcher/payloads/ViewRoomPayload";
import { TestSdkContext } from "../../TestSdkContext";
import { RoomViewStore } from "../../../../src/stores/RoomViewStore";
import { Container, WidgetLayoutStore } from "../../../../src/stores/widgets/WidgetLayoutStore";
import { WidgetLayoutStore } from "../../../../src/stores/widgets/WidgetLayoutStore";
import WidgetStore from "../../../../src/stores/WidgetStore";
import { WidgetType } from "../../../../src/widgets/WidgetType";
import { SdkContextClass } from "../../../../src/contexts/SDKContext";
@@ -234,7 +234,7 @@ describe("PipContainer", () => {
// The return button should maximize the widget
const moveSpy = jest.spyOn(WidgetLayoutStore.instance, "moveToContainer");
await user.click(await screen.findByRole("button", { name: "Back" }));
expect(moveSpy).toHaveBeenCalledWith(room, widget, Container.Center);
expect(moveSpy).toHaveBeenCalledWith(room, widget, "center");
expect(screen.queryByRole("button", { name: "Leave" })).toBeNull();
});
apps/web/test/unit-tests/components/views/context_menus/WidgetContextMenu-test.tsx
+84 -2
View File
@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
import React, { type JSX, type ComponentProps } from "react";
import { screen, render } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import { type MatrixClient } from "matrix-js-sdk/src/matrix";
import { type Room, type MatrixClient } from "matrix-js-sdk/src/matrix";
import { MatrixWidgetType } from "matrix-widget-api";
import {
type ApprovalOpts,
@@ -24,6 +24,10 @@ import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext
import WidgetUtils from "../../../../../src/utils/WidgetUtils";
import { ModuleRunner } from "../../../../../src/modules/ModuleRunner";
import SettingsStore from "../../../../../src/settings/SettingsStore";
import { WidgetLayoutStore } from "../../../../../src/stores/widgets/WidgetLayoutStore";
import { mkStubRoom } from "../../../../test-utils/test-utils.ts";
import { type RoomContextType } from "../../../../../src/contexts/RoomContext.ts";
import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
describe("<WidgetContextMenu />", () => {
const widgetId = "w1";
@@ -44,8 +48,12 @@ describe("<WidgetContextMenu />", () => {
let mockClient: MatrixClient;
let room: Room;
let onFinished: () => void;
let roomContext: RoomContextType;
beforeEach(() => {
onFinished = jest.fn();
jest.spyOn(WidgetUtils, "canUserModifyWidgets").mockReturnValue(true);
@@ -53,6 +61,13 @@ describe("<WidgetContextMenu />", () => {
mockClient = {
getUserId: jest.fn().mockReturnValue(userId),
} as unknown as MatrixClient;
room = mkStubRoom(roomId, "Test Room", mockClient);
roomContext = {
room,
roomId,
} as unknown as RoomContextType;
});
afterEach(() => {
@@ -62,7 +77,9 @@ describe("<WidgetContextMenu />", () => {
function getComponent(props: Partial<ComponentProps<typeof WidgetContextMenu>> = {}): JSX.Element {
return (
<MatrixClientContext.Provider value={mockClient}>
<WidgetContextMenu app={app} onFinished={onFinished} {...props} />
<ScopedRoomContextProvider {...roomContext}>
<WidgetContextMenu app={app} onFinished={onFinished} {...props} />
</ScopedRoomContextProvider>
</MatrixClientContext.Provider>
);
}
@@ -89,4 +106,69 @@ describe("<WidgetContextMenu />", () => {
expect(onFinished).toHaveBeenCalled();
expect(SettingsStore.getValue("allowedWidgets", roomId)[eventId]).toBe(false);
});
it("shows the move left button when the widget can be moved left", () => {
// Place our widget second so it can move left but not right.
jest.spyOn(WidgetLayoutStore.instance, "getContainerWidgets").mockReturnValue([
{ id: "someOtherWidget", type: "m.custom", creatorUserId: userId, url: "" },
{ id: widgetId, type: "m.custom", creatorUserId: userId, url: "" },
]);
render(getComponent({ showUnpin: true }));
expect(screen.getByLabelText("Move left")).toBeInTheDocument();
expect(screen.queryByLabelText("Move right")).not.toBeInTheDocument();
});
it("shows the move right button when the widget can be moved right", () => {
// Place our widget first so it can move right but not left.
jest.spyOn(WidgetLayoutStore.instance, "getContainerWidgets").mockReturnValue([
{ id: widgetId, type: "m.custom", creatorUserId: userId, url: "" },
{ id: "someOtherWidget", type: "m.custom", creatorUserId: userId, url: "" },
]);
render(getComponent({ showUnpin: true }));
expect(screen.getByLabelText("Move right")).toBeInTheDocument();
expect(screen.queryByLabelText("Move left")).not.toBeInTheDocument();
});
it("moves widget left when move left button is clicked", async () => {
// Place our widget second so move left is visible.
jest.spyOn(WidgetLayoutStore.instance, "getContainerWidgets").mockReturnValue([
{ id: "someOtherWidget", type: "m.custom", creatorUserId: userId, url: "" },
{ id: widgetId, type: "m.custom", creatorUserId: userId, url: "" },
]);
// Mock moveWithinContainer to verify it's called with the correct arguments.
const moveWithinContainerSpy = jest
.spyOn(WidgetLayoutStore.instance, "moveWithinContainer")
.mockImplementation();
render(getComponent({ showUnpin: true }));
await userEvent.click(screen.getByLabelText("Move left"));
expect(moveWithinContainerSpy).toHaveBeenCalledWith(room, "top", app, -1);
expect(onFinished).toHaveBeenCalled();
});
it("moves widget right when move right button is clicked", async () => {
// Place our widget first so move right is visible.
jest.spyOn(WidgetLayoutStore.instance, "getContainerWidgets").mockReturnValue([
{ id: widgetId, type: "m.custom", creatorUserId: userId, url: "" },
{ id: "someOtherWidget", type: "m.custom", creatorUserId: userId, url: "" },
]);
// Mock moveWithinContainer to verify it's called with the correct arguments.
const moveWithinContainerSpy = jest
.spyOn(WidgetLayoutStore.instance, "moveWithinContainer")
.mockImplementation();
render(getComponent({ showUnpin: true }));
await userEvent.click(screen.getByLabelText("Move right"));
expect(moveWithinContainerSpy).toHaveBeenCalledWith(room, "top", app, 1);
expect(onFinished).toHaveBeenCalled();
});
});
apps/web/test/unit-tests/components/views/elements/AppTile-test.tsx
+7 -7
View File
@@ -31,7 +31,7 @@ import RightPanelStore from "../../../../../src/stores/right-panel/RightPanelSto
import WidgetStore, { type IApp } from "../../../../../src/stores/WidgetStore";
import ActiveWidgetStore from "../../../../../src/stores/ActiveWidgetStore";
import AppTile from "../../../../../src/components/views/elements/AppTile";
import { Container, WidgetLayoutStore } from "../../../../../src/stores/widgets/WidgetLayoutStore";
import { type Container, WidgetLayoutStore } from "../../../../../src/stores/widgets/WidgetLayoutStore";
import AppsDrawer from "../../../../../src/components/views/rooms/AppsDrawer";
import { ElementWidgetCapabilities } from "../../../../../src/stores/widgets/ElementWidgetCapabilities";
import { ElementWidget, type WidgetMessaging } from "../../../../../src/stores/widgets/WidgetMessaging";
@@ -303,7 +303,7 @@ describe("AppTile", () => {
return {
widgets: {
1: {
container: Container.Top,
container: "top",
},
},
};
@@ -334,7 +334,7 @@ describe("AppTile", () => {
mockSettings.mockRestore();
act(() => {
// Move widget to center
WidgetLayoutStore.instance.moveToContainer(r1, app1, Container.Center);
WidgetLayoutStore.instance.moveToContainer(r1, app1, "center");
});
expect(renderResult.getByText("Example 1")).toBeInTheDocument();
@@ -377,7 +377,7 @@ describe("AppTile", () => {
);
await waitForElementToBeRemoved(() => renderResult.queryByRole("progressbar"));
await userEvent.click(renderResult.getByLabelText("Minimise"));
expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Right);
expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, "right");
});
it("clicking 'maximise' should send the widget to the center", async () => {
@@ -388,7 +388,7 @@ describe("AppTile", () => {
);
await waitForElementToBeRemoved(() => renderResult.queryByRole("progressbar"));
await userEvent.click(renderResult.getByLabelText("Maximise"));
expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Center);
expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, "center");
});
it("should render permission request", async () => {
@@ -455,7 +455,7 @@ describe("AppTile", () => {
beforeEach(() => {
jest.spyOn(WidgetLayoutStore.instance, "isInContainer").mockImplementation(
(room: Room | null, widget: IWidget, container: Container) => {
return room === r1 && widget === app1 && container === Container.Center;
return room === r1 && widget === app1 && container === "center";
},
);
});
@@ -472,7 +472,7 @@ describe("AppTile", () => {
);
await waitForElementToBeRemoved(() => renderResult.queryByRole("progressbar"));
await userEvent.click(renderResult.getByLabelText("Un-maximise"));
expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Top);
expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, "top");
});
});
apps/web/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
+6 -6
View File
@@ -53,7 +53,7 @@ import dispatcher from "../../../../../../src/dispatcher/dispatcher";
import { CallStore } from "../../../../../../src/stores/CallStore";
import { type Call } from "../../../../../../src/models/Call";
import * as ShieldUtils from "../../../../../../src/utils/ShieldUtils";
import { Container, WidgetLayoutStore } from "../../../../../../src/stores/widgets/WidgetLayoutStore";
import { WidgetLayoutStore } from "../../../../../../src/stores/widgets/WidgetLayoutStore";
import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
import { _t } from "../../../../../../src/languageHandler";
import WidgetStore, { type IApp } from "../../../../../../src/stores/WidgetStore";
@@ -504,7 +504,7 @@ describe("RoomHeader", () => {
const videoButton = screen.getByRole("button", { name: "Video call" });
expect(videoButton).not.toHaveAttribute("aria-disabled", "true");
await user.click(videoButton);
expect(spy).toHaveBeenCalledWith(room, widget, Container.Top);
expect(spy).toHaveBeenCalledWith(room, widget, "top");
});
it("disables calling if there's a jitsi call", () => {
@@ -869,7 +869,7 @@ describe("RoomHeader", () => {
});
});
it("renders additionalButtons", async () => {
it("renders legacy additionalButtons", async () => {
const additionalButtons: ViewRoomOpts["buttons"] = [
{
icon: () => <>test-icon</>,
@@ -878,11 +878,11 @@ describe("RoomHeader", () => {
onClick: () => {},
},
];
render(<RoomHeader room={room} additionalButtons={additionalButtons} />, getWrapper());
render(<RoomHeader room={room} legacyAdditionalButtons={additionalButtons} />, getWrapper());
expect(screen.getByRole("button", { name: "test-label" })).toBeInTheDocument();
});
it("calls onClick-callback on additionalButtons", () => {
it("calls onClick-callback on legacyAdditionalButtons", () => {
const callback = jest.fn();
const additionalButtons: ViewRoomOpts["buttons"] = [
{
@@ -893,7 +893,7 @@ describe("RoomHeader", () => {
},
];
render(<RoomHeader room={room} additionalButtons={additionalButtons} />, getWrapper());
render(<RoomHeader room={room} legacyAdditionalButtons={additionalButtons} />, getWrapper());
const button = screen.getByRole("button", { name: "test-label" });
const event = createEvent.click(button);