Skip to content

Commit e7da83b

Browse files
floriandurosflorianduros
committed
test(room list item menu view): add tests for notification options menu
1 parent d983e01 commit e7da83b

File tree

2 files changed

+162
-8
lines changed

2 files changed

+162
-8
lines changed

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

Lines changed: 53 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
import type { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
1818
import { mkRoom, stubClient } from "../../../../../test-utils";
1919
import { RoomListItemMenuView } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListItemMenuView";
20+
import { RoomNotifState } from "../../../../../../src/RoomNotifs";
2021

2122
jest.mock("../../../../../../src/components/viewmodels/roomlist/RoomListItemMenuViewModel", () => ({
2223
useRoomListItemMenuViewModel: jest.fn(),
@@ -25,18 +26,24 @@ jest.mock("../../../../../../src/components/viewmodels/roomlist/RoomListItemMenu
2526
describe("<RoomListItemMenuView />", () => {
2627
const defaultValue: RoomListItemMenuViewState = {
2728
showMoreOptionsMenu: true,
29+
showNotificationMenu: true,
2830
isFavourite: true,
2931
canInvite: true,
3032
canMarkAsUnread: true,
3133
canMarkAsRead: true,
3234
canCopyRoomLink: true,
35+
isNotificationAllMessage: true,
36+
isNotificationMentionOnly: true,
37+
isNotificationAllMessageLoud: true,
38+
isNotificationMute: true,
3339
copyRoomLink: jest.fn(),
3440
markAsUnread: jest.fn(),
3541
markAsRead: jest.fn(),
3642
leaveRoom: jest.fn(),
3743
toggleLowPriority: jest.fn(),
3844
toggleFavorite: jest.fn(),
3945
invite: jest.fn(),
46+
setRoomNotifState: jest.fn(),
4047
};
4148

4249
let matrixClient: MatrixClient;
@@ -58,22 +65,37 @@ describe("<RoomListItemMenuView />", () => {
5865
expect(asFragment()).toMatchSnapshot();
5966
});
6067

68+
it("should render the notification options menu", () => {
69+
const { asFragment } = renderMenu();
70+
expect(screen.getByRole("button", { name: "Notification options" })).toBeInTheDocument();
71+
expect(asFragment()).toMatchSnapshot();
72+
});
73+
6174
it("should not render the more options menu when showMoreOptionsMenu is false", () => {
6275
mocked(useRoomListItemMenuViewModel).mockReturnValue({ ...defaultValue, showMoreOptionsMenu: false });
6376
renderMenu();
6477
expect(screen.queryByRole("button", { name: "More Options" })).toBeNull();
6578
});
6679

67-
it("should call setMenuOpen when the menu is opened", async () => {
68-
const user = userEvent.setup();
69-
const setMenuOpen = jest.fn();
70-
renderMenu(setMenuOpen);
71-
72-
await user.click(screen.getByRole("button", { name: "More Options" }));
73-
expect(setMenuOpen).toHaveBeenCalledWith(true);
80+
it("should not render the notification options menu when showNotificationMenu is false", () => {
81+
mocked(useRoomListItemMenuViewModel).mockReturnValue({ ...defaultValue, showNotificationMenu: false });
82+
renderMenu();
83+
expect(screen.queryByRole("button", { name: "Notification options" })).toBeNull();
7484
});
7585

76-
it("should display all the buttons and have the actions linked", async () => {
86+
it.each([["More Options"], ["Notification options"]])(
87+
"should call setMenuOpen when the menu is opened for %s menu",
88+
async (label) => {
89+
const user = userEvent.setup();
90+
const setMenuOpen = jest.fn();
91+
renderMenu(setMenuOpen);
92+
93+
await user.click(screen.getByRole("button", { name: label }));
94+
expect(setMenuOpen).toHaveBeenCalledWith(true);
95+
},
96+
);
97+
98+
it("should display all the buttons and have the actions linked for the more options menu", async () => {
7799
const user = userEvent.setup();
78100
renderMenu();
79101

@@ -107,4 +129,27 @@ describe("<RoomListItemMenuView />", () => {
107129
await user.click(screen.getByRole("menuitem", { name: "Leave room" }));
108130
expect(defaultValue.leaveRoom).toHaveBeenCalled();
109131
});
132+
133+
it("should display all the buttons and have the actions linked for the notification options menu", async () => {
134+
const user = userEvent.setup();
135+
renderMenu();
136+
137+
const openMenu = screen.getByRole("button", { name: "Notification options" });
138+
await user.click(openMenu);
139+
140+
await user.click(screen.getByRole("menuitem", { name: "Match default settings" }));
141+
expect(defaultValue.setRoomNotifState).toHaveBeenCalledWith(RoomNotifState.AllMessages);
142+
143+
await user.click(openMenu);
144+
await user.click(screen.getByRole("menuitem", { name: "All messages" }));
145+
expect(defaultValue.setRoomNotifState).toHaveBeenCalledWith(RoomNotifState.AllMessagesLoud);
146+
147+
await user.click(openMenu);
148+
await user.click(screen.getByRole("menuitem", { name: "Mentions and keywords" }));
149+
expect(defaultValue.setRoomNotifState).toHaveBeenCalledWith(RoomNotifState.MentionsOnly);
150+
151+
await user.click(openMenu);
152+
await user.click(screen.getByRole("menuitem", { name: "Mute room" }));
153+
expect(defaultValue.setRoomNotifState).toHaveBeenCalledWith(RoomNotifState.Mute);
154+
});
110155
});

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

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,115 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
3737
</svg>
3838
</div>
3939
</button>
40+
<button
41+
aria-disabled="false"
42+
aria-expanded="false"
43+
aria-haspopup="menu"
44+
aria-label="Notification options"
45+
aria-labelledby=":r9:"
46+
class="_icon-button_m2erp_8"
47+
data-state="closed"
48+
id="radix-:r7:"
49+
role="button"
50+
style="--cpd-icon-button-size: 24px;"
51+
tabindex="0"
52+
type="button"
53+
>
54+
<div
55+
class="_indicator-icon_zr2a0_17"
56+
style="--cpd-icon-button-size: 100%;"
57+
>
58+
<svg
59+
fill="currentColor"
60+
height="1em"
61+
viewBox="0 0 24 24"
62+
width="1em"
63+
xmlns="http://www.w3.org/2000/svg"
64+
>
65+
<path
66+
d="m4.917 2.083 17 17a1 1 0 0 1-1.414 1.414L19.006 19H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-2.034 1.096-3.91L3.504 3.498a1 1 0 0 1 1.414-1.414M19 13.35 9.136 3.484C9.93 3.181 10.874 3 12 3c7 0 7 7 7 7z"
67+
/>
68+
<path
69+
d="M10 20h4a2 2 0 0 1-4 0"
70+
/>
71+
</svg>
72+
</div>
73+
</button>
74+
</div>
75+
</DocumentFragment>
76+
`;
77+
78+
exports[`<RoomListItemMenuView /> should render the notification options menu 1`] = `
79+
<DocumentFragment>
80+
<div
81+
class="mx_Flex mx_RoomListItemMenuView"
82+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
83+
>
84+
<button
85+
aria-disabled="false"
86+
aria-expanded="false"
87+
aria-haspopup="menu"
88+
aria-label="More Options"
89+
aria-labelledby=":ri:"
90+
class="_icon-button_m2erp_8"
91+
data-state="closed"
92+
id="radix-:rg:"
93+
role="button"
94+
style="--cpd-icon-button-size: 24px;"
95+
tabindex="0"
96+
type="button"
97+
>
98+
<div
99+
class="_indicator-icon_zr2a0_17"
100+
style="--cpd-icon-button-size: 100%;"
101+
>
102+
<svg
103+
fill="currentColor"
104+
height="1em"
105+
viewBox="0 0 24 24"
106+
width="1em"
107+
xmlns="http://www.w3.org/2000/svg"
108+
>
109+
<path
110+
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
111+
/>
112+
</svg>
113+
</div>
114+
</button>
115+
<button
116+
aria-disabled="false"
117+
aria-expanded="false"
118+
aria-haspopup="menu"
119+
aria-label="Notification options"
120+
aria-labelledby=":rp:"
121+
class="_icon-button_m2erp_8"
122+
data-state="closed"
123+
id="radix-:rn:"
124+
role="button"
125+
style="--cpd-icon-button-size: 24px;"
126+
tabindex="0"
127+
type="button"
128+
>
129+
<div
130+
class="_indicator-icon_zr2a0_17"
131+
style="--cpd-icon-button-size: 100%;"
132+
>
133+
<svg
134+
fill="currentColor"
135+
height="1em"
136+
viewBox="0 0 24 24"
137+
width="1em"
138+
xmlns="http://www.w3.org/2000/svg"
139+
>
140+
<path
141+
d="m4.917 2.083 17 17a1 1 0 0 1-1.414 1.414L19.006 19H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-2.034 1.096-3.91L3.504 3.498a1 1 0 0 1 1.414-1.414M19 13.35 9.136 3.484C9.93 3.181 10.874 3 12 3c7 0 7 7 7 7z"
142+
/>
143+
<path
144+
d="M10 20h4a2 2 0 0 1-4 0"
145+
/>
146+
</svg>
147+
</div>
148+
</button>
40149
</div>
41150
</DocumentFragment>
42151
`;

0 commit comments

Comments
 (0)