Skip to content

Commit d74d231

Browse files
floriandurosflorianduros
committed
test: update room list primary filter tests
1 parent fa159aa commit d74d231

2 files changed

Lines changed: 90 additions & 145 deletions

File tree

‎test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx‎

Lines changed: 41 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,13 @@
66
*/
77

88
import React, { act } from "react";
9-
import { render, screen, waitFor } from "jest-matrix-react";
9+
import { render, screen } from "jest-matrix-react";
1010
import userEvent from "@testing-library/user-event";
1111

1212
import { type RoomListViewState } from "../../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
1313
import { RoomListPrimaryFilters } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters";
1414
import { FilterKey } from "../../../../../../src/stores/room-list-v3/skip-list/filters";
1515

16-
// Mock the useIsNodeVisible hook
17-
jest.mock("../../../../../../src/hooks/useIsNodeVisible", () => ({
18-
useIsNodeVisible: jest.fn().mockImplementation(() => ({
19-
isVisible: true,
20-
nodeRef: jest.fn(),
21-
rootRef: jest.fn(),
22-
})),
23-
}));
24-
25-
jest.mock("../../../../../../src/hooks/left-panel/room-list/useFilterHeight", () => ({
26-
useFilterHeight: jest.fn().mockImplementation(() => ({
27-
filterHeight: 30,
28-
})),
29-
}));
30-
3116
describe("<RoomListPrimaryFilters />", () => {
3217
let vm: RoomListViewState;
3318
const filterToggleMocks = [jest.fn(), jest.fn(), jest.fn()];
@@ -84,89 +69,57 @@ describe("<RoomListPrimaryFilters />", () => {
8469
expect(filterToggleMocks[0]).toHaveBeenCalledTimes(1);
8570
});
8671

87-
it("should show chevron and expands filters when there's overflow", async () => {
88-
const user = userEvent.setup();
89-
render(<RoomListPrimaryFilters vm={vm} />);
90-
91-
expect(screen.getByTestId("filter-container")).toHaveAttribute("data-expanded", "false");
92-
93-
// Force the overflow state by simulating ResizeObserver callback
94-
// Mock that the scrollHeight is greater than FILTER_HEIGHT (30)
95-
jest.spyOn(screen.getByRole("listbox", { name: "Room list filters" }), "scrollHeight", "get").mockReturnValue(
96-
50,
97-
);
98-
// @ts-ignore
99-
act(() => resizeCallback());
100-
101-
await waitFor(async () => {
102-
const chevronButton = screen.getByRole("button", { name: "Expand filter list" });
103-
await user.click(chevronButton);
104-
});
72+
function mockFiltersOffsetLeft() {
73+
jest.spyOn(screen.getByRole("option", { name: "People" }), "offsetLeft", "get").mockReturnValue(0);
74+
jest.spyOn(screen.getByRole("option", { name: "Rooms" }), "offsetLeft", "get").mockReturnValue(30);
75+
// Unreads is wrapping
76+
jest.spyOn(screen.getByRole("option", { name: "Unreads" }), "offsetLeft", "get").mockReturnValue(0);
77+
}
10578

106-
// Check that the container has the expanded attribute
107-
await waitFor(() => {
108-
expect(screen.getByTestId("filter-container")).toHaveAttribute("data-expanded", "true");
109-
expect(screen.getByRole("button", { name: "Collapse filter list" })).toBeInTheDocument();
110-
});
111-
});
112-
113-
it("should not show the chevron when the list is equal at FILTER_HEIGHT", async () => {
79+
it("should hide or display filters if they are wrapping", async () => {
80+
const user = userEvent.setup();
11481
render(<RoomListPrimaryFilters vm={vm} />);
11582

116-
// Force the overflow state by simulating ResizeObserver callback
117-
// Mock that the scrollHeight is greater than FILTER_HEIGHT (30)
118-
jest.spyOn(screen.getByRole("listbox", { name: "Room list filters" }), "scrollHeight", "get").mockReturnValue(
119-
30,
120-
);
121-
122-
// @ts-ignore
123-
act(() => resizeCallback());
124-
83+
// No filter is wrapping, so chevron shouldn't be visible
12584
expect(screen.queryByRole("button", { name: "Expand filter list" })).toBeNull();
126-
});
127-
128-
it("handles filter reordering when active filter is not visible", async () => {
129-
// Mock useIsNodeVisible to return false, indicating active filter is not visible
130-
jest.requireMock("../../../../../../src/hooks/useIsNodeVisible").useIsNodeVisible.mockImplementation(() => ({
131-
isVisible: false,
132-
nodeRef: jest.fn(),
133-
rootRef: jest.fn(),
134-
}));
135-
136-
render(<RoomListPrimaryFilters vm={vm} />);
85+
expect(screen.queryByRole("option", { name: "Unreads" })).toBeVisible();
13786

138-
// Check that filters are reordered with the active one first
139-
const options = screen.getAllByRole("option");
140-
expect(options[0]).toHaveAttribute("aria-selected", "true");
141-
expect(options[0].textContent).toBe("Rooms");
87+
mockFiltersOffsetLeft();
88+
// @ts-ignore
89+
act(() => resizeCallback([{ target: screen.getByRole("listbox", { name: "Room list filters" }) }]));
90+
91+
// The Unreads filter is wrapping, it should not be visible
92+
expect(screen.queryByRole("option", { name: "Unreads" })).toBeNull();
93+
// Now filters are wrapping, so chevron should be visible
94+
await user.click(screen.getByRole("button", { name: "Expand filter list" }));
95+
// The list is expanded, so Unreads should be visible
96+
expect(screen.getByRole("option", { name: "Unreads" })).toBeVisible();
14297
});
14398

144-
it("resets filter ordering when a filter is selected", async () => {
145-
// Setup: First mock it as not visible so it reorders
146-
jest.requireMock("../../../../../../src/hooks/useIsNodeVisible").useIsNodeVisible.mockImplementation(() => ({
147-
isVisible: false,
148-
nodeRef: jest.fn(),
149-
rootRef: jest.fn(),
150-
}));
99+
it("should move the active filter if the list is collapsed and the filter is wrapping", async () => {
100+
vm = {
101+
primaryFilters: [
102+
{ name: "People", active: false, toggle: filterToggleMocks[0], key: FilterKey.PeopleFilter },
103+
{ name: "Rooms", active: false, toggle: filterToggleMocks[1], key: FilterKey.RoomsFilter },
104+
{ name: "Unreads", active: true, toggle: filterToggleMocks[2], key: FilterKey.UnreadFilter },
105+
],
106+
} as unknown as RoomListViewState;
151107

152108
const user = userEvent.setup();
153109
render(<RoomListPrimaryFilters vm={vm} />);
110+
mockFiltersOffsetLeft();
111+
// @ts-ignore
112+
act(() => resizeCallback([{ target: screen.getByRole("listbox", { name: "Room list filters" }) }]));
154113

155-
// Check initial order (reordered with active first)
156-
let options = screen.getAllByRole("option");
157-
expect(options[0].textContent).toBe("Rooms");
158-
159-
// Now change the hook to return true and click a filter
160-
jest.requireMock("../../../../../../src/hooks/useIsNodeVisible").useIsNodeVisible.mockImplementation(() => ({
161-
isVisible: true,
162-
nodeRef: jest.fn(),
163-
rootRef: jest.fn(),
164-
}));
165-
166-
await user.click(screen.getByRole("button", { name: "People" }));
114+
// Unread filter should be moved to the first position
115+
expect(screen.getByRole("listbox", { name: "Room list filters" }).children[0]).toBe(
116+
screen.getByRole("option", { name: "Unreads" }),
117+
);
167118

168-
// The order should be reset to original order
169-
options = screen.getAllByRole("option");
170-
expect(options[0].textContent).toBe("People");
119+
// When the list is expanded, the Unreads filter should move to its original position
120+
await user.click(screen.getByRole("button", { name: "Expand filter list" }));
121+
expect(screen.getByRole("listbox", { name: "Room list filters" }).children[0]).not.toEqual(
122+
screen.getByRole("option", { name: "Unreads" }),
123+
);
171124
});
172125
});

‎test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap‎

Lines changed: 49 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -3,68 +3,60 @@
33
exports[`<RoomListPrimaryFilters /> should renders all filters correctly 1`] = `
44
<DocumentFragment>
55
<div
6-
class="mx_RoomListPrimaryFilters"
6+
class="mx_Flex mx_RoomListPrimaryFilters"
77
data-testid="primary-filters"
8+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
89
>
9-
<div
10-
class="mx_RoomListPrimaryFilters_container"
11-
data-expanded="false"
12-
data-testid="filter-container"
13-
style="--row-height: 30fr; transition: 0.1s ease-in-out;"
10+
<ul
11+
aria-label="Room list filters"
12+
class="mx_Flex"
13+
id="«r0»"
14+
role="listbox"
15+
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;"
1416
>
15-
<div
16-
class="mx_Flex mx_RoomListPrimaryFilters_animated"
17-
id="«r0»"
18-
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
17+
<li
18+
aria-hidden="false"
19+
aria-selected="false"
20+
role="option"
1921
>
20-
<ul
21-
aria-label="Room list filters"
22-
class="mx_Flex"
23-
role="listbox"
24-
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;"
22+
<button
23+
aria-selected="false"
24+
class="_chat-filter_5qdp0_8"
25+
role="button"
26+
tabindex="0"
2527
>
26-
<li
27-
aria-selected="false"
28-
role="option"
29-
>
30-
<button
31-
aria-selected="false"
32-
class="_chat-filter_5qdp0_8"
33-
role="button"
34-
tabindex="0"
35-
>
36-
People
37-
</button>
38-
</li>
39-
<li
40-
aria-selected="true"
41-
role="option"
42-
>
43-
<button
44-
aria-selected="true"
45-
class="_chat-filter_5qdp0_8"
46-
role="button"
47-
tabindex="0"
48-
>
49-
Rooms
50-
</button>
51-
</li>
52-
<li
53-
aria-selected="false"
54-
role="option"
55-
>
56-
<button
57-
aria-selected="false"
58-
class="_chat-filter_5qdp0_8"
59-
role="button"
60-
tabindex="0"
61-
>
62-
Unreads
63-
</button>
64-
</li>
65-
</ul>
66-
</div>
67-
</div>
28+
People
29+
</button>
30+
</li>
31+
<li
32+
aria-hidden="false"
33+
aria-selected="true"
34+
role="option"
35+
>
36+
<button
37+
aria-selected="true"
38+
class="_chat-filter_5qdp0_8"
39+
role="button"
40+
tabindex="0"
41+
>
42+
Rooms
43+
</button>
44+
</li>
45+
<li
46+
aria-hidden="false"
47+
aria-selected="false"
48+
role="option"
49+
>
50+
<button
51+
aria-selected="false"
52+
class="_chat-filter_5qdp0_8"
53+
role="button"
54+
tabindex="0"
55+
>
56+
Unreads
57+
</button>
58+
</li>
59+
</ul>
6860
</div>
6961
</DocumentFragment>
7062
`;

0 commit comments

Comments
 (0)
⚡