Display rooms & threads as unread (bold) if threads have unread messages. (#9763)

Co-authored-by: Germain <germain@souquet.com>
Co-authored-by: Germain <germains@element.io>
Fixes https://github.com/vector-im/element-web/issues/23907

test/components/views/rooms/NotificationBadge/UnreadNotificationBadge-test.tsx

@@ -17,13 +17,15 @@ limitations under the License.
 import React from "react";
 import "jest-mock";
 import { screen, act, render } from "@testing-library/react";
-import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client";
+import { MatrixEvent, MsgType, RelationType } from "matrix-js-sdk/src/matrix";
+import { PendingEventOrdering } from "matrix-js-sdk/src/client";
 import { NotificationCountType, Room } from "matrix-js-sdk/src/models/room";
-import { mocked } from "jest-mock";
 import { EventStatus } from "matrix-js-sdk/src/models/event-status";
+import { ReceiptType } from "matrix-js-sdk/src/@types/read_receipts";
 
+import { mkThread } from "../../../../test-utils/threads";
 import { UnreadNotificationBadge } from "../../../../../src/components/views/rooms/NotificationBadge/UnreadNotificationBadge";
-import { mkMessage, stubClient } from "../../../../test-utils/test-utils";
+import { mkEvent, mkMessage, stubClient } from "../../../../test-utils/test-utils";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import * as RoomNotifs from "../../../../../src/RoomNotifs";
 
@@ -34,28 +36,57 @@ jest.mock("../../../../../src/RoomNotifs", () => ({
 }));
 
 const ROOM_ID = "!roomId:example.org";
-let THREAD_ID;
+let THREAD_ID: string;
 
 describe("UnreadNotificationBadge", () => {
-    let mockClient: MatrixClient;
+    stubClient();
+    const client = MatrixClientPeg.get();
     let room: Room;
 
     function getComponent(threadId?: string) {
         return <UnreadNotificationBadge room={room} threadId={threadId} />;
     }
 
+    beforeAll(() => {
+        client.supportsExperimentalThreads = () => true;
+    });
+
     beforeEach(() => {
         jest.clearAllMocks();
 
-        stubClient();
-        mockClient = mocked(MatrixClientPeg.get());
-
-        room = new Room(ROOM_ID, mockClient, mockClient.getUserId() ?? "", {
+        room = new Room(ROOM_ID, client, client.getUserId()!, {
             pendingEventOrdering: PendingEventOrdering.Detached,
         });
+
+        const receipt = new MatrixEvent({
+            type: "m.receipt",
+            room_id: room.roomId,
+            content: {
+                "$event0:localhost": {
+                    [ReceiptType.Read]: {
+                        [client.getUserId()!]: { ts: 1, thread_id: "$otherthread:localhost" },
+                    },
+                },
+                "$event1:localhost": {
+                    [ReceiptType.Read]: {
+                        [client.getUserId()!]: { ts: 1 },
+                    },
+                },
+            },
+        });
+        room.addReceipt(receipt);
+
         room.setUnreadNotificationCount(NotificationCountType.Total, 1);
         room.setUnreadNotificationCount(NotificationCountType.Highlight, 0);
 
+        const { rootEvent } = mkThread({
+            room,
+            client,
+            authorId: client.getUserId()!,
+            participantUserIds: [client.getUserId()!],
+        });
+        THREAD_ID = rootEvent.getId()!;
+
         room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Total, 1);
         room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Highlight, 0);
 
@@ -125,4 +156,34 @@ describe("UnreadNotificationBadge", () => {
         const { container } = render(getComponent());
         expect(container.querySelector(".mx_NotificationBadge")).toBeNull();
     });
+
+    it("activity renders unread notification badge", () => {
+        act(() => {
+            room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Total, 0);
+            room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Highlight, 0);
+
+            // Add another event on the thread which is not sent by us.
+            const event = mkEvent({
+                event: true,
+                type: "m.room.message",
+                user: "@alice:server.org",
+                room: room.roomId,
+                content: {
+                    "msgtype": MsgType.Text,
+                    "body": "Hello from Bob",
+                    "m.relates_to": {
+                        event_id: THREAD_ID,
+                        rel_type: RelationType.Thread,
+                    },
+                },
+                ts: 5,
+            });
+            room.addLiveEvents([event]);
+        });
+
+        const { container } = render(getComponent(THREAD_ID));
+        expect(container.querySelector(".mx_NotificationBadge_dot")).toBeTruthy();
+        expect(container.querySelector(".mx_NotificationBadge_visible")).toBeTruthy();
+        expect(container.querySelector(".mx_NotificationBadge_highlighted")).toBeFalsy();
+    });
 });