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-11-04 10:32:44 +00:00 · 2026-03-16 09:47:23 +01: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();
+        },
+    );
+});