diff --git a/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts b/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts index 21d22d8ccd..0ce13173b8 100644 --- a/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts +++ b/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts @@ -140,29 +140,35 @@ test.describe("Room list filters and sort", () => { expect(await roomList.locator("role=gridcell").count()).toBe(3); }); - test("unread filter should only match unread rooms that have a count", async ({ page, app, bot }) => { - const roomListView = getRoomList(page); + test( + "unread filter should only match unread rooms that have a count", + { tag: "@screenshot" }, + async ({ page, app, bot }) => { + const roomListView = getRoomList(page); - // Let's configure unread dm room so that we only get notification for mentions and keywords - await app.viewRoomById(unReadDmId); - await app.settings.openRoomSettings("Notifications"); - await page.getByText("@mentions & keywords").click(); - await app.settings.closeDialog(); + // Let's configure unread dm room so that we only get notification for mentions and keywords + await app.viewRoomById(unReadDmId); + await app.settings.openRoomSettings("Notifications"); + await page.getByText("@mentions & keywords").click(); + await app.settings.closeDialog(); - // Let's open a room other than unread room or unread dm - await roomListView.getByRole("gridcell", { name: "Open room favourite room" }).click(); + // Let's open a room other than unread room or unread dm + await roomListView.getByRole("gridcell", { name: "Open room favourite room" }).click(); - // Let's make the bot send a new message in both rooms - await bot.sendMessage(unReadDmId, "Hello!"); - await bot.sendMessage(unReadRoomId, "Hello!"); + // Let's make the bot send a new message in both rooms + await bot.sendMessage(unReadDmId, "Hello!"); + await bot.sendMessage(unReadRoomId, "Hello!"); - // Let's activate the unread filter now - await page.getByRole("option", { name: "Unread" }).click(); + // Let's activate the unread filter now + await page.getByRole("option", { name: "Unread" }).click(); - // Unread filter should only show unread room and not unread dm! - await expect(roomListView.getByRole("gridcell", { name: "Open room unread room" })).toBeVisible(); - await expect(roomListView.getByRole("gridcell", { name: "Open room unread dm" })).not.toBeVisible(); - }); + // Unread filter should only show unread room and not unread dm! + const unreadDm = roomListView.getByRole("gridcell", { name: "Open room unread room" }); + await expect(unreadDm).toBeVisible(); + await expect(unreadDm).toMatchScreenshot("unread-dm.png"); + await expect(roomListView.getByRole("gridcell", { name: "Open room unread dm" })).not.toBeVisible(); + }, + ); }); test.describe("Empty room list", () => { diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-dm-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-dm-linux.png new file mode 100644 index 0000000000..8f33802a87 Binary files /dev/null and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-dm-linux.png differ diff --git a/src/components/viewmodels/roomlist/RoomListItemViewModel.tsx b/src/components/viewmodels/roomlist/RoomListItemViewModel.tsx index 0f10f600fb..e543dd46b2 100644 --- a/src/components/viewmodels/roomlist/RoomListItemViewModel.tsx +++ b/src/components/viewmodels/roomlist/RoomListItemViewModel.tsx @@ -92,6 +92,11 @@ export function useRoomListItemViewModel(room: Room): RoomListItemViewState { setNotificationValues(getNotificationValues(notificationState)); }); + // If the notification reference change due to room change, update the values + useEffect(() => { + setNotificationValues(getNotificationValues(notificationState)); + }, [notificationState]); + // We don't want to show the hover menu if // - there is an invitation for this room // - the user doesn't have access to both notification and more options menus diff --git a/test/unit-tests/components/viewmodels/roomlist/RoomListItemViewModel-test.tsx b/test/unit-tests/components/viewmodels/roomlist/RoomListItemViewModel-test.tsx index 68ba08c596..c00c38227d 100644 --- a/test/unit-tests/components/viewmodels/roomlist/RoomListItemViewModel-test.tsx +++ b/test/unit-tests/components/viewmodels/roomlist/RoomListItemViewModel-test.tsx @@ -128,6 +128,24 @@ describe("RoomListItemViewModel", () => { ); expect(vm.current.isBold).toBe(true); }); + + it("should recompute notification state when room changes", () => { + const newRoom = mkStubRoom("room2", "Room 2", room.client); + const newNotificationState = new RoomNotificationState(newRoom, false); + + const { result, rerender } = renderHook((room) => useRoomListItemViewModel(room), { + ...withClientContextRenderOptions(room.client), + initialProps: room, + }); + + expect(result.current.showNotificationDecoration).toBe(false); + + jest.spyOn(newNotificationState, "hasAnyNotificationOrActivity", "get").mockReturnValue(true); + jest.spyOn(RoomNotificationStateStore.instance, "getRoomState").mockReturnValue(newNotificationState); + rerender(newRoom); + + expect(result.current.showNotificationDecoration).toBe(true); + }); }); describe("a11yLabel", () => {