nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

New room list: add context menu to room list item (#29952)

Browse Source 
* chore: update compound-web

* chore: remove unused export

* feat: export content of more option menu

* feat: add context menu

* feat: add `showContextMenu` to vm

* feat: use context menu in new room list

* test: add tests for room list item

* test: fix room list test

* test: add `showContextMenu` test for `useRoomListItemViewModel`

* test: add e2e test for context menu

* chore: update compound

* test: update snapshots and e2e test

* fix: avoid icon blinking when we reopen the context menu

* test: add test for menu closing

* doc: remove useless tsdoc param

* chore: update `@vector-im/compound-web`

* refactor: remove manual focus

* test(e2e): fix focus after closing notification menu

* doc: remove useless jobs
This commit is contained in:
Florian Duros
2025-06-24 11:50:27 +02:00
committed by GitHub
parent 52f836a0dd
commit f707bb410e
11 changed files with 169 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
test/unit-tests/components/viewmodels/roomlist/RoomListItemViewModel-test.tsx
View File

@@ -73,6 +73,15 @@ describe("RoomListItemViewModel", () => {
);
});
it("should show context menu if user has access to options menu", async () => {
mocked(hasAccessToOptionsMenu).mockReturnValue(true);
const { result: vm } = renderHook(
() => useRoomListItemViewModel(room),
withClientContextRenderOptions(room.client),
);
expect(vm.current.showContextMenu).toBe(true);
});
it("should show hover menu if user has access to options menu", async () => {
mocked(hasAccessToOptionsMenu).mockReturnValue(true);
const { result: vm } = renderHook(

6
test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx
View File

@@ -10,7 +10,7 @@ import { type MatrixClient } from "matrix-js-sdk/src/matrix";
import { render } from "jest-matrix-react";
import { fireEvent } from "@testing-library/dom";
import { mkRoom, stubClient } from "../../../../../test-utils";
import { mkRoom, stubClient, withClientContextRenderOptions } from "../../../../../test-utils";
import { type RoomListViewState } from "../../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
import { RoomList } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomList";
import DMRoomMap from "../../../../../../src/utils/DMRoomMap";
@@ -44,7 +44,7 @@ describe("<RoomList />", () => {
});
it("should render a room list", () => {
const { asFragment } = render(<RoomList vm={vm} />);
const { asFragment } = render(<RoomList vm={vm} />, withClientContextRenderOptions(matrixClient));
expect(asFragment()).toMatchSnapshot();
});
@@ -53,7 +53,7 @@ describe("<RoomList />", () => {
{ shortcut: { key: "F6", ctrlKey: true }, isPreviousLandmark: false, label: "NextLandmark" },
])("should navigate to the landmark on NextLandmark.$label action", ({ shortcut, isPreviousLandmark }) => {
const spyFindLandmark = jest.spyOn(LandmarkNavigation, "findAndFocusNextLandmark").mockReturnValue();
const { getByTestId } = render(<RoomList vm={vm} />);
const { getByTestId } = render(<RoomList vm={vm} />, withClientContextRenderOptions(matrixClient));
const roomList = getByTestId("room-list");
fireEvent.keyDown(roomList, shortcut);

18
test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx
View File

@@ -42,6 +42,7 @@ describe("<RoomListItemView />", () => {
defaultValue = {
openRoom: jest.fn(),
showContextMenu: false,
showHoverMenu: false,
notificationState,
a11yLabel: "Open room room1",
@@ -136,4 +137,21 @@ describe("<RoomListItemView />", () => {
expect(screen.queryByRole("notification-decoration")).toBeNull();
});
test("should render the context menu", async () => {
const user = userEvent.setup();
mocked(useRoomListItemViewModel).mockReturnValue({
...defaultValue,
showContextMenu: true,
});
render(<RoomListItemView room={room} isSelected={false} />, withClientContextRenderOptions(matrixClient));
const button = screen.getByRole("button", { name: `Open room ${room.name}` });
await user.pointer([{ target: button }, { keys: "[MouseRight]", target: button }]);
await waitFor(() => expect(screen.getByRole("menu")).toBeInTheDocument());
// Menu should close
await user.keyboard("{Escape}");
expect(screen.queryByRole("menu")).toBeNull();
});
});

20
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
View File

@@ -23,9 +23,11 @@ exports[`<RoomList /> should render a room list 1`] = `
style="width: auto; height: 480px; max-width: 1500px; max-height: 480px; overflow: hidden; position: relative;"
>
<button
aria-haspopup="menu"
aria-label="Open room room0"
aria-selected="false"
class="mx_RoomListItemView"
data-state="closed"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 0px; width: 100%;"
tabindex="0"
@@ -75,9 +77,11 @@ exports[`<RoomList /> should render a room list 1`] = `
</div>
</button>
<button
aria-haspopup="menu"
aria-label="Open room room1"
aria-selected="false"
class="mx_RoomListItemView"
data-state="closed"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 48px; width: 100%;"
tabindex="-1"
@@ -127,9 +131,11 @@ exports[`<RoomList /> should render a room list 1`] = `
</div>
</button>
<button
aria-haspopup="menu"
aria-label="Open room room2"
aria-selected="false"
class="mx_RoomListItemView"
data-state="closed"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 96px; width: 100%;"
tabindex="-1"
@@ -179,9 +185,11 @@ exports[`<RoomList /> should render a room list 1`] = `
</div>
</button>
<button
aria-haspopup="menu"
aria-label="Open room room3"
aria-selected="false"
class="mx_RoomListItemView"
data-state="closed"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 144px; width: 100%;"
tabindex="-1"
@@ -231,9 +239,11 @@ exports[`<RoomList /> should render a room list 1`] = `
</div>
</button>
<button
aria-haspopup="menu"
aria-label="Open room room4"
aria-selected="false"
class="mx_RoomListItemView"
data-state="closed"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 192px; width: 100%;"
tabindex="-1"
@@ -283,9 +293,11 @@ exports[`<RoomList /> should render a room list 1`] = `
</div>
</button>
<button
aria-haspopup="menu"
aria-label="Open room room5"
aria-selected="false"
class="mx_RoomListItemView"
data-state="closed"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 240px; width: 100%;"
tabindex="-1"
@@ -335,9 +347,11 @@ exports[`<RoomList /> should render a room list 1`] = `
</div>
</button>
<button
aria-haspopup="menu"
aria-label="Open room room6"
aria-selected="false"
class="mx_RoomListItemView"
data-state="closed"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 288px; width: 100%;"
tabindex="-1"
@@ -387,9 +401,11 @@ exports[`<RoomList /> should render a room list 1`] = `
</div>
</button>
<button
aria-haspopup="menu"
aria-label="Open room room7"
aria-selected="false"
class="mx_RoomListItemView"
data-state="closed"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 336px; width: 100%;"
tabindex="-1"
@@ -439,9 +455,11 @@ exports[`<RoomList /> should render a room list 1`] = `
</div>
</button>
<button
aria-haspopup="menu"
aria-label="Open room room8"
aria-selected="false"
class="mx_RoomListItemView"
data-state="closed"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 384px; width: 100%;"
tabindex="-1"
@@ -491,9 +509,11 @@ exports[`<RoomList /> should render a room list 1`] = `
</div>
</button>
<button
aria-haspopup="menu"
aria-label="Open room room9"
aria-selected="false"
class="mx_RoomListItemView"
data-state="closed"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 432px; width: 100%;"
tabindex="-1"