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

New room list: add primary filters (#29481)

Browse Source 
* feat(room filter): add component for the primary filters

* feat(room filter): add filter component to room list view

* test(room filter): add tests to primary filters

* test: update snapshots

* test(e2e): update snapshots

* test(e2e): add tests for primary filters

* refactor: change aria-label of primary filters
This commit is contained in:
Florian Duros
2025-03-13 18:29:57 +01:00
committed by GitHub
parent fda658182a
commit 20d8abf7c2
14 changed files with 354 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx Normal file
View File

@@ -0,0 +1,43 @@
/*
* 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 { RoomListPrimaryFilters } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters";
describe("<RoomListPrimaryFilters />", () => {
let vm: RoomListViewState;
beforeEach(() => {
vm = {
rooms: [],
openRoom: jest.fn(),
primaryFilters: [
{ name: "People", active: false, toggle: jest.fn() },
{ name: "Rooms", active: true, toggle: jest.fn() },
],
activateSecondaryFilter: () => {},
activeSecondaryFilter: SecondaryFilters.AllActivity,
};
});
it("should render primary filters", async () => {
const user = userEvent.setup();
const { asFragment } = render(<RoomListPrimaryFilters vm={vm} />);
expect(screen.getByRole("option", { name: "People" })).toBeInTheDocument();
expect(screen.getByRole("option", { name: "Rooms" })).toHaveAttribute("aria-selected", "true");
expect(asFragment()).toMatchSnapshot();
await user.click(screen.getByRole("button", { name: "People" }));
expect(vm.primaryFilters[0].toggle).toHaveBeenCalled();
});
});

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

@@ -24,6 +24,65 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
</h1>
</div>
</header>
<ul
aria-label="Room list filters"
class="mx_Flex mx_RoomListPrimaryFilters"
role="listbox"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
>
<li
aria-selected="false"
role="option"
>
<button
aria-selected="false"
class="_chat-filter_5qdp0_8"
role="button"
tabindex="0"
>
Unread
</button>
</li>
<li
aria-selected="false"
role="option"
>
<button
aria-selected="false"
class="_chat-filter_5qdp0_8"
role="button"
tabindex="0"
>
Favourites
</button>
</li>
<li
aria-selected="false"
role="option"
>
<button
aria-selected="false"
class="_chat-filter_5qdp0_8"
role="button"
tabindex="0"
>
People
</button>
</li>
<li
aria-selected="false"
role="option"
>
<button
aria-selected="false"
class="_chat-filter_5qdp0_8"
role="button"
tabindex="0"
>
Rooms
</button>
</li>
</ul>
<div
class="mx_RoomList"
data-testid="room-list"
@@ -174,6 +233,65 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
</div>
</button>
</header>
<ul
aria-label="Room list filters"
class="mx_Flex mx_RoomListPrimaryFilters"
role="listbox"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
>
<li
aria-selected="false"
role="option"
>
<button
aria-selected="false"
class="_chat-filter_5qdp0_8"
role="button"
tabindex="0"
>
Unread
</button>
</li>
<li
aria-selected="false"
role="option"
>
<button
aria-selected="false"
class="_chat-filter_5qdp0_8"
role="button"
tabindex="0"
>
Favourites
</button>
</li>
<li
aria-selected="false"
role="option"
>
<button
aria-selected="false"
class="_chat-filter_5qdp0_8"
role="button"
tabindex="0"
>
People
</button>
</li>
<li
aria-selected="false"
role="option"
>
<button
aria-selected="false"
class="_chat-filter_5qdp0_8"
role="button"
tabindex="0"
>
Rooms
</button>
</li>
</ul>
<div
class="mx_RoomList"
data-testid="room-list"

39
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap Normal file
View File

@@ -0,0 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<RoomListPrimaryFilters /> should render primary filters 1`] = `
<DocumentFragment>
<ul
aria-label="Room list filters"
class="mx_Flex mx_RoomListPrimaryFilters"
role="listbox"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
>
<li
aria-selected="false"
role="option"
>
<button
aria-selected="false"
class="_chat-filter_5qdp0_8"
role="button"
tabindex="0"
>
People
</button>
</li>
<li
aria-selected="true"
role="option"
>
<button
aria-selected="true"
class="_chat-filter_5qdp0_8"
role="button"
tabindex="0"
>
Rooms
</button>
</li>
</ul>
</DocumentFragment>
`;