New room list: add empty state (#29512)

* refactor: extract room creation and right verification * refactor: update `RoomListHeaderViewModel` to use utils * feat(room list filter): add filter key to `PrimaryFilter` model * feat(room list filter): return active primary filter * feat(room list): add create room action and rights verification * test: update room list tests * feat(empty room list): add empty room list * test(empty room list): add empty room list tests * feat(room list): use empty room list in `RoomListView` * test(room list panel): update tests * test(e2e): add e2e tests for empty room list * test(e2e): update room list header snapshot
2026-11-06 06:28:27 +00:00 · 2025-03-18 11:02:33 +01:00
parent 55b0b1107e
commit 7de54a385e
26 changed files with 991 additions and 155 deletions
@@ -0,0 +1,93 @@
+/*
+ * 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 { render, screen } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
+
+import { type RoomListViewState } from "../../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
+import { SecondaryFilters } from "../../../../../../src/components/viewmodels/roomlist/useFilteredRooms";
+import { SortOption } from "../../../../../../src/components/viewmodels/roomlist/useSorter";
+import { EmptyRoomList } from "../../../../../../src/components/views/rooms/RoomListPanel/EmptyRoomList";
+import { FilterKey } from "../../../../../../src/stores/room-list-v3/skip-list/filters";
+
+describe("<EmptyRoomList />", () => {
+    let vm: RoomListViewState;
+
+    beforeEach(() => {
+        vm = {
+            rooms: [],
+            primaryFilters: [],
+            activateSecondaryFilter: jest.fn().mockReturnValue({}),
+            activeSecondaryFilter: SecondaryFilters.AllActivity,
+            sort: jest.fn(),
+            activeSortOption: SortOption.Activity,
+            createRoom: jest.fn(),
+            createChatRoom: jest.fn(),
+            canCreateRoom: true,
+            shouldShowMessagePreview: false,
+            toggleMessagePreview: jest.fn(),
+        };
+    });
+
+    test("should render the default placeholder when there is no filter", async () => {
+        const user = userEvent.setup();
+
+        const { asFragment } = render(<EmptyRoomList vm={vm} />);
+        expect(screen.getByText("No chats yet")).toBeInTheDocument();
+        expect(asFragment()).toMatchSnapshot();
+
+        await user.click(screen.getByRole("button", { name: "New message" }));
+        expect(vm.createChatRoom).toHaveBeenCalled();
+
+        await user.click(screen.getByRole("button", { name: "New room" }));
+        expect(vm.createRoom).toHaveBeenCalled();
+    });
+
+    test("should not render the new room button if the user doesn't have the rights to create a room", async () => {
+        const newState = { ...vm, canCreateRoom: false };
+
+        const { asFragment } = render(<EmptyRoomList vm={newState} />);
+        expect(screen.queryByRole("button", { name: "New room" })).toBeNull();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should display the empty state for the unread filter", async () => {
+        const user = userEvent.setup();
+        const activePrimaryFilter = {
+            toggle: jest.fn(),
+            active: true,
+            name: "unread",
+            key: FilterKey.UnreadFilter,
+        };
+        const newState = {
+            ...vm,
+            activePrimaryFilter,
+        };
+
+        const { asFragment } = render(<EmptyRoomList vm={newState} />);
+        await user.click(screen.getByRole("button", { name: "Show all chats" }));
+        expect(activePrimaryFilter.toggle).toHaveBeenCalled();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it.each([
+        { key: FilterKey.FavouriteFilter, name: "favourite" },
+        { key: FilterKey.PeopleFilter, name: "people" },
+        { key: FilterKey.RoomsFilter, name: "rooms" },
+    ])("should display empty state for filter $name", ({ name, key }) => {
+        const activePrimaryFilter = {
+            toggle: jest.fn(),
+            active: true,
+            name,
+            key,
+        };
+        const newState = { ...vm, activePrimaryFilter };
+        const { asFragment } = render(<EmptyRoomList vm={newState} />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+});