New room list: add more options menu on room list item (#29445)

* refactor(room list item): rename `RoomListCell` into `RoomListItemView` * refactor(room list item): move open room action to new room list item view model * feat(hover menu): add `hasAccessToOptionsMenu` * feat(hover menu): add to `RoomListItemViewModel` the condition to display or not the hover menu * feat(hover menu): add view model for the hover menu * feat(hover menu): add hover menu view * feat(hover menu): add hover menu to room list item * feat(hover menu): update i18n * test(view model list item): update test and add test to `showHoverMenu` * test(room list): update snapshot * test(room list item menu): add tests for view model * test(room list item menu): add tests for view * test(room list item): add tests * test(e2e): add tests for more options menu * chore: update compound web * test(e2e): fix typo
2026-11-05 21:29:01 +00:00 · 2025-03-14 17:22:45 +01:00
parent ceba762caf
commit f3dbe81ef4
29 changed files with 1044 additions and 202 deletions
@@ -0,0 +1,68 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
+import { render, screen, waitFor } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
+import { mocked } from "jest-mock";
+
+import { mkRoom, stubClient, withClientContextRenderOptions } from "../../../../../test-utils";
+import { RoomListItemView } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListItemView";
+import DMRoomMap from "../../../../../../src/utils/DMRoomMap";
+import {
+    type RoomListItemViewState,
+    useRoomListItemViewModel,
+} from "../../../../../../src/components/viewmodels/roomlist/RoomListItemViewModel";
+
+jest.mock("../../../../../../src/components/viewmodels/roomlist/RoomListItemViewModel", () => ({
+    useRoomListItemViewModel: jest.fn(),
+}));
+
+describe("<RoomListItemView />", () => {
+    const defaultValue: RoomListItemViewState = {
+        openRoom: jest.fn(),
+        showHoverMenu: false,
+    };
+    let matrixClient: MatrixClient;
+    let room: Room;
+
+    beforeEach(() => {
+        mocked(useRoomListItemViewModel).mockReturnValue(defaultValue);
+        matrixClient = stubClient();
+        room = mkRoom(matrixClient, "room1");
+
+        DMRoomMap.makeShared(matrixClient);
+        jest.spyOn(DMRoomMap.shared(), "getUserIdForRoomId").mockReturnValue(null);
+    });
+
+    test("should render a room item", () => {
+        const onClick = jest.fn();
+        const { asFragment } = render(<RoomListItemView room={room} onClick={onClick} />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    test("should call openRoom when clicked", async () => {
+        const user = userEvent.setup();
+        render(<RoomListItemView room={room} />);
+
+        await user.click(screen.getByRole("button", { name: `Open room ${room.name}` }));
+        expect(defaultValue.openRoom).toHaveBeenCalled();
+    });
+
+    test("should hover decoration if hovered", async () => {
+        mocked(useRoomListItemViewModel).mockReturnValue({ ...defaultValue, showHoverMenu: true });
+
+        const user = userEvent.setup();
+        render(<RoomListItemView room={room} />, withClientContextRenderOptions(matrixClient));
+        const listItem = screen.getByRole("button", { name: `Open room ${room.name}` });
+        expect(screen.queryByRole("button", { name: "More Options" })).toBeNull();
+
+        await user.hover(listItem);
+        await waitFor(() => expect(screen.getByRole("button", { name: "More Options" })).toBeInTheDocument());
+    });
+});