Refactor MFileBody using MVVM and move to shared-components (#32730)

* Refactor MFileBody using MVVM and move to shared component * Simplyfing rendering properties * Create a first version of view model for the component * Simplifying component properties and make it possible to override module css using data-* attributes * Create a MBodyFactory in element-web and use it to render MFileBodyView from MessageEvent * Use <MediaBody instead of <button to support legacy rendering * Updated styling and comments * Refactoring className from snapshot to component property * Rename MFileBody* to FileBody* * Rename MFileBody* to FileBody* * Refactoring render branches to allow for displaying nothing * Fix styling issues * Fix lint errors * Fix for css selectors in playwright tests * Remove the MFileBody component and change all callers to use MBodyFactory:FileBodyView * Remove unused strings in element-web * Revert to render text in story iframes * Fix for prettier error * Fix playwright test css selectors * Apply legacy styling in element-web * Add legacy styling for mx_MFileBody * Restore file * Change from <div to <button * Calculate span width ad update screenshots * Remove width calculation and update snapshots * Fix for letter-spacing and better content in story * Updated playwright screenshots * Updated snapshots * Fixing Sonar errors/warnings * Removed extra parentheses * Changes after review * Change border-radius to px and updated snapshots * Fix typo in description * And another typo fix * Changes after review
2026-03-16 08:47:23 +00:00
parent 394356c4df
commit d791e3fe8a
46 changed files with 2316 additions and 695 deletions
@@ -0,0 +1,151 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { render } from "jest-matrix-react";
+import { EventType, getHttpUriForMxc, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+
+import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
+import {
+    getMockClientWithEventEmitter,
+    mockClientMethodsCrypto,
+    mockClientMethodsDevice,
+    mockClientMethodsServer,
+    mockClientMethodsUser,
+} from "../../../../test-utils";
+import { MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
+import SettingsStore from "../../../../../src/settings/SettingsStore";
+import { FileBodyViewFactory, renderMBody } from "../../../../../src/components/views/messages/MBodyFactory";
+import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext.ts";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
+
+jest.mock("matrix-encrypt-attachment", () => ({
+    decryptAttachment: jest.fn(),
+}));
+
+describe("MBodyFactory", () => {
+    const userId = "@user:server";
+    const deviceId = "DEADB33F";
+    const cli = getMockClientWithEventEmitter({
+        ...mockClientMethodsUser(userId),
+        ...mockClientMethodsServer(),
+        ...mockClientMethodsDevice(deviceId),
+        ...mockClientMethodsCrypto(),
+        getRooms: jest.fn().mockReturnValue([]),
+        getIgnoredUsers: jest.fn(),
+        getVersions: jest.fn().mockResolvedValue({
+            unstable_features: {
+                "org.matrix.msc3882": true,
+                "org.matrix.msc3886": true,
+            },
+        }),
+    });
+    // eslint-disable-next-line no-restricted-properties
+    cli.mxcUrlToHttp.mockImplementation(
+        (mxcUrl: string, width?: number, height?: number, resizeMethod?: string, allowDirectLinks?: boolean) => {
+            return getHttpUriForMxc("https://server", mxcUrl, width, height, resizeMethod, allowDirectLinks);
+        },
+    );
+
+    const props = {
+        onMessageAllowed: jest.fn(),
+        permalinkCreator: new RoomPermalinkCreator(new Room("!room:server", cli, cli.getUserId()!)),
+    };
+    const mkEvent = (msgtype?: string): MatrixEvent =>
+        new MatrixEvent({
+            room_id: "!room:server",
+            sender: userId,
+            type: EventType.RoomMessage,
+            content: {
+                body: "alt",
+                ...(msgtype ? { msgtype } : {}),
+                url: "mxc://server/file",
+            },
+        });
+
+    beforeEach(() => {
+        jest.spyOn(SettingsStore, "getValue").mockRestore();
+    });
+
+    describe("renderMBody", () => {
+        it("renders download button for m.file in file rendering type", () => {
+            const mediaEvent = mkEvent("m.file");
+
+            const { container, getByRole } = render(
+                <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.File } as any)}>
+                    {renderMBody({
+                        ...props,
+                        mxEvent: mediaEvent,
+                        mediaEventHelper: new MediaEventHelper(mediaEvent),
+                        showFileInfo: false,
+                    })}
+                </ScopedRoomContextProvider>,
+            );
+
+            expect(getByRole("link", { name: "Download" })).toBeInTheDocument();
+            expect(container).toMatchSnapshot();
+        });
+
+        it.each(["m.audio", "m.video", "m.text"])("returns null for unsupported msgtype %s", (msgtype) => {
+            expect(renderMBody({ ...props, mxEvent: mkEvent(msgtype) })).toBeNull();
+        });
+
+        it("returns null when msgtype is missing", () => {
+            expect(renderMBody({ ...props, mxEvent: mkEvent() })).toBeNull();
+        });
+
+        it("falls back to file body for unsupported msgtypes", () => {
+            const mediaEvent = mkEvent("m.audio");
+            const { getByRole } = render(
+                <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.File } as any)}>
+                    {renderMBody(
+                        {
+                            ...props,
+                            mxEvent: mediaEvent,
+                            mediaEventHelper: new MediaEventHelper(mediaEvent),
+                        },
+                        FileBodyViewFactory,
+                    )}
+                </ScopedRoomContextProvider>,
+            );
+            expect(getByRole("button", { name: "alt" })).toBeInTheDocument();
+        });
+    });
+
+    it.each(["m.file", "m.audio", "m.video"])(
+        "renderMBody fallback shows %s generic placeholder when showFileInfo is true",
+        async (msgtype) => {
+            const mediaEvent = new MatrixEvent({
+                room_id: "!room:server",
+                sender: userId,
+                type: EventType.RoomMessage,
+                content: {
+                    body: "alt",
+                    msgtype,
+                    url: "mxc://server/image",
+                },
+            });
+
+            const { container, getByRole } = render(
+                <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.File } as any)}>
+                    {renderMBody(
+                        {
+                            ...props,
+                            mxEvent: mediaEvent,
+                            mediaEventHelper: new MediaEventHelper(mediaEvent),
+                            showFileInfo: true,
+                        },
+                        FileBodyViewFactory,
+                    )}
+                </ScopedRoomContextProvider>,
+            );
+
+            expect(getByRole("button", { name: "alt" })).toBeInTheDocument();
+            expect(container).toMatchSnapshot();
+        },
+    );
+});
@@ -1,115 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import { render } from "jest-matrix-react";
-import { EventType, getHttpUriForMxc, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
-
-import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
-import {
-    getMockClientWithEventEmitter,
-    mockClientMethodsCrypto,
-    mockClientMethodsDevice,
-    mockClientMethodsServer,
-    mockClientMethodsUser,
-} from "../../../../test-utils";
-import { MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
-import SettingsStore from "../../../../../src/settings/SettingsStore";
-import MFileBody from "../../../../../src/components/views/messages/MFileBody.tsx";
-import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext.ts";
-import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
-
-jest.mock("matrix-encrypt-attachment", () => ({
-    decryptAttachment: jest.fn(),
-}));
-
-describe("<MFileBody/>", () => {
-    const userId = "@user:server";
-    const deviceId = "DEADB33F";
-    const cli = getMockClientWithEventEmitter({
-        ...mockClientMethodsUser(userId),
-        ...mockClientMethodsServer(),
-        ...mockClientMethodsDevice(deviceId),
-        ...mockClientMethodsCrypto(),
-        getRooms: jest.fn().mockReturnValue([]),
-        getIgnoredUsers: jest.fn(),
-        getVersions: jest.fn().mockResolvedValue({
-            unstable_features: {
-                "org.matrix.msc3882": true,
-                "org.matrix.msc3886": true,
-            },
-        }),
-    });
-    // eslint-disable-next-line no-restricted-properties
-    cli.mxcUrlToHttp.mockImplementation(
-        (mxcUrl: string, width?: number, height?: number, resizeMethod?: string, allowDirectLinks?: boolean) => {
-            return getHttpUriForMxc("https://server", mxcUrl, width, height, resizeMethod, allowDirectLinks);
-        },
-    );
-    const mediaEvent = new MatrixEvent({
-        room_id: "!room:server",
-        sender: userId,
-        type: EventType.RoomMessage,
-        content: {
-            body: "alt for a image",
-            msgtype: "m.image",
-            url: "mxc://server/image",
-        },
-    });
-
-    const props = {
-        onMessageAllowed: jest.fn(),
-        permalinkCreator: new RoomPermalinkCreator(new Room(mediaEvent.getRoomId()!, cli, cli.getUserId()!)),
-    };
-
-    beforeEach(() => {
-        jest.spyOn(SettingsStore, "getValue").mockRestore();
-    });
-
-    it("should show a download button in file rendering type", async () => {
-        const { container, getByRole } = render(
-            <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.File } as any)}>
-                <MFileBody
-                    {...props}
-                    mxEvent={mediaEvent}
-                    mediaEventHelper={new MediaEventHelper(mediaEvent)}
-                    showGenericPlaceholder={false}
-                />
-            </ScopedRoomContextProvider>,
-        );
-
-        expect(getByRole("link", { name: "Download" })).toBeInTheDocument();
-        expect(container).toMatchSnapshot();
-    });
-
-    it.each(["m.file", "m.audio", "m.video"])("should show %s generic placeholder", async (msgtype) => {
-        const mediaEvent = new MatrixEvent({
-            room_id: "!room:server",
-            sender: userId,
-            type: EventType.RoomMessage,
-            content: {
-                body: "alt",
-                msgtype,
-                url: "mxc://server/image",
-            },
-        });
-
-        const { container, getByRole } = render(
-            <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.File } as any)}>
-                <MFileBody
-                    {...props}
-                    mxEvent={mediaEvent}
-                    mediaEventHelper={new MediaEventHelper(mediaEvent)}
-                    showGenericPlaceholder={true}
-                />
-            </ScopedRoomContextProvider>,
-        );
-
-        expect(getByRole("button", { name: "alt" })).toBeInTheDocument();
-        expect(container).toMatchSnapshot();
-    });
-});
@@ -33,9 +33,10 @@ jest.mock("../../../../../src/components/views/messages/MVideoBody", () => ({
    default: () => <div data-testid="video-body" />,
 }));

-jest.mock("../../../../../src/components/views/messages/MFileBody", () => ({
+jest.mock("../../../../../src/components/views/messages/MBodyFactory", () => ({
    __esModule: true,
-    default: () => <div data-testid="file-body" />,
+    FileBodyViewFactory: () => <div data-testid="file-body" />,
+    renderMBody: () => <div data-testid="file-body" />,
 }));

 jest.mock("../../../../../src/components/views/messages/MImageReplyBody", () => ({
@@ -1,17 +1,135 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

-exports[`<MFileBody/> should show a download button in file rendering type 1`] = `
+exports[`MBodyFactory renderMBody fallback shows m.audio generic placeholder when showFileInfo is true 1`] = `
 <div>
  <span
-    class="mx_MFileBody"
+    class="_content_f1s5h_8 mx_MFileBody"
  >
    <div
-      class="mx_MFileBody_download"
+      class="mx_MediaBody _mediaBody_rgndh_8"
+      data-type="info"
+    >
+      <button
+        aria-label="alt"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3 14v-4a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2m11.122-5.536a1 1 0 0 1 1.414 0A5 5 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.536a1 1 0 0 1-1.415-1.415 3 3 0 0 0 .88-2.121c0-.829-.335-1.577-.88-2.121a1 1 0 0 1 0-1.415"
+          />
+          <path
+            d="M16.95 5.636a1 1 0 0 1 1.414 0A8.98 8.98 0 0 1 21 12a8.98 8.98 0 0 1-2.636 6.364 1 1 0 0 1-1.414-1.414A6.98 6.98 0 0 0 19 12a6.98 6.98 0 0 0-2.05-4.95 1 1 0 0 1 0-1.414"
+          />
+        </svg>
+        <span>
+          alt
+        </span>
+      </button>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`MBodyFactory renderMBody fallback shows m.file generic placeholder when showFileInfo is true 1`] = `
+<div>
+  <span
+    class="_content_f1s5h_8 mx_MFileBody"
+  >
+    <div
+      class="mx_MediaBody _mediaBody_rgndh_8"
+      data-type="info"
+    >
+      <button
+        aria-label="alt"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+          />
+        </svg>
+        <span>
+          alt
+        </span>
+      </button>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`MBodyFactory renderMBody fallback shows m.video generic placeholder when showFileInfo is true 1`] = `
+<div>
+  <span
+    class="_content_f1s5h_8 mx_MFileBody"
+  >
+    <div
+      class="mx_MediaBody _mediaBody_rgndh_8"
+      data-type="info"
+    >
+      <button
+        aria-label="alt"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+          />
+        </svg>
+        <span>
+          alt
+        </span>
+      </button>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`MBodyFactory renderMBody renders download button for m.file in file rendering type 1`] = `
+<div>
+  <span
+    class="_content_f1s5h_8 mx_MFileBody"
+  >
+    <div
+      data-type="download"
    >
      <a
        class="_button_13vu4_8 _has-icon_13vu4_60"
        data-kind="secondary"
        data-size="sm"
+        href="https://server/_matrix/media/v3/download/server/file"
        rel="noreferrer noopener"
        role="link"
        tabindex="0"
@@ -35,126 +153,3 @@ exports[`<MFileBody/> should show a download button in file rendering type 1`] =
  </span>
 </div>
 `;
-
-exports[`<MFileBody/> should show m.audio generic placeholder 1`] = `
-<div>
-  <span
-    class="mx_MFileBody"
-  >
-    <div
-      class="mx_AccessibleButton mx_MediaBody mx_MFileBody_info"
-      role="button"
-      tabindex="0"
-    >
-      <span
-        class="mx_MFileBody_info_icon"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M3 14v-4a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2m11.122-5.536a1 1 0 0 1 1.414 0A5 5 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.536a1 1 0 0 1-1.415-1.415 3 3 0 0 0 .88-2.121c0-.829-.335-1.577-.88-2.121a1 1 0 0 1 0-1.415"
-          />
-          <path
-            d="M16.95 5.636a1 1 0 0 1 1.414 0A8.98 8.98 0 0 1 21 12a8.98 8.98 0 0 1-2.636 6.364 1 1 0 0 1-1.414-1.414A6.98 6.98 0 0 0 19 12a6.98 6.98 0 0 0-2.05-4.95 1 1 0 0 1 0-1.414"
-          />
-        </svg>
-      </span>
-      <span
-        aria-labelledby="_r_6_"
-        tabindex="0"
-      >
-        <span
-          class="mx_MFileBody_info_filename"
-        >
-          alt
-        </span>
-      </span>
-    </div>
-  </span>
-</div>
-`;
-
-exports[`<MFileBody/> should show m.file generic placeholder 1`] = `
-<div>
-  <span
-    class="mx_MFileBody"
-  >
-    <div
-      class="mx_AccessibleButton mx_MediaBody mx_MFileBody_info"
-      role="button"
-      tabindex="0"
-    >
-      <span
-        class="mx_MFileBody_info_icon"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
-          />
-        </svg>
-      </span>
-      <span
-        aria-labelledby="_r_0_"
-        tabindex="0"
-      >
-        <span
-          class="mx_MFileBody_info_filename"
-        >
-          alt
-        </span>
-      </span>
-    </div>
-  </span>
-</div>
-`;
-
-exports[`<MFileBody/> should show m.video generic placeholder 1`] = `
-<div>
-  <span
-    class="mx_MFileBody"
-  >
-    <div
-      class="mx_AccessibleButton mx_MediaBody mx_MFileBody_info"
-      role="button"
-      tabindex="0"
-    >
-      <span
-        class="mx_MFileBody_info_icon"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
-          />
-        </svg>
-      </span>
-      <span
-        aria-labelledby="_r_c_"
-        tabindex="0"
-      >
-        <span
-          class="mx_MFileBody_info_filename"
-        >
-          alt
-        </span>
-      </span>
-    </div>
-  </span>
-</div>
-`;
@@ -300,38 +300,36 @@ exports[`<MImageBody/> should open ImageView using thumbnail for encrypted svg 1
 exports[`<MImageBody/> should render MFileBody for svg with no thumbnail 1`] = `
 <DocumentFragment>
  <span
-    class="mx_MFileBody"
+    class="_content_f1s5h_8 mx_MFileBody"
  >
    <div
-      class="mx_AccessibleButton mx_MediaBody mx_MFileBody_info"
-      role="button"
-      tabindex="0"
+      class="mx_MediaBody _mediaBody_rgndh_8"
+      data-type="info"
    >
-      <span
-        class="mx_MFileBody_info_icon"
+      <button
+        aria-label="Attachment"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
      >
        <svg
+          aria-hidden="true"
          fill="currentColor"
-          height="1em"
+          height="20"
          viewBox="0 0 24 24"
-          width="1em"
+          width="20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
          />
        </svg>
-      </span>
-      <span
-        aria-labelledby="_r_0_"
-        tabindex="0"
-      >
-        <span
-          class="mx_MFileBody_info_filename"
-        >
+        <span>
          Attachment
        </span>
-      </span>
+      </button>
    </div>
  </span>
 </DocumentFragment>
@@ -238,7 +238,7 @@ describe("export", function () {

    it("checks if the icons' html corresponds to export regex", function () {
        const exporter = new HTMLExporter(mockRoom, ExportType.Beginning, mockExportOptions, setProgressText);
-        const fileRegex = /<span class="mx_MFileBody_info_icon">.*?<\/span>/;
+        const fileRegex = /<span class="[^"]*\bmx_MFileBody\b[^"]*">.*?<\/span>/;
        expect(fileRegex.test(renderToString(exporter.getEventTile(mkFileEvent(), true)))).toBeTruthy();
    });

@@ -0,0 +1,306 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
+import { createRef, type RefObject } from "react";
+import { FileBodyViewInfoIcon, FileBodyViewState } from "@element-hq/web-shared-components";
+
+import Modal from "../../../src/Modal";
+import { TimelineRenderingType } from "../../../src/contexts/RoomContext";
+import { type MediaEventHelper } from "../../../src/utils/MediaEventHelper";
+import { FileBodyViewModel } from "../../../src/viewmodels/message-body/FileBodyViewModel";
+import ErrorDialog from "../../../src/components/views/dialogs/ErrorDialog";
+
+const mockDownload = jest.fn();
+
+jest.mock("../../../src/utils/FileDownloader", () => ({
+    FileDownloader: jest.fn().mockImplementation(() => ({
+        download: mockDownload,
+    })),
+}));
+
+jest.mock("../../../src/customisations/Media", () => ({
+    mediaFromContent: jest.fn((content: { file?: unknown; url?: string }) => ({
+        isEncrypted: !!content.file,
+        srcHttp: content.url ?? null,
+    })),
+}));
+
+describe("FileBodyViewModel", () => {
+    const mkMediaEvent = (
+        content: Partial<{ body: string; msgtype: string; url: string; file: Record<string, unknown> }>,
+    ): MatrixEvent =>
+        new MatrixEvent({
+            room_id: "!room:server",
+            sender: "@user:server",
+            type: EventType.RoomMessage,
+            content: {
+                body: "alt",
+                msgtype: "m.file",
+                url: "https://server/file",
+                ...content,
+            },
+        });
+
+    const mkMediaEventHelper = ({
+        encrypted,
+        blob = new Blob(["content"], { type: "text/plain" }),
+        fileName = "file.txt",
+    }: {
+        encrypted: boolean;
+        blob?: Blob;
+        fileName?: string;
+    }): MediaEventHelper =>
+        ({
+            media: { isEncrypted: encrypted },
+            sourceBlob: { value: Promise.resolve(blob) },
+            fileName,
+        }) as unknown as MediaEventHelper;
+
+    const createVm = (overrides: Partial<ConstructorParameters<typeof FileBodyViewModel>[0]> = {}): FileBodyViewModel =>
+        new FileBodyViewModel({
+            mxEvent: mkMediaEvent({}),
+            mediaEventHelper: mkMediaEventHelper({ encrypted: false }),
+            showFileInfo: false,
+            forExport: false,
+            timelineRenderingType: TimelineRenderingType.File,
+            refIFrame: createRef<HTMLIFrameElement>() as RefObject<HTMLIFrameElement>,
+            refLink: createRef<HTMLAnchorElement>() as RefObject<HTMLAnchorElement>,
+            ...overrides,
+        });
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("shows unencrypted download snapshot in file rendering type", () => {
+        const vm = createVm();
+        expect(vm.getSnapshot()).toMatchObject({
+            state: FileBodyViewState.UNENCRYPTED,
+            showInfo: false,
+            showDownload: true,
+            downloadHref: "https://server/file",
+        });
+    });
+
+    it.each([
+        { msgtype: "m.file", expectedIcon: FileBodyViewInfoIcon.ATTACHMENT },
+        { msgtype: "m.audio", expectedIcon: FileBodyViewInfoIcon.AUDIO },
+        { msgtype: "m.video", expectedIcon: FileBodyViewInfoIcon.VIDEO },
+    ])("shows generic placeholder info for $msgtype", ({ msgtype, expectedIcon }) => {
+        const vm = createVm({
+            mxEvent: mkMediaEvent({ msgtype }),
+            showFileInfo: true,
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: FileBodyViewState.UNENCRYPTED,
+            showInfo: true,
+            infoLabel: "alt",
+            infoIcon: expectedIcon,
+            showDownload: false,
+        });
+    });
+
+    it("shows export snapshot with export href", () => {
+        const vm = createVm({
+            forExport: true,
+            showFileInfo: true,
+            mxEvent: mkMediaEvent({ url: "https://server/export-file" }),
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: FileBodyViewState.EXPORT,
+            showInfo: true,
+            infoLabel: "alt",
+            infoHref: "https://server/export-file",
+        });
+    });
+
+    it("downloads unencrypted placeholder content on info click", async () => {
+        const blob = new Blob(["placeholder"], { type: "text/plain" });
+        const vm = createVm({
+            showFileInfo: true,
+            mediaEventHelper: mkMediaEventHelper({ encrypted: false, blob, fileName: "placeholder.txt" }),
+        });
+
+        await vm.onInfoClick();
+
+        expect(mockDownload).toHaveBeenCalledWith({
+            blob,
+            name: "placeholder.txt",
+        });
+    });
+
+    it("decrypts encrypted content and downloads on iframe load", async () => {
+        const blob = new Blob(["encrypted"], { type: "application/octet-stream" });
+        const vm = createVm({
+            mediaEventHelper: mkMediaEventHelper({ encrypted: true, blob, fileName: "encrypted.bin" }),
+            mxEvent: mkMediaEvent({ file: { url: "mxc://server/file" } }),
+        });
+
+        await vm.onDownloadClick();
+
+        expect(vm.getSnapshot().state).toBe(FileBodyViewState.ENCRYPTED);
+
+        vm.onDownloadIframeLoad();
+
+        expect(mockDownload).toHaveBeenCalledWith(
+            expect.objectContaining({
+                blob,
+                name: "encrypted.bin",
+                autoDownload: true,
+                opts: expect.objectContaining({
+                    textContent: expect.any(String),
+                }),
+            }),
+        );
+    });
+
+    it("downloads unencrypted source as blob in onDownloadLinkClick", async () => {
+        const blob = new Blob(["direct-download"], { type: "text/plain" });
+        const vm = createVm({
+            mediaEventHelper: mkMediaEventHelper({ encrypted: false, blob, fileName: "direct.txt" }),
+            mxEvent: mkMediaEvent({ msgtype: "m.file", url: "https://server/direct.txt" }),
+        });
+
+        const click = jest.spyOn(HTMLAnchorElement.prototype, "click");
+        const event = {
+            preventDefault: jest.fn(),
+            stopPropagation: jest.fn(),
+        } as any;
+
+        vm.onDownloadLinkClick(event);
+        await Promise.resolve();
+
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(event.stopPropagation).toHaveBeenCalled();
+        expect(URL.createObjectURL).toHaveBeenCalledWith(blob);
+        expect(click).toHaveBeenCalled();
+    });
+
+    it("shows decrypt error dialog when decrypt fails", async () => {
+        const vm = createVm({
+            mediaEventHelper: {
+                media: { isEncrypted: true },
+                sourceBlob: { value: Promise.reject(new Error("decrypt failed")) },
+                fileName: "broken.bin",
+            } as unknown as MediaEventHelper,
+            mxEvent: mkMediaEvent({ file: { url: "mxc://server/file" } }),
+        });
+        const warnSpy = jest.spyOn(logger, "warn").mockImplementation(() => {});
+        const dialogSpy = jest.spyOn(Modal, "createDialog").mockReturnValue({ close: jest.fn() } as any);
+
+        await vm.onDownloadClick();
+
+        expect(warnSpy).toHaveBeenCalled();
+        expect(dialogSpy).toHaveBeenCalledWith(
+            ErrorDialog,
+            expect.objectContaining({
+                title: "Error",
+                description: expect.stringMatching(/decrypt/i),
+            }),
+        );
+        expect(vm.getSnapshot().state).toBe(FileBodyViewState.DECRYPTION_PENDING);
+    });
+
+    it("resets decrypted state when mxEvent changes", async () => {
+        const vm = createVm({
+            mediaEventHelper: mkMediaEventHelper({ encrypted: true }),
+            mxEvent: mkMediaEvent({ file: { url: "mxc://server/file-a" } }),
+        });
+
+        await vm.onDownloadClick();
+        expect(vm.getSnapshot().state).toBe(FileBodyViewState.ENCRYPTED);
+
+        vm.setProps({
+            mxEvent: mkMediaEvent({ body: "new", file: { url: "mxc://server/file-b" } }),
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: FileBodyViewState.DECRYPTION_PENDING,
+        });
+    });
+
+    it("keeps decrypted state when non-event props change", async () => {
+        const vm = createVm({
+            mediaEventHelper: mkMediaEventHelper({ encrypted: true }),
+            mxEvent: mkMediaEvent({ file: { url: "mxc://server/file-a" } }),
+        });
+
+        await vm.onDownloadClick();
+        expect(vm.getSnapshot().state).toBe(FileBodyViewState.ENCRYPTED);
+
+        vm.setProps({
+            timelineRenderingType: TimelineRenderingType.Thread,
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: FileBodyViewState.ENCRYPTED,
+            showDownload: false,
+        });
+    });
+
+    it("uses filename-like downloadTitle in encrypted mode when showFileInfo is false", () => {
+        const vm = createVm({
+            showFileInfo: false,
+            mediaEventHelper: mkMediaEventHelper({ encrypted: true }),
+            mxEvent: mkMediaEvent({ body: "my-file.pdf", file: { url: "mxc://server/file" } }),
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: FileBodyViewState.DECRYPTION_PENDING,
+            downloadTitle: "my-file.pdf",
+        });
+    });
+
+    it("hides download in thread rendering even when showFileInfo is false", () => {
+        const vm = createVm({
+            showFileInfo: false,
+            timelineRenderingType: TimelineRenderingType.Thread,
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: FileBodyViewState.UNENCRYPTED,
+            showDownload: false,
+        });
+    });
+
+    it("returns INVALID snapshot when content URL is missing", () => {
+        const vm = createVm({
+            mxEvent: mkMediaEvent({ url: undefined }),
+            showFileInfo: true,
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: FileBodyViewState.INVALID,
+            showInfo: true,
+            infoLabel: "alt",
+            infoIcon: FileBodyViewInfoIcon.ATTACHMENT,
+        });
+    });
+
+    it("does not download on info click when showFileInfo is false", async () => {
+        const vm = createVm({ showFileInfo: false });
+
+        await vm.onInfoClick();
+
+        expect(mockDownload).not.toHaveBeenCalled();
+    });
+
+    it("keeps unencrypted snapshot when download is clicked without mediaEventHelper", async () => {
+        const vm = createVm({
+            mediaEventHelper: undefined,
+            mxEvent: mkMediaEvent({ file: { url: "mxc://server/file" } }),
+        });
+
+        await vm.onDownloadClick();
+
+        expect(vm.getSnapshot().state).toBe(FileBodyViewState.UNENCRYPTED);
+    });
+});