diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png index a0f4fbffdf..9061362a49 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-linux.png index 6c871b6b9c..46ff1a53be 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-space-header-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-space-header-linux.png index bdb7f8fa2a..3a4aea566e 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-space-header-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-space-header-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png index 3e36789db6..fc680e424e 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png index d502271435..94e3f00732 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png index 2c301ea37c..0eb95d0c0c 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png index e8a3e6098f..3db9fd680d 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png index 2013389235..60f62ef572 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png differ diff --git a/res/css/views/rooms/RoomListPanel/_RoomListSecondaryFilters.pcss b/res/css/views/rooms/RoomListPanel/_RoomListSecondaryFilters.pcss index c94fb54007..0fa8dc12ae 100644 --- a/res/css/views/rooms/RoomListPanel/_RoomListSecondaryFilters.pcss +++ b/res/css/views/rooms/RoomListPanel/_RoomListSecondaryFilters.pcss @@ -10,16 +10,3 @@ margin: var(--cpd-space-2x); margin-left: var(--cpd-space-1x); } - -.mx_RoomListSecondaryFilters_roomOptionsButton { - /* Size the button appropriately (should this be in em, maybe, - * so it gets bigger with font size? These values taken from the figma. - */ - width: 28px; - height: 28px; - margin-left: auto; - - svg { - color: var(--cpd-color-icon-primary); - } -} diff --git a/src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx b/src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx index 66b44e0086..d6f54fcae7 100644 --- a/src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx +++ b/src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx @@ -31,6 +31,8 @@ import { import { useMatrixClientContext } from "../../../contexts/MatrixClientContext"; import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { createRoom, hasCreateRoomRights } from "./utils"; +import { type SortOption, useSorter } from "./useSorter"; +import { useMessagePreviewToggle } from "./useMessagePreviewToggle"; /** * Hook to get the active space and its title. @@ -117,6 +119,22 @@ export interface RoomListHeaderViewState { * Open the space settings */ openSpaceSettings: () => void; + /** + * Change the sort order of the room-list. + */ + sort: (option: SortOption) => void; + /** + * The currently active sort option. + */ + activeSortOption: SortOption; + /** + * Whether message previews must be shown or not. + */ + shouldShowMessagePreview: boolean; + /** + * A function to turn on/off message previews. + */ + toggleMessagePreview: () => void; } /** @@ -138,6 +156,9 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState { /* Actions */ + const { activeSortOption, sort } = useSorter(); + const { shouldShowMessagePreview, toggleMessagePreview } = useMessagePreviewToggle(); + const createChatRoom = useCallback((e: Event) => { defaultDispatcher.fire(Action.CreateChat); PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuCreateChatItem", e); @@ -207,5 +228,9 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState { inviteInSpace, openSpacePreferences, openSpaceSettings, + activeSortOption, + sort, + shouldShowMessagePreview, + toggleMessagePreview, }; } diff --git a/src/components/viewmodels/roomlist/RoomListViewModel.tsx b/src/components/viewmodels/roomlist/RoomListViewModel.tsx index ddc38e17de..bdc78caf15 100644 --- a/src/components/viewmodels/roomlist/RoomListViewModel.tsx +++ b/src/components/viewmodels/roomlist/RoomListViewModel.tsx @@ -9,8 +9,6 @@ import { useCallback } from "react"; import type { Room } from "matrix-js-sdk/src/matrix"; import { type PrimaryFilter, type SecondaryFilters, useFilteredRooms } from "./useFilteredRooms"; -import { type SortOption, useSorter } from "./useSorter"; -import { useMessagePreviewToggle } from "./useMessagePreviewToggle"; import { createRoom as createRoomFunc, hasCreateRoomRights } from "./utils"; import { useEventEmitterState } from "../../../hooks/useEventEmitter"; import { UPDATE_SELECTED_SPACE } from "../../../stores/spaces"; @@ -71,26 +69,6 @@ export interface RoomListViewState { */ activeSecondaryFilter: SecondaryFilters; - /** - * Change the sort order of the room-list. - */ - sort: (option: SortOption) => void; - - /** - * The currently active sort option. - */ - activeSortOption: SortOption; - - /** - * Whether message previews must be shown or not. - */ - shouldShowMessagePreview: boolean; - - /** - * A function to turn on/off message previews. - */ - toggleMessagePreview: () => void; - /** * The index of the active room in the room list. */ @@ -122,9 +100,6 @@ export function useRoomListViewModel(): RoomListViewState { ); const canCreateRoom = hasCreateRoomRights(matrixClient, currentSpace); - const { activeSortOption, sort } = useSorter(); - const { shouldShowMessagePreview, toggleMessagePreview } = useMessagePreviewToggle(); - const createChatRoom = useCallback(() => dispatcher.fire(Action.CreateChat), []); const createRoom = useCallback(() => createRoomFunc(currentSpace), [currentSpace]); @@ -138,10 +113,6 @@ export function useRoomListViewModel(): RoomListViewState { activePrimaryFilter, activateSecondaryFilter, activeSecondaryFilter, - activeSortOption, - sort, - shouldShowMessagePreview, - toggleMessagePreview, activeIndex, }; } diff --git a/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx b/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx index ba4fdc5ca4..752f065fd4 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx @@ -21,6 +21,7 @@ import { type RoomListHeaderViewState, useRoomListHeaderViewModel, } from "../../../viewmodels/roomlist/RoomListHeaderViewModel"; +import { RoomListOptionsMenu } from "./RoomListOptionsMenu"; /** * The header view for the room list @@ -42,14 +43,17 @@ export function RoomListHeaderView(): JSX.Element {

{vm.title}

{vm.displaySpaceMenu && } - {/* If we don't display the compose menu, it means that the user can only send DM */} - {vm.displayComposeMenu ? ( - - ) : ( - vm.createChatRoom(e.nativeEvent)}> - - - )} + + + {/* If we don't display the compose menu, it means that the user can only send DM */} + {vm.displayComposeMenu ? ( + + ) : ( + vm.createChatRoom(e.nativeEvent)}> + + + )} + ); } diff --git a/src/components/views/rooms/RoomListPanel/RoomListOptionsMenu.tsx b/src/components/views/rooms/RoomListPanel/RoomListOptionsMenu.tsx index 9917f713fc..a78c1dd994 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListOptionsMenu.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListOptionsMenu.tsx @@ -7,11 +7,11 @@ import { IconButton, Menu, MenuTitle, CheckboxMenuItem, Tooltip, RadioMenuItem } from "@vector-im/compound-web"; import React, { type Ref, type JSX, useState, useCallback } from "react"; -import OverflowHorizontalIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal"; +import FilterIcon from "@vector-im/compound-design-tokens/assets/web/icons/filter"; import { _t } from "../../../../languageHandler"; -import { type RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel"; import { SortOption } from "../../../viewmodels/roomlist/useSorter"; +import { type RoomListHeaderViewState } from "../../../viewmodels/roomlist/RoomListHeaderViewModel"; interface MenuTriggerProps extends React.ComponentProps { ref?: Ref; @@ -19,13 +19,8 @@ interface MenuTriggerProps extends React.ComponentProps { const MenuTrigger = ({ ref, ...props }: MenuTriggerProps): JSX.Element => ( - - + + ); @@ -34,7 +29,7 @@ interface Props { /** * The view model for the room list view */ - vm: RoomListViewState; + vm: RoomListHeaderViewState; } export function RoomListOptionsMenu({ vm }: Props): JSX.Element { diff --git a/src/components/views/rooms/RoomListPanel/RoomListSecondaryFilters.tsx b/src/components/views/rooms/RoomListPanel/RoomListSecondaryFilters.tsx index 6326fe6d7c..5747f9df84 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListSecondaryFilters.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListSecondaryFilters.tsx @@ -10,7 +10,6 @@ import React, { type JSX } from "react"; import type { RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel"; import { Flex } from "../../../utils/Flex"; import { _t } from "../../../../languageHandler"; -import { RoomListOptionsMenu } from "./RoomListOptionsMenu"; import { RoomListFilterMenu } from "./RoomListFilterMenu"; import { textForSecondaryFilter } from "./textForFilter"; @@ -36,7 +35,6 @@ export function RoomListSecondaryFilters({ vm }: Props): JSX.Element { > {activeFilterText} - ); } diff --git a/test/unit-tests/components/viewmodels/roomlist/RoomListHeaderViewModel-test.tsx b/test/unit-tests/components/viewmodels/roomlist/RoomListHeaderViewModel-test.tsx index 729ab02836..09109366cf 100644 --- a/test/unit-tests/components/viewmodels/roomlist/RoomListHeaderViewModel-test.tsx +++ b/test/unit-tests/components/viewmodels/roomlist/RoomListHeaderViewModel-test.tsx @@ -5,14 +5,15 @@ * Please see LICENSE files in the repository root for full details. */ -import { renderHook } from "jest-matrix-react"; +import { renderHook, act } from "jest-matrix-react"; import { JoinRule, type MatrixClient, type Room, RoomType } from "matrix-js-sdk/src/matrix"; import { mocked } from "jest-mock"; +import { range } from "lodash"; import { useRoomListHeaderViewModel } from "../../../../../src/components/viewmodels/roomlist/RoomListHeaderViewModel"; import SpaceStore from "../../../../../src/stores/spaces/SpaceStore"; import { mkStubRoom, stubClient, withClientContextRenderOptions } from "../../../../test-utils"; -import SettingsStore from "../../../../../src/settings/SettingsStore"; +import SettingsStore, { type CallbackFn } from "../../../../../src/settings/SettingsStore"; import defaultDispatcher from "../../../../../src/dispatcher/dispatcher"; import { Action } from "../../../../../src/dispatcher/actions"; import { @@ -23,6 +24,10 @@ import { showSpaceSettings, } from "../../../../../src/utils/space"; import { createRoom, hasCreateRoomRights } from "../../../../../src/components/viewmodels/roomlist/utils"; +import { SettingLevel } from "../../../../../src/settings/SettingLevel"; +import RoomListStoreV3 from "../../../../../src/stores/room-list-v3/RoomListStoreV3"; +import { SortOption } from "../../../../../src/components/viewmodels/roomlist/useSorter"; +import { SortingAlgorithm } from "../../../../../src/stores/room-list-v3/skip-list/sorters"; jest.mock("../../../../../src/components/viewmodels/roomlist/utils", () => ({ hasCreateRoomRights: jest.fn().mockReturnValue(false), @@ -199,4 +204,72 @@ describe("useRoomListHeaderViewModel", () => { expect(showSpaceSettings).toHaveBeenCalledWith(space); }); + + describe("Sorting", () => { + function mockAndCreateRooms() { + const rooms = range(10).map((i) => mkStubRoom(`foo${i}:matrix.org`, `Foo ${i}`, undefined)); + const fn = jest + .spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace") + .mockImplementation(() => [...rooms]); + return { rooms, fn }; + } + + it("should change sort order", () => { + mockAndCreateRooms(); + const { result: vm } = render(); + + const resort = jest.spyOn(RoomListStoreV3.instance, "resort").mockImplementation(() => {}); + + // Change the sort option + act(() => { + vm.current.sort(SortOption.AToZ); + }); + + // Resort method in RLS must have been called + expect(resort).toHaveBeenCalledWith(SortingAlgorithm.Alphabetic); + }); + + it("should set activeSortOption based on value from settings", () => { + // Let's say that the user's preferred sorting is alphabetic + jest.spyOn(SettingsStore, "getValue").mockImplementation(() => SortingAlgorithm.Alphabetic); + + mockAndCreateRooms(); + const { result: vm } = render(); + expect(vm.current.activeSortOption).toEqual(SortOption.AToZ); + }); + }); + + describe("message preview toggle", () => { + it("should return shouldShowMessagePreview based on setting", () => { + jest.spyOn(SettingsStore, "getValue").mockImplementation(() => true); + const { result: vm } = render(); + expect(vm.current.shouldShowMessagePreview).toEqual(true); + }); + + it("should update when setting changes", async () => { + jest.spyOn(SettingsStore, "getValue").mockImplementation(() => true); + + let watchFn: CallbackFn; + jest.spyOn(SettingsStore, "watchSetting").mockImplementation((settingName, _roomId, fn) => { + if (settingName === "RoomList.showMessagePreview") watchFn = fn; + return ""; + }); + const { result: vm } = render(); + expect(vm.current.shouldShowMessagePreview).toEqual(true); + + jest.spyOn(SettingsStore, "getValue").mockImplementation(() => false); + act(() => watchFn("RoomList.showMessagePreview", "", SettingLevel.DEVICE, false, false)); + expect(vm.current.shouldShowMessagePreview).toEqual(false); + }); + + it("should change setting on toggle", () => { + jest.spyOn(SettingsStore, "getValue").mockImplementation(() => true); + const fn = jest.spyOn(SettingsStore, "setValue").mockImplementation(async () => {}); + + const { result: vm } = render(); + expect(vm.current.shouldShowMessagePreview).toEqual(true); + act(() => vm.current.toggleMessagePreview()); + expect(fn).toHaveBeenCalledWith("RoomList.showMessagePreview", null, "device", false); + }); + }); }); diff --git a/test/unit-tests/components/viewmodels/roomlist/RoomListViewModel-test.tsx b/test/unit-tests/components/viewmodels/roomlist/RoomListViewModel-test.tsx index 31b77c4522..47fe5f216e 100644 --- a/test/unit-tests/components/viewmodels/roomlist/RoomListViewModel-test.tsx +++ b/test/unit-tests/components/viewmodels/roomlist/RoomListViewModel-test.tsx @@ -14,16 +14,12 @@ import { mkStubRoom } from "../../../../test-utils"; import { useRoomListViewModel } from "../../../../../src/components/viewmodels/roomlist/RoomListViewModel"; import { FilterKey } from "../../../../../src/stores/room-list-v3/skip-list/filters"; import { SecondaryFilters } from "../../../../../src/components/viewmodels/roomlist/useFilteredRooms"; -import { SortingAlgorithm } from "../../../../../src/stores/room-list-v3/skip-list/sorters"; -import { SortOption } from "../../../../../src/components/viewmodels/roomlist/useSorter"; -import SettingsStore, { type CallbackFn } from "../../../../../src/settings/SettingsStore"; import { hasCreateRoomRights, createRoom } from "../../../../../src/components/viewmodels/roomlist/utils"; import dispatcher from "../../../../../src/dispatcher/dispatcher"; import { Action } from "../../../../../src/dispatcher/actions"; import { SdkContextClass } from "../../../../../src/contexts/SDKContext"; import SpaceStore from "../../../../../src/stores/spaces/SpaceStore"; import { UPDATE_SELECTED_SPACE } from "../../../../../src/stores/spaces"; -import { SettingLevel } from "../../../../../src/settings/SettingLevel"; jest.mock("../../../../../src/components/viewmodels/roomlist/utils", () => ({ hasCreateRoomRights: jest.fn().mockReturnValue(false), @@ -59,7 +55,7 @@ describe("RoomListViewModel", () => { const newRoom = mkStubRoom("bar:matrix.org", "Bar", undefined); rooms.push(newRoom); - act(() => RoomListStoreV3.instance.emit(LISTS_UPDATE_EVENT)); + await act(() => RoomListStoreV3.instance.emit(LISTS_UPDATE_EVENT)); await waitFor(() => { expect(vm.current.rooms).toContain(newRoom); @@ -253,72 +249,6 @@ describe("RoomListViewModel", () => { }); }); - describe("Sorting", () => { - it("should change sort order", () => { - mockAndCreateRooms(); - const { result: vm } = renderHook(() => useRoomListViewModel()); - - const resort = jest.spyOn(RoomListStoreV3.instance, "resort").mockImplementation(() => {}); - - // Change the sort option - act(() => { - vm.current.sort(SortOption.AToZ); - }); - - // Resort method in RLS must have been called - expect(resort).toHaveBeenCalledWith(SortingAlgorithm.Alphabetic); - }); - - it("should set activeSortOption based on value from settings", () => { - // Let's say that the user's preferred sorting is alphabetic - jest.spyOn(SettingsStore, "getValue").mockImplementation(() => SortingAlgorithm.Alphabetic); - - mockAndCreateRooms(); - const { result: vm } = renderHook(() => useRoomListViewModel()); - expect(vm.current.activeSortOption).toEqual(SortOption.AToZ); - }); - }); - - describe("message preview toggle", () => { - it("should return shouldShowMessagePreview based on setting", () => { - jest.spyOn(SettingsStore, "getValue").mockImplementation(() => true); - mockAndCreateRooms(); - const { result: vm } = renderHook(() => useRoomListViewModel()); - expect(vm.current.shouldShowMessagePreview).toEqual(true); - }); - - it("should update when setting changes", () => { - jest.spyOn(SettingsStore, "getValue").mockImplementation(() => true); - - let watchFn: CallbackFn; - jest.spyOn(SettingsStore, "watchSetting").mockImplementation((_settingname, _roomId, fn) => { - watchFn = fn; - return ""; - }); - mockAndCreateRooms(); - const { result: vm } = renderHook(() => useRoomListViewModel()); - expect(vm.current.shouldShowMessagePreview).toEqual(true); - - jest.spyOn(SettingsStore, "getValue").mockImplementation(() => false); - act(() => { - watchFn("RoomList.showMessagePreview", "", SettingLevel.DEVICE, false, false); - }); - expect(vm.current.shouldShowMessagePreview).toEqual(false); - }); - - it("should change setting on toggle", () => { - jest.spyOn(SettingsStore, "getValue").mockImplementation(() => true); - const fn = jest.spyOn(SettingsStore, "setValue").mockImplementation(async () => {}); - mockAndCreateRooms(); - const { result: vm } = renderHook(() => useRoomListViewModel()); - expect(vm.current.shouldShowMessagePreview).toEqual(true); - act(() => { - vm.current.toggleMessagePreview(); - }); - expect(fn).toHaveBeenCalledWith("RoomList.showMessagePreview", null, "device", false); - }); - }); - describe("Create room and chat", () => { it("should be canCreateRoom=false if hasCreateRoomRights=false", () => { mocked(hasCreateRoomRights).mockReturnValue(false); diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/EmptyRoomList-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/EmptyRoomList-test.tsx index 1483797778..89b14c1680 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/EmptyRoomList-test.tsx +++ b/test/unit-tests/components/views/rooms/RoomListPanel/EmptyRoomList-test.tsx @@ -11,7 +11,6 @@ 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"; @@ -25,13 +24,9 @@ describe("", () => { 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(), activeIndex: undefined, }; }); diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx index 61a0ec46aa..b4f9925fde 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx +++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx @@ -15,7 +15,6 @@ import { type RoomListViewState } from "../../../../../../src/components/viewmod import { RoomList } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomList"; import DMRoomMap from "../../../../../../src/utils/DMRoomMap"; import { SecondaryFilters } from "../../../../../../src/components/viewmodels/roomlist/useFilteredRooms"; -import { SortOption } from "../../../../../../src/components/viewmodels/roomlist/useSorter"; import { Landmark, LandmarkNavigation } from "../../../../../../src/accessibility/LandmarkNavigation"; describe("", () => { @@ -36,10 +35,6 @@ describe("", () => { primaryFilters: [], activateSecondaryFilter: () => {}, activeSecondaryFilter: SecondaryFilters.AllActivity, - sort: jest.fn(), - activeSortOption: SortOption.Activity, - shouldShowMessagePreview: false, - toggleMessagePreview: jest.fn(), createRoom: jest.fn(), createChatRoom: jest.fn(), canCreateRoom: true, diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListFilterMenu-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListFilterMenu-test.tsx index e93d69052e..8d549e5e26 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListFilterMenu-test.tsx +++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListFilterMenu-test.tsx @@ -12,7 +12,6 @@ import { TooltipProvider } from "@vector-im/compound-web"; 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 { RoomListFilterMenu } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListFilterMenu"; function getRenderOptions(): RenderOptions { @@ -34,10 +33,6 @@ describe("", () => { primaryFilters: [], activateSecondaryFilter: () => {}, activeSecondaryFilter: SecondaryFilters.AllActivity, - sort: jest.fn(), - activeSortOption: SortOption.Activity, - shouldShowMessagePreview: false, - toggleMessagePreview: jest.fn(), activeIndex: undefined, }; }); diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListHeaderView-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListHeaderView-test.tsx index a2422283c8..4840808fe4 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListHeaderView-test.tsx +++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListHeaderView-test.tsx @@ -15,6 +15,7 @@ import { useRoomListHeaderViewModel, } from "../../../../../../src/components/viewmodels/roomlist/RoomListHeaderViewModel"; import { RoomListHeaderView } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListHeaderView"; +import { SortOption } from "../../../../../../src/components/viewmodels/roomlist/useSorter"; jest.mock("../../../../../../src/components/viewmodels/roomlist/RoomListHeaderViewModel", () => ({ useRoomListHeaderViewModel: jest.fn(), @@ -29,6 +30,10 @@ describe("", () => { canCreateVideoRoom: true, canInviteInSpace: true, canAccessSpaceSettings: true, + sort: jest.fn(), + activeSortOption: SortOption.Activity, + shouldShowMessagePreview: false, + toggleMessagePreview: jest.fn(), createRoom: jest.fn(), createVideoRoom: jest.fn(), createChatRoom: jest.fn(), @@ -42,6 +47,13 @@ describe("", () => { jest.resetAllMocks(); }); + it("should render 'room options' button", async () => { + mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue); + const { asFragment } = render(); + expect(screen.getByRole("button", { name: "Room Options" })).toBeInTheDocument(); + expect(asFragment()).toMatchSnapshot(); + }); + describe("compose menu", () => { it("should display the compose menu", () => { mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue); diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListOptionsMenu-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListOptionsMenu-test.tsx index 0e2de64c4f..c476bda0d1 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListOptionsMenu-test.tsx +++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListOptionsMenu-test.tsx @@ -10,13 +10,13 @@ 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"; +import { type RoomListHeaderViewState } from "../../../../../../src/components/viewmodels/roomlist/RoomListHeaderViewModel"; describe("", () => { it("should match snapshot", () => { const vm = { sort: jest.fn(), - } as unknown as RoomListViewState; + } as unknown as RoomListHeaderViewState; const { asFragment } = render(); @@ -29,7 +29,7 @@ describe("", () => { const vm = { sort: jest.fn(), activeSortOption: "Alphabetic", - } as unknown as RoomListViewState; + } as unknown as RoomListHeaderViewState; render(); @@ -47,7 +47,7 @@ describe("", () => { const vm = { sort: jest.fn(), activeSortOption: "Recency", - } as unknown as RoomListViewState; + } as unknown as RoomListHeaderViewState; render(); @@ -64,7 +64,7 @@ describe("", () => { const vm = { sort: jest.fn(), - } as unknown as RoomListViewState; + } as unknown as RoomListHeaderViewState; render(); @@ -81,7 +81,7 @@ describe("", () => { const vm = { sort: jest.fn(), activeSortOption: "Alphabetic", - } as unknown as RoomListViewState; + } as unknown as RoomListHeaderViewState; render(); @@ -97,7 +97,7 @@ describe("", () => { const vm = { shouldShowMessagePreview: false, - } as unknown as RoomListViewState; + } as unknown as RoomListHeaderViewState; render(); @@ -111,7 +111,7 @@ describe("", () => { const vm = { shouldShowMessagePreview: true, - } as unknown as RoomListViewState; + } as unknown as RoomListHeaderViewState; render(); @@ -125,7 +125,7 @@ describe("", () => { const vm = { toggleMessagePreview: jest.fn(), - } as unknown as RoomListViewState; + } as unknown as RoomListHeaderViewState; render(); diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx index 4a80ea068e..ec8a60a395 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx +++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx @@ -12,7 +12,6 @@ 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 { RoomListPrimaryFilters } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters"; -import { SortOption } from "../../../../../../src/components/viewmodels/roomlist/useSorter"; import { FilterKey } from "../../../../../../src/stores/room-list-v3/skip-list/filters"; describe("", () => { @@ -31,10 +30,6 @@ describe("", () => { ], activateSecondaryFilter: () => {}, activeSecondaryFilter: SecondaryFilters.AllActivity, - sort: jest.fn(), - activeSortOption: SortOption.Activity, - shouldShowMessagePreview: false, - toggleMessagePreview: jest.fn(), activeIndex: undefined, }; }); diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListSecondaryFilters-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListSecondaryFilters-test.tsx deleted file mode 100644 index c2f6ef2cd8..0000000000 --- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListSecondaryFilters-test.tsx +++ /dev/null @@ -1,42 +0,0 @@ -/* - * 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 { 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 { RoomListSecondaryFilters } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListSecondaryFilters"; - -describe("", () => { - let vm: RoomListViewState; - - beforeEach(() => { - vm = { - isLoadingRooms: false, - rooms: [], - canCreateRoom: true, - createRoom: jest.fn(), - createChatRoom: jest.fn(), - primaryFilters: [], - activateSecondaryFilter: () => {}, - activeSecondaryFilter: SecondaryFilters.AllActivity, - sort: jest.fn(), - activeSortOption: SortOption.Activity, - shouldShowMessagePreview: false, - toggleMessagePreview: jest.fn(), - activeIndex: undefined, - }; - }); - - it("should render 'room options' button", async () => { - const { asFragment } = render(); - expect(screen.getByRole("button", { name: "Room Options" })).toBeInTheDocument(); - expect(asFragment()).toMatchSnapshot(); - }); -}); diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListView-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListView-test.tsx index b1bfe914e5..78cc3f5084 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListView-test.tsx +++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListView-test.tsx @@ -14,7 +14,6 @@ import { useRoomListViewModel, } from "../../../../../../src/components/viewmodels/roomlist/RoomListViewModel"; import { SecondaryFilters } from "../../../../../../src/components/viewmodels/roomlist/useFilteredRooms"; -import { SortOption } from "../../../../../../src/components/viewmodels/roomlist/useSorter"; import { RoomListView } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListView"; import { mkRoom, stubClient } from "../../../../../test-utils"; @@ -29,13 +28,9 @@ describe("", () => { primaryFilters: [], activateSecondaryFilter: jest.fn().mockReturnValue({}), activeSecondaryFilter: SecondaryFilters.AllActivity, - sort: jest.fn(), - activeSortOption: SortOption.Activity, createRoom: jest.fn(), createChatRoom: jest.fn(), canCreateRoom: true, - toggleMessagePreview: jest.fn(), - shouldShowMessagePreview: false, activeIndex: undefined, }; const matrixClient = stubClient(); diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap index 8cef8f43ed..8a3caa1587 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap +++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap @@ -1,6 +1,252 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` compose menu should display the compose menu 1`] = ` + +
+
+

+ title +

+ +
+
+ + +
+
+ +`; + +exports[` compose menu should not display the compose menu 1`] = ` + +
+
+

+ title +

+ +
+
+ + +
+
+ +`; + +exports[` should render 'room options' button 1`] = `
compose menu should display the compose menu 1`] - -
- -`; - -exports[` compose menu should not display the compose menu 1`] = ` - -
-

- title -

+ + -
`; @@ -196,7 +396,7 @@ exports[` space menu should display the space menu 1`] = ` aria-label="Open space menu" class="_icon-button_m2erp_8 mx_SpaceMenu_button" data-state="closed" - id="radix-«rs»" + id="radix-«r28»" role="button" style="--cpd-icon-button-size: 20px;" tabindex="0" @@ -221,42 +421,79 @@ exports[` space menu should display the space menu 1`] = ` - + + + + + + + `; @@ -279,42 +516,79 @@ exports[` space menu should not display the space menu 1`] title - + + + + + + + `; diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListOptionsMenu-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListOptionsMenu-test.tsx.snap index 9bc7a88508..aafcede2ad 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListOptionsMenu-test.tsx.snap +++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListOptionsMenu-test.tsx.snap @@ -8,7 +8,7 @@ exports[` should match snapshot 1`] = ` aria-haspopup="menu" aria-label="Room Options" aria-labelledby="«r2»" - class="_icon-button_m2erp_8 mx_RoomListSecondaryFilters_roomOptionsButton" + class="_icon-button_m2erp_8" data-state="closed" id="radix-«r0»" role="button" @@ -21,6 +21,7 @@ exports[` should match snapshot 1`] = ` style="--cpd-icon-button-size: 100%;" > should match snapshot 1`] = ` xmlns="http://www.w3.org/2000/svg" > diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap index b11fb34819..c382698d49 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap +++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap @@ -23,36 +23,73 @@ exports[` should not render the RoomListSearch component when U Home - + + + + + + +
    should not render the RoomListSearch component when U aria-expanded="false" aria-haspopup="menu" aria-label="Filter" - aria-labelledby="«rk»" + aria-labelledby="«rr»" class="_icon-button_m2erp_8" data-state="closed" - id="radix-«ri»" + id="radix-«rp»" role="button" style="--cpd-icon-button-size: 28px;" tabindex="0" @@ -150,37 +187,6 @@ exports[` should not render the RoomListSearch component when U All activity -
    should render the RoomListSearch component when UICom Home
    - + + + + + + +
      should render the RoomListSearch component when UICom aria-expanded="false" aria-haspopup="menu" aria-label="Filter" - aria-labelledby="«r4»" + aria-labelledby="«rb»" class="_icon-button_m2erp_8" data-state="closed" - id="radix-«r2»" + id="radix-«r9»" role="button" style="--cpd-icon-button-size: 28px;" tabindex="0" @@ -405,37 +448,6 @@ exports[` should render the RoomListSearch component when UICom All activity -
      should render 'room options' button 1`] = ` - -
      - - All activity - -
      -       -`;