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"

test/stores/room-list/MessagePreviewStore-test.ts

@@ -14,22 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { mocked } from "jest-mock";
-import { EventType, MatrixEvent, RelationType, Room } from "matrix-js-sdk/src/matrix";
+import { Mocked, mocked } from "jest-mock";
+import { EventTimeline, EventType, MatrixClient, MatrixEvent, RelationType, Room } from "matrix-js-sdk/src/matrix";
 
 import { MessagePreviewStore } from "../../../src/stores/room-list/MessagePreviewStore";
-import { mkEvent, mkMessage, mkStubRoom, setupAsyncStoreWithClient, stubClient } from "../../test-utils";
+import { mkEvent, mkMessage, mkReaction, setupAsyncStoreWithClient, stubClient } from "../../test-utils";
 import { DefaultTagID } from "../../../src/stores/room-list/models";
+import { mkThread } from "../../test-utils/threads";
 
 describe("MessagePreviewStore", () => {
+    let client: Mocked<MatrixClient>;
+    let room: Room;
+    let store: MessagePreviewStore;
+
     async function addEvent(
         store: MessagePreviewStore,
         room: Room,
         event: MatrixEvent,
         fireAction = true,
     ): Promise<void> {
-        room.timeline.push(event);
-        mocked(room.findEventById).mockImplementation((eventId) => room.timeline.find((e) => e.getId() === eventId));
+        room.addLiveEvents([event]);
         if (fireAction) {
             // @ts-ignore private access
             await store.onAction({
@@ -42,15 +46,17 @@ describe("MessagePreviewStore", () => {
         }
     }
 
-    it("should ignore edits for events other than the latest one", async () => {
-        const client = stubClient();
-        const room = mkStubRoom("!roomId:server", "Room", client);
+    beforeEach(async () => {
+        client = mocked(stubClient());
+        room = new Room("!roomId:server", client, client.getSafeUserId());
         mocked(client.getRoom).mockReturnValue(room);
 
-        const store = MessagePreviewStore.testInstance();
+        store = MessagePreviewStore.testInstance();
         await store.start();
         await setupAsyncStoreWithClient(store, client);
+    });
 
+    it("should ignore edits for events other than the latest one", async () => {
         const firstMessage = mkMessage({
             user: "@sender:server",
             event: true,
@@ -59,7 +65,7 @@ describe("MessagePreviewStore", () => {
         });
         await addEvent(store, room, firstMessage, false);
 
-        await expect(store.getPreviewForRoom(room, DefaultTagID.Untagged)).resolves.toMatchInlineSnapshot(
+        expect((await store.getPreviewForRoom(room, DefaultTagID.Untagged))?.text).toMatchInlineSnapshot(
             `"@sender:server: First message"`,
         );
 
@@ -71,7 +77,7 @@ describe("MessagePreviewStore", () => {
         });
         await addEvent(store, room, secondMessage);
 
-        await expect(store.getPreviewForRoom(room, DefaultTagID.Untagged)).resolves.toMatchInlineSnapshot(
+        expect((await store.getPreviewForRoom(room, DefaultTagID.Untagged))?.text).toMatchInlineSnapshot(
             `"@sender:server: Second message"`,
         );
 
@@ -93,7 +99,7 @@ describe("MessagePreviewStore", () => {
         });
         await addEvent(store, room, firstMessageEdit);
 
-        await expect(store.getPreviewForRoom(room, DefaultTagID.Untagged)).resolves.toMatchInlineSnapshot(
+        expect((await store.getPreviewForRoom(room, DefaultTagID.Untagged))?.text).toMatchInlineSnapshot(
             `"@sender:server: Second message"`,
         );
 
@@ -115,21 +121,13 @@ describe("MessagePreviewStore", () => {
         });
         await addEvent(store, room, secondMessageEdit);
 
-        await expect(store.getPreviewForRoom(room, DefaultTagID.Untagged)).resolves.toMatchInlineSnapshot(
+        expect((await store.getPreviewForRoom(room, DefaultTagID.Untagged))?.text).toMatchInlineSnapshot(
             `"@sender:server: Second Message Edit"`,
         );
     });
 
     it("should ignore edits to unknown events", async () => {
-        const client = stubClient();
-        const room = mkStubRoom("!roomId:server", "Room", client);
-        mocked(client.getRoom).mockReturnValue(room);
-
-        const store = MessagePreviewStore.testInstance();
-        await store.start();
-        await setupAsyncStoreWithClient(store, client);
-
-        await expect(store.getPreviewForRoom(room, DefaultTagID.DM)).resolves.toMatchInlineSnapshot(`null`);
+        await expect(store.getPreviewForRoom(room, DefaultTagID.DM)).resolves.toBeNull();
 
         const firstMessage = mkMessage({
             user: "@sender:server",
@@ -139,7 +137,7 @@ describe("MessagePreviewStore", () => {
         });
         await addEvent(store, room, firstMessage, true);
 
-        await expect(store.getPreviewForRoom(room, DefaultTagID.DM)).resolves.toMatchInlineSnapshot(
+        expect((await store.getPreviewForRoom(room, DefaultTagID.DM))?.text).toMatchInlineSnapshot(
             `"@sender:server: First message"`,
         );
 
@@ -161,22 +159,15 @@ describe("MessagePreviewStore", () => {
         });
         await addEvent(store, room, randomEdit);
 
-        await expect(store.getPreviewForRoom(room, DefaultTagID.Untagged)).resolves.toMatchInlineSnapshot(
+        expect((await store.getPreviewForRoom(room, DefaultTagID.Untagged))?.text).toMatchInlineSnapshot(
             `"@sender:server: First message"`,
         );
     });
 
     it("should generate correct preview for message events in DMs", async () => {
-        const client = stubClient();
-        const room = mkStubRoom("!roomId:server", "Room", client);
-        mocked(client.getRoom).mockReturnValue(room);
-        room.currentState.getJoinedMemberCount = jest.fn().mockReturnValue(2);
+        room.getLiveTimeline().getState(EventTimeline.FORWARDS)!.getJoinedMemberCount = jest.fn().mockReturnValue(2);
 
-        const store = MessagePreviewStore.testInstance();
-        await store.start();
-        await setupAsyncStoreWithClient(store, client);
-
-        await expect(store.getPreviewForRoom(room, DefaultTagID.DM)).resolves.toMatchInlineSnapshot(`null`);
+        await expect(store.getPreviewForRoom(room, DefaultTagID.DM)).resolves.toBeNull();
 
         const firstMessage = mkMessage({
             user: "@sender:server",
@@ -186,7 +177,7 @@ describe("MessagePreviewStore", () => {
         });
         await addEvent(store, room, firstMessage);
 
-        await expect(store.getPreviewForRoom(room, DefaultTagID.DM)).resolves.toMatchInlineSnapshot(
+        expect((await store.getPreviewForRoom(room, DefaultTagID.DM))?.text).toMatchInlineSnapshot(
             `"@sender:server: First message"`,
         );
 
@@ -198,8 +189,45 @@ describe("MessagePreviewStore", () => {
         });
         await addEvent(store, room, secondMessage);
 
-        await expect(store.getPreviewForRoom(room, DefaultTagID.DM)).resolves.toMatchInlineSnapshot(
+        expect((await store.getPreviewForRoom(room, DefaultTagID.DM))?.text).toMatchInlineSnapshot(
             `"@sender:server: Second message"`,
         );
     });
+
+    it("should generate the correct preview for a reaction", async () => {
+        const firstMessage = mkMessage({
+            user: "@sender:server",
+            event: true,
+            room: room.roomId,
+            msg: "First message",
+        });
+        await addEvent(store, room, firstMessage);
+
+        const reaction = mkReaction(firstMessage);
+        await addEvent(store, room, reaction);
+
+        const preview = await store.getPreviewForRoom(room, DefaultTagID.Untagged);
+        expect(preview).toBeDefined();
+        expect(preview.isThreadReply).toBe(false);
+        expect(preview.text).toMatchInlineSnapshot(`"@sender:server reacted 🙃 to First message"`);
+    });
+
+    it("should generate the correct preview for a reaction on a thread root", async () => {
+        const { rootEvent, thread } = mkThread({
+            room,
+            client,
+            authorId: client.getSafeUserId(),
+            participantUserIds: [client.getSafeUserId()],
+        });
+        await addEvent(store, room, rootEvent);
+
+        const reaction = mkReaction(rootEvent, { ts: 42 });
+        reaction.setThread(thread);
+        await addEvent(store, room, reaction);
+
+        const preview = await store.getPreviewForRoom(room, DefaultTagID.Untagged);
+        expect(preview).toBeDefined();
+        expect(preview.isThreadReply).toBe(false);
+        expect(preview.text).toContain("You reacted 🙃 to root event message");
+    });
 });

test/test-utils/test-utils.ts

@@ -36,6 +36,7 @@ import {
     ConditionKind,
     PushRuleActionName,
     IPushRules,
+    RelationType,
 } from "matrix-js-sdk/src/matrix";
 import { normalize } from "matrix-js-sdk/src/utils";
 import { ReEmitter } from "matrix-js-sdk/src/ReEmitter";
@@ -471,6 +472,29 @@ export type MessageEventProps = MakeEventPassThruProps & {
     msg?: string;
 };
 
+/**
+ * Creates a "🙃" reaction for the given event.
+ * Uses the same room and user as for the event.
+ *
+ * @returns The reaction event
+ */
+export const mkReaction = (event: MatrixEvent, opts: Partial<MakeEventProps> = {}): MatrixEvent => {
+    return mkEvent({
+        event: true,
+        room: event.getRoomId(),
+        type: EventType.Reaction,
+        user: event.getSender()!,
+        content: {
+            "m.relates_to": {
+                rel_type: RelationType.Annotation,
+                event_id: event.getId(),
+                key: "🙃",
+            },
+        },
+        ...opts,
+    });
+};
+
 /**
  * Create an m.room.message event.
  * @param {Object} opts Values for the message

test/test-utils/threads.ts

@@ -135,6 +135,11 @@ export const mkThread = ({
     }
 
     const thread = room.createThread(rootEvent.getId()!, rootEvent, events, true);
+
+    events.forEach((event) => {
+        thread.timeline.push(event);
+    });
+
     // So that we do not have to mock the thread loading
     thread.initialEventsFetched = true;