Refactor EventTile using the MVVM pattern - #2 (#33489)

* Improve coverage * Add view model unit tests to improve coverage * Extract initial pure EventTile derived state helpers * Extract EventTile derived state helpers * Extract EventTile class state derivation * Extract EventTile line class derivation * Extract EventTile sender profile state * Extract EventTile avatar member selection * Extract EventTile avatar clickability state * Extract EventTile sender profile mode * Extract EventTile action bar visibility * Extract EventTile timestamp visibility * Extract EventTile timestamp selection * Extract EventTile timestamp display state * Extract ReplyChain timestamp visibility * Extract EventTile footer display state * Fix sonar issue
2026-05-18 05:36:13 +00:00
parent 1922266ba7
commit 7fe8cdafe0
7 changed files with 1011 additions and 153 deletions
@@ -119,4 +119,68 @@ describe("MessageTimestampViewModel", () => {
            href: "https://example.test",
        });
    });
+
+    it("updates the timestamp and received timestamp", () => {
+        const vm = new MessageTimestampViewModel({
+            ts: nowDate.getTime(),
+        });
+
+        vm.setTimestamp(nowDate.getTime() + HOUR_MS);
+        vm.setReceivedTimestamp(nowDate.getTime() + DAY_MS);
+
+        expect(vm.getSnapshot()).toMatchObject({
+            ts: "09:09",
+            tsSentAt: "Fri, Dec 17, 2021, 09:09:00",
+            tsReceivedAt: "Sat, Dec 18, 2021, 08:09:00",
+        });
+    });
+
+    it("updates display options", () => {
+        const vm = new MessageTimestampViewModel({
+            ts: nowDate.getTime(),
+        });
+
+        vm.setDisplayOptions({
+            showTwelveHour: true,
+            showSeconds: true,
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            ts: "8:09:00 AM",
+            tsSentAt: "Fri, Dec 17, 2021, 8:09:00 AM",
+        });
+    });
+
+    it("updates tooltip, href, and handlers", () => {
+        const onClick = jest.fn();
+        const onContextMenu = jest.fn();
+        const vm = new MessageTimestampViewModel({
+            ts: nowDate.getTime(),
+        });
+
+        vm.setTooltipInhibited(true);
+        vm.setHref("https://example.test/event");
+        vm.setHandlers({ onClick, onContextMenu });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            inhibitTooltip: true,
+            href: "https://example.test/event",
+        });
+        expect(vm.onClick).toBe(onClick);
+        expect(vm.onContextMenu).toBe(onContextMenu);
+    });
+
+    it("does not emit an update when props are unchanged", () => {
+        const vm = new MessageTimestampViewModel({
+            ts: nowDate.getTime(),
+            href: "https://example.test/event",
+        });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setTimestamp(nowDate.getTime());
+        vm.setHref("https://example.test/event");
+
+        expect(listener).not.toHaveBeenCalled();
+    });
 });
@@ -16,6 +16,9 @@ import { createTestClient, mkEvent, mkStubRoom } from "../../test-utils";
 import dis from "../../../src/dispatcher/dispatcher";

 jest.mock("../../../src/dispatcher/dispatcher");
+jest.mock("../../../src/customisations/Media", () => ({
+    mediaFromMxc: jest.fn(() => ({ srcHttp: "https://example.org/_matrix/media/reaction.png" })),
+}));

 describe("ReactionsRowButtonViewModel", () => {
    let client: MatrixClient;
@@ -91,6 +94,35 @@ describe("ReactionsRowButtonViewModel", () => {
        expect(getAriaLabel(vm)).toContain("reacted with 👍");
    });

+    it("falls back when no room is available", () => {
+        jest.spyOn(client, "getRoom").mockReturnValue(null);
+
+        const vm = new ReactionsRowButtonViewModel(createProps());
+
+        expect(getAriaLabel(vm)).toBeUndefined();
+        expect(vm.getSnapshot().content).toBe("👍");
+        expect(vm.getSnapshot().count).toBe(2);
+    });
+
+    it("renders custom reaction images with shortcode labels when enabled", () => {
+        const reactionEvent = createReactionEvent("@alice:example.org", "mxc://example.org/reaction");
+        reactionEvent.getContent()["shortcode"] = "party";
+
+        const vm = new ReactionsRowButtonViewModel(
+            createProps({
+                content: "mxc://example.org/reaction",
+                reactionEvents: [reactionEvent],
+                customReactionImagesEnabled: true,
+            }),
+        );
+
+        expect(vm.getSnapshot()).toMatchObject({
+            imageSrc: "https://example.org/_matrix/media/reaction.png",
+            imageAlt: "party",
+        });
+        expect(getAriaLabel(vm)).toContain("reacted with party");
+    });
+
    it("updates selected state with myReactionEvent without touching tooltip props", () => {
        const vm = new ReactionsRowButtonViewModel(createProps());
        const tooltipSetPropsSpy = jest.spyOn(getTooltipVm(vm), "setProps");