New room list: add notification decoration (#29552)

* chore: update @compound-web

* feat(notification decoration): add NotificationDecoration component

* feat(room list item): get notification state in view model

* feat(room list item): use notification decoration in RoomListItemView

* test(notification decoration): add tests

* test(room list item view model): add a11yLabel tests

* test(room list item): update tests

* test(e2e): add decoration tests
This commit is contained in:
Florian Duros
2025-03-26 14:32:02 +01:00
committed by GitHub
parent f3f05874fa
commit bbd798ef36
17 changed files with 563 additions and 66 deletions

View File

@@ -14,6 +14,8 @@ import { Action } from "../../../../../src/dispatcher/actions";
import { useRoomListItemViewModel } from "../../../../../src/components/viewmodels/roomlist/RoomListItemViewModel";
import { createTestClient, mkStubRoom } from "../../../../test-utils";
import { hasAccessToOptionsMenu } from "../../../../../src/components/viewmodels/roomlist/utils";
import { RoomNotificationState } from "../../../../../src/stores/notifications/RoomNotificationState";
import { RoomNotificationStateStore } from "../../../../../src/stores/notifications/RoomNotificationStateStore";
jest.mock("../../../../../src/components/viewmodels/roomlist/utils", () => ({
hasAccessToOptionsMenu: jest.fn().mockReturnValue(false),
@@ -46,4 +48,49 @@ describe("RoomListItemViewModel", () => {
const { result: vm } = renderHook(() => useRoomListItemViewModel(room));
expect(vm.current.showHoverMenu).toBe(true);
});
describe("a11yLabel", () => {
let notificationState: RoomNotificationState;
beforeEach(() => {
notificationState = new RoomNotificationState(room, false);
jest.spyOn(RoomNotificationStateStore.instance, "getRoomState").mockReturnValue(notificationState);
});
it.each([
{
label: "unset message",
mock: () => jest.spyOn(notificationState, "isUnsetMessage", "get").mockReturnValue(true),
expected: "Open room roomName with an unset message.",
},
{
label: "invitation",
mock: () => jest.spyOn(notificationState, "invited", "get").mockReturnValue(true),
expected: "Open room roomName invitation.",
},
{
label: "mention",
mock: () => {
jest.spyOn(notificationState, "isMention", "get").mockReturnValue(true);
jest.spyOn(notificationState, "count", "get").mockReturnValue(3);
},
expected: "Open room roomName with 3 unread messages including mentions.",
},
{
label: "unread",
mock: () => {
jest.spyOn(notificationState, "hasUnreadCount", "get").mockReturnValue(true);
jest.spyOn(notificationState, "count", "get").mockReturnValue(3);
},
expected: "Open room roomName with 3 unread messages.",
},
{
label: "default",
expected: "Open room roomName",
},
])("should return the $label label", ({ mock, expected }) => {
mock?.();
const { result: vm } = renderHook(() => useRoomListItemViewModel(room));
expect(vm.current.a11yLabel).toBe(expected);
});
});
});