Include thread replies in message previews (#10631)

* Include thread replies to message previews

* Extend tests

* Fix type issue

* Use currentColor for thread icon

* Fix long room name overflow

* Update snapshots

* Fix preview

* Fix typing issue

* Fix type issues

* Tweak thread reply detection

* Extend tests

* Fix type issue

* Fix test

test/components/views/rooms/EventTile-test.tsx

@@ -131,16 +131,6 @@ describe("EventTile", () => {
     });
 
     describe("EventTile renderingType: ThreadsList", () => {
-        beforeEach(() => {
-            const { rootEvent } = mkThread({
-                room,
-                client,
-                authorId: "@alice:example.org",
-                participantUserIds: ["@alice:example.org"],
-            });
-            mxEvent = rootEvent;
-        });
-
         it("shows an unread notification badge", () => {
             const { container } = getComponent({}, TimelineRenderingType.ThreadsList);
 

test/components/views/rooms/RoomTile-test.tsx

@@ -22,6 +22,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
 import { Widget } from "matrix-widget-api";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { Thread } from "matrix-js-sdk/src/models/thread";
 
 import type { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import type { ClientWidgetApi } from "matrix-widget-api";
@@ -33,6 +34,7 @@ import {
     setupAsyncStoreWithClient,
     filterConsole,
     flushPromises,
+    mkMessage,
 } from "../../../test-utils";
 import { CallStore } from "../../../../src/stores/CallStore";
 import RoomTile from "../../../../src/components/views/rooms/RoomTile";
@@ -45,6 +47,7 @@ import { VoiceBroadcastInfoState } from "../../../../src/voice-broadcast";
 import { mkVoiceBroadcastInfoStateEvent } from "../../../voice-broadcast/utils/test-utils";
 import { TestSdkContext } from "../../../TestSdkContext";
 import { SDKContext } from "../../../../src/contexts/SDKContext";
+import { MessagePreviewStore } from "../../../../src/stores/room-list/MessagePreviewStore";
 
 describe("RoomTile", () => {
     jest.spyOn(PlatformPeg, "get").mockReturnValue({
@@ -69,7 +72,12 @@ describe("RoomTile", () => {
     const renderRoomTile = (): void => {
         renderResult = render(
             <SDKContext.Provider value={sdkContext}>
-                <RoomTile room={room} showMessagePreview={false} isMinimized={false} tag={DefaultTagID.Untagged} />
+                <RoomTile
+                    room={room}
+                    showMessagePreview={showMessagePreview}
+                    isMinimized={false}
+                    tag={DefaultTagID.Untagged}
+                />
             </SDKContext.Provider>,
         );
     };
@@ -79,12 +87,44 @@ describe("RoomTile", () => {
     let room: Room;
     let renderResult: RenderResult;
     let sdkContext: TestSdkContext;
+    let showMessagePreview = false;
 
     filterConsole(
         // irrelevant for this test
         "Room !1:example.org does not have an m.room.create event",
     );
 
+    const addMessageToRoom = (ts: number) => {
+        const message = mkMessage({
+            event: true,
+            room: room.roomId,
+            msg: "test message",
+            user: client.getSafeUserId(),
+            ts,
+        });
+
+        room.timeline.push(message);
+    };
+
+    const addThreadMessageToRoom = (ts: number) => {
+        const message = mkMessage({
+            event: true,
+            room: room.roomId,
+            msg: "test thread reply",
+            user: client.getSafeUserId(),
+            ts,
+        });
+
+        // Mock thread reply for tests.
+        jest.spyOn(room, "getThreads").mockReturnValue([
+            // @ts-ignore
+            {
+                lastReply: () => message,
+                timeline: [],
+            } as Thread,
+        ]);
+    };
+
     beforeEach(() => {
         sdkContext = new TestSdkContext();
 
@@ -99,130 +139,199 @@ describe("RoomTile", () => {
         client.getRoom.mockImplementation((roomId) => (roomId === room.roomId ? room : null));
         client.getRooms.mockReturnValue([room]);
         client.reEmitter.reEmit(room, [RoomStateEvent.Events]);
-
-        renderRoomTile();
     });
 
     afterEach(() => {
-        jest.clearAllMocks();
+        // @ts-ignore
+        MessagePreviewStore.instance.previews = new Map<string, Map<TagID | TAG_ANY, MessagePreview | null>>();
+        jest.restoreAllMocks();
     });
 
-    it("should render the room", () => {
-        expect(renderResult.container).toMatchSnapshot();
-    });
-
-    describe("when a call starts", () => {
-        let call: MockedCall;
-        let widget: Widget;
-
+    describe("when message previews are not enabled", () => {
         beforeEach(() => {
-            setupAsyncStoreWithClient(CallStore.instance, client);
-            setupAsyncStoreWithClient(WidgetMessagingStore.instance, client);
-
-            MockedCall.create(room, "1");
-            const maybeCall = CallStore.instance.getCall(room.roomId);
-            if (!(maybeCall instanceof MockedCall)) throw new Error("Failed to create call");
-            call = maybeCall;
-
-            widget = new Widget(call.widget);
-            WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, {
-                stop: () => {},
-            } as unknown as ClientWidgetApi);
+            renderRoomTile();
         });
 
-        afterEach(() => {
-            renderResult.unmount();
-            call.destroy();
-            client.reEmitter.stopReEmitting(room, [RoomStateEvent.Events]);
-            WidgetMessagingStore.instance.stopMessaging(widget, room.roomId);
+        it("should render the room", () => {
+            expect(renderResult.container).toMatchSnapshot();
         });
 
-        it("tracks connection state", async () => {
-            screen.getByText("Video");
+        describe("when a call starts", () => {
+            let call: MockedCall;
+            let widget: Widget;
 
-            // Insert an await point in the connection method so we can inspect
-            // the intermediate connecting state
-            let completeConnection: () => void = () => {};
-            const connectionCompleted = new Promise<void>((resolve) => (completeConnection = resolve));
-            jest.spyOn(call, "performConnection").mockReturnValue(connectionCompleted);
+            beforeEach(() => {
+                setupAsyncStoreWithClient(CallStore.instance, client);
+                setupAsyncStoreWithClient(WidgetMessagingStore.instance, client);
 
-            await Promise.all([
-                (async () => {
-                    await screen.findByText("Joining…");
-                    const joinedFound = screen.findByText("Joined");
-                    completeConnection();
-                    await joinedFound;
-                })(),
-                call.connect(),
-            ]);
+                MockedCall.create(room, "1");
+                const maybeCall = CallStore.instance.getCall(room.roomId);
+                if (!(maybeCall instanceof MockedCall)) throw new Error("Failed to create call");
+                call = maybeCall;
 
-            await Promise.all([screen.findByText("Video"), call.disconnect()]);
-        });
-
-        it("tracks participants", () => {
-            const alice: [RoomMember, Set<string>] = [mkRoomMember(room.roomId, "@alice:example.org"), new Set(["a"])];
-            const bob: [RoomMember, Set<string>] = [
-                mkRoomMember(room.roomId, "@bob:example.org"),
-                new Set(["b1", "b2"]),
-            ];
-            const carol: [RoomMember, Set<string>] = [mkRoomMember(room.roomId, "@carol:example.org"), new Set(["c"])];
-
-            expect(screen.queryByLabelText(/participant/)).toBe(null);
-
-            act(() => {
-                call.participants = new Map([alice]);
+                widget = new Widget(call.widget);
+                WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, {
+                    stop: () => {},
+                } as unknown as ClientWidgetApi);
             });
-            expect(screen.getByLabelText("1 participant").textContent).toBe("1");
 
-            act(() => {
-                call.participants = new Map([alice, bob, carol]);
+            afterEach(() => {
+                renderResult.unmount();
+                call.destroy();
+                client.reEmitter.stopReEmitting(room, [RoomStateEvent.Events]);
+                WidgetMessagingStore.instance.stopMessaging(widget, room.roomId);
             });
-            expect(screen.getByLabelText("4 participants").textContent).toBe("4");
 
-            act(() => {
-                call.participants = new Map();
+            it("tracks connection state", async () => {
+                screen.getByText("Video");
+
+                // Insert an await point in the connection method so we can inspect
+                // the intermediate connecting state
+                let completeConnection: () => void = () => {};
+                const connectionCompleted = new Promise<void>((resolve) => (completeConnection = resolve));
+                jest.spyOn(call, "performConnection").mockReturnValue(connectionCompleted);
+
+                await Promise.all([
+                    (async () => {
+                        await screen.findByText("Joining…");
+                        const joinedFound = screen.findByText("Joined");
+                        completeConnection();
+                        await joinedFound;
+                    })(),
+                    call.connect(),
+                ]);
+
+                await Promise.all([screen.findByText("Video"), call.disconnect()]);
+            });
+
+            it("tracks participants", () => {
+                const alice: [RoomMember, Set<string>] = [
+                    mkRoomMember(room.roomId, "@alice:example.org"),
+                    new Set(["a"]),
+                ];
+                const bob: [RoomMember, Set<string>] = [
+                    mkRoomMember(room.roomId, "@bob:example.org"),
+                    new Set(["b1", "b2"]),
+                ];
+                const carol: [RoomMember, Set<string>] = [
+                    mkRoomMember(room.roomId, "@carol:example.org"),
+                    new Set(["c"]),
+                ];
+
+                expect(screen.queryByLabelText(/participant/)).toBe(null);
+
+                act(() => {
+                    call.participants = new Map([alice]);
+                });
+                expect(screen.getByLabelText("1 participant").textContent).toBe("1");
+
+                act(() => {
+                    call.participants = new Map([alice, bob, carol]);
+                });
+                expect(screen.getByLabelText("4 participants").textContent).toBe("4");
+
+                act(() => {
+                    call.participants = new Map();
+                });
+                expect(screen.queryByLabelText(/participant/)).toBe(null);
+            });
+
+            describe("and a live broadcast starts", () => {
+                beforeEach(async () => {
+                    await setUpVoiceBroadcast(VoiceBroadcastInfoState.Started);
+                });
+
+                it("should still render the call subtitle", () => {
+                    expect(screen.queryByText("Video")).toBeInTheDocument();
+                    expect(screen.queryByText("Live")).not.toBeInTheDocument();
+                });
             });
-            expect(screen.queryByLabelText(/participant/)).toBe(null);
         });
 
-        describe("and a live broadcast starts", () => {
+        describe("when a live voice broadcast starts", () => {
             beforeEach(async () => {
                 await setUpVoiceBroadcast(VoiceBroadcastInfoState.Started);
             });
 
-            it("should still render the call subtitle", () => {
-                expect(screen.queryByText("Video")).toBeInTheDocument();
-                expect(screen.queryByText("Live")).not.toBeInTheDocument();
+            it("should render the »Live« subtitle", () => {
+                expect(screen.queryByText("Live")).toBeInTheDocument();
+            });
+
+            describe("and the broadcast stops", () => {
+                beforeEach(async () => {
+                    const stopEvent = mkVoiceBroadcastInfoStateEvent(
+                        room.roomId,
+                        VoiceBroadcastInfoState.Stopped,
+                        client.getSafeUserId(),
+                        client.getDeviceId()!,
+                        voiceBroadcastInfoEvent,
+                    );
+                    await act(async () => {
+                        room.currentState.setStateEvents([stopEvent]);
+                        await flushPromises();
+                    });
+                });
+
+                it("should not render the »Live« subtitle", () => {
+                    expect(screen.queryByText("Live")).not.toBeInTheDocument();
+                });
             });
         });
     });
 
-    describe("when a live voice broadcast starts", () => {
-        beforeEach(async () => {
-            await setUpVoiceBroadcast(VoiceBroadcastInfoState.Started);
+    describe("when message previews are enabled", () => {
+        beforeEach(() => {
+            showMessagePreview = true;
         });
 
-        it("should render the »Live« subtitle", () => {
-            expect(screen.queryByText("Live")).toBeInTheDocument();
+        it("should render a room without a message as expected", async () => {
+            renderRoomTile();
+            // flush promises here because the preview is created asynchronously
+            await flushPromises();
+            expect(renderResult.asFragment()).toMatchSnapshot();
         });
 
-        describe("and the broadcast stops", () => {
-            beforeEach(async () => {
-                const stopEvent = mkVoiceBroadcastInfoStateEvent(
-                    room.roomId,
-                    VoiceBroadcastInfoState.Stopped,
-                    client.getSafeUserId(),
-                    client.getDeviceId()!,
-                    voiceBroadcastInfoEvent,
-                );
-                await act(async () => {
-                    room.currentState.setStateEvents([stopEvent]);
-                    await flushPromises();
-                });
+        describe("and there is a message in the room", () => {
+            beforeEach(() => {
+                addMessageToRoom(23);
             });
 
-            it("should not render the »Live« subtitle", () => {
-                expect(screen.queryByText("Live")).not.toBeInTheDocument();
+            it("should render as expected", async () => {
+                renderRoomTile();
+                expect(await screen.findByText("test message")).toBeInTheDocument();
+                expect(renderResult.asFragment()).toMatchSnapshot();
+            });
+        });
+
+        describe("and there is a message in a thread", () => {
+            beforeEach(() => {
+                addThreadMessageToRoom(23);
+            });
+
+            it("should render as expected", async () => {
+                renderRoomTile();
+                expect(await screen.findByText("test thread reply")).toBeInTheDocument();
+                expect(renderResult.asFragment()).toMatchSnapshot();
+            });
+        });
+
+        describe("and there is a message and a thread without a reply", () => {
+            beforeEach(() => {
+                addMessageToRoom(23);
+
+                // Mock thread reply for tests.
+                jest.spyOn(room, "getThreads").mockReturnValue([
+                    // @ts-ignore
+                    {
+                        lastReply: () => null,
+                        timeline: [],
+                    } as Thread,
+                ]);
+            });
+
+            it("should render the message preview", async () => {
+                renderRoomTile();
+                expect(await screen.findByText("test message")).toBeInTheDocument();
             });
         });
     });

test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap

@@ -1,6 +1,250 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RoomTile should render the room 1`] = `
+exports[`RoomTile when message previews are enabled and there is a message in a thread should render as expected 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="mx_RoomTile_messagePreview_!1:example.org"
+    aria-label="!1:​example.org"
+    aria-selected="false"
+    class="mx_AccessibleButton mx_RoomTile"
+    role="treeitem"
+    tabindex="-1"
+  >
+    <div
+      class="mx_DecoratedRoomAvatar"
+    >
+      <span
+        class="mx_BaseAvatar"
+        role="presentation"
+      >
+        <span
+          aria-hidden="true"
+          class="mx_BaseAvatar_initial"
+          style="font-size: 20.8px; width: 32px; line-height: 32px;"
+        >
+          !
+        </span>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="mx_BaseAvatar_image"
+          data-testid="avatar-img"
+          loading="lazy"
+          src="data:image/png;base64,00"
+          style="width: 32px; height: 32px;"
+        />
+      </span>
+    </div>
+    <div
+      class="mx_RoomTile_titleContainer"
+    >
+      <div
+        class="mx_RoomTile_title mx_RoomTile_titleWithSubtitle"
+        tabindex="-1"
+        title="!1:​example.org"
+      >
+        <span
+          dir="auto"
+        >
+          !1:​example.org
+        </span>
+      </div>
+      <div
+        class="mx_RoomTile_subtitle"
+        id="mx_RoomTile_messagePreview_!1:example.org"
+        title="test thread reply"
+      >
+        <span
+          class="mx_RoomTile_subtitle_text"
+        >
+          test thread reply
+        </span>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="mx_RoomTile_badgeContainer"
+    />
+    <div
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Room options"
+      class="mx_AccessibleButton mx_RoomTile_menuButton"
+      role="button"
+      tabindex="0"
+    />
+    <div
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Notification options"
+      class="mx_AccessibleButton mx_RoomTile_notificationsButton"
+      role="button"
+      tabindex="-1"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RoomTile when message previews are enabled and there is a message in the room should render as expected 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="mx_RoomTile_messagePreview_!1:example.org"
+    aria-label="!1:​example.org"
+    aria-selected="false"
+    class="mx_AccessibleButton mx_RoomTile"
+    role="treeitem"
+    tabindex="-1"
+  >
+    <div
+      class="mx_DecoratedRoomAvatar"
+    >
+      <span
+        class="mx_BaseAvatar"
+        role="presentation"
+      >
+        <span
+          aria-hidden="true"
+          class="mx_BaseAvatar_initial"
+          style="font-size: 20.8px; width: 32px; line-height: 32px;"
+        >
+          !
+        </span>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="mx_BaseAvatar_image"
+          data-testid="avatar-img"
+          loading="lazy"
+          src="data:image/png;base64,00"
+          style="width: 32px; height: 32px;"
+        />
+      </span>
+    </div>
+    <div
+      class="mx_RoomTile_titleContainer"
+    >
+      <div
+        class="mx_RoomTile_title mx_RoomTile_titleWithSubtitle"
+        tabindex="-1"
+        title="!1:​example.org"
+      >
+        <span
+          dir="auto"
+        >
+          !1:​example.org
+        </span>
+      </div>
+      <div
+        class="mx_RoomTile_subtitle"
+        id="mx_RoomTile_messagePreview_!1:example.org"
+        title="test message"
+      >
+        <span
+          class="mx_RoomTile_subtitle_text"
+        >
+          test message
+        </span>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="mx_RoomTile_badgeContainer"
+    />
+    <div
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Room options"
+      class="mx_AccessibleButton mx_RoomTile_menuButton"
+      role="button"
+      tabindex="0"
+    />
+    <div
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Notification options"
+      class="mx_AccessibleButton mx_RoomTile_notificationsButton"
+      role="button"
+      tabindex="-1"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RoomTile when message previews are enabled should render a room without a message as expected 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="mx_RoomTile_messagePreview_!1:example.org"
+    aria-label="!1:​example.org"
+    aria-selected="false"
+    class="mx_AccessibleButton mx_RoomTile"
+    role="treeitem"
+    tabindex="-1"
+  >
+    <div
+      class="mx_DecoratedRoomAvatar"
+    >
+      <span
+        class="mx_BaseAvatar"
+        role="presentation"
+      >
+        <span
+          aria-hidden="true"
+          class="mx_BaseAvatar_initial"
+          style="font-size: 20.8px; width: 32px; line-height: 32px;"
+        >
+          !
+        </span>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="mx_BaseAvatar_image"
+          data-testid="avatar-img"
+          loading="lazy"
+          src="data:image/png;base64,00"
+          style="width: 32px; height: 32px;"
+        />
+      </span>
+    </div>
+    <div
+      class="mx_RoomTile_titleContainer"
+    >
+      <div
+        class="mx_RoomTile_title"
+        tabindex="-1"
+        title="!1:​example.org"
+      >
+        <span
+          dir="auto"
+        >
+          !1:​example.org
+        </span>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="mx_RoomTile_badgeContainer"
+    />
+    <div
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Room options"
+      class="mx_AccessibleButton mx_RoomTile_menuButton"
+      role="button"
+      tabindex="0"
+    />
+    <div
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Notification options"
+      class="mx_AccessibleButton mx_RoomTile_notificationsButton"
+      role="button"
+      tabindex="-1"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RoomTile when message previews are not enabled should render the room 1`] = `
 <div>
   <div
     aria-label="!1:​example.org"