Add room list sorting (#29951)

* Add room list sorting * Prettier * Unit test * Playwright test * Lint * Use released compound * No tooltip wrapper needed
2026-11-05 12:54:39 +00:00 · 2025-05-15 09:27:33 +01:00
parent 76d7f6ab43
commit 1b48269db5
7 changed files with 228 additions and 7 deletions
@@ -0,0 +1,138 @@
+/*
+ * 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 { RoomListOptionsMenu } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListOptionsMenu";
+import { type RoomListViewState } from "../../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
+
+describe("<RoomListOptionsMenu />", () => {
+    it("should match snapshot", () => {
+        const vm = {
+            sort: jest.fn(),
+        } as unknown as RoomListViewState;
+
+        const { asFragment } = render(<RoomListOptionsMenu vm={vm} />);
+
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should show A to Z selected if activeSortOption is Alphabetic", async () => {
+        const user = userEvent.setup();
+
+        const vm = {
+            sort: jest.fn(),
+            activeSortOption: "Alphabetic",
+        } as unknown as RoomListViewState;
+
+        render(<RoomListOptionsMenu vm={vm} />);
+
+        // Open the menu
+        const button = screen.getByRole("button", { name: "Room Options" });
+        await user.click(button);
+
+        expect(screen.getByRole("menuitemradio", { name: "A-Z" })).toBeChecked();
+        expect(screen.getByRole("menuitemradio", { name: "Activity" })).not.toBeChecked();
+    });
+
+    it("should show Activity selected if activeSortOption is Recency", async () => {
+        const user = userEvent.setup();
+
+        const vm = {
+            sort: jest.fn(),
+            activeSortOption: "Recency",
+        } as unknown as RoomListViewState;
+
+        render(<RoomListOptionsMenu vm={vm} />);
+
+        // Open the menu
+        const button = screen.getByRole("button", { name: "Room Options" });
+        await user.click(button);
+
+        expect(screen.getByRole("menuitemradio", { name: "A-Z" })).not.toBeChecked();
+        expect(screen.getByRole("menuitemradio", { name: "Activity" })).toBeChecked();
+    });
+
+    it("should sort A to Z", async () => {
+        const user = userEvent.setup();
+
+        const vm = {
+            sort: jest.fn(),
+        } as unknown as RoomListViewState;
+
+        render(<RoomListOptionsMenu vm={vm} />);
+
+        await user.click(screen.getByRole("button", { name: "Room Options" }));
+
+        await user.click(screen.getByRole("menuitemradio", { name: "A-Z" }));
+
+        expect(vm.sort).toHaveBeenCalledWith("Alphabetic");
+    });
+
+    it("should sort by activity", async () => {
+        const user = userEvent.setup();
+
+        const vm = {
+            sort: jest.fn(),
+            activeSortOption: "Alphabetic",
+        } as unknown as RoomListViewState;
+
+        render(<RoomListOptionsMenu vm={vm} />);
+
+        await user.click(screen.getByRole("button", { name: "Room Options" }));
+
+        await user.click(screen.getByRole("menuitemradio", { name: "Activity" }));
+
+        expect(vm.sort).toHaveBeenCalledWith("Recency");
+    });
+
+    it("should show message previews disabled", async () => {
+        const user = userEvent.setup();
+
+        const vm = {
+            shouldShowMessagePreview: false,
+        } as unknown as RoomListViewState;
+
+        render(<RoomListOptionsMenu vm={vm} />);
+
+        await user.click(screen.getByRole("button", { name: "Room Options" }));
+
+        expect(screen.getByRole("menuitemcheckbox", { name: "Show message previews" })).not.toBeChecked();
+    });
+
+    it("should show message previews enabled", async () => {
+        const user = userEvent.setup();
+
+        const vm = {
+            shouldShowMessagePreview: true,
+        } as unknown as RoomListViewState;
+
+        render(<RoomListOptionsMenu vm={vm} />);
+
+        await user.click(screen.getByRole("button", { name: "Room Options" }));
+
+        expect(screen.getByRole("menuitemcheckbox", { name: "Show message previews" })).toBeChecked();
+    });
+
+    it("should toggle message previews", async () => {
+        const user = userEvent.setup();
+
+        const vm = {
+            toggleMessagePreview: jest.fn(),
+        } as unknown as RoomListViewState;
+
+        render(<RoomListOptionsMenu vm={vm} />);
+
+        await user.click(screen.getByRole("button", { name: "Room Options" }));
+
+        await user.click(screen.getByRole("menuitemcheckbox", { name: "Show message previews" }));
+
+        expect(vm.toggleMessagePreview).toHaveBeenCalled();
+    });
+});