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