diff --git a/playwright/e2e/modules/custom-component.spec.ts b/playwright/e2e/modules/custom-component.spec.ts new file mode 100644 index 0000000000..1299e7ff53 --- /dev/null +++ b/playwright/e2e/modules/custom-component.spec.ts @@ -0,0 +1,36 @@ +/* +Copyright 2025 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 { test, expect } from "../../element-web-test"; +test.describe("Custom Component Module", () => { + test.use({ + displayName: "Manny", + config: { + modules: ["/modules/custom-component-module.js"], + }, + page: async ({ page }, use) => { + await page.route("/modules/custom-component-module.js", async (route) => { + await route.fulfill({ path: "playwright/sample-files/custom-component-module.js" }); + }); + await use(page); + }, + room: async ({ page, app, user, bot }, use) => { + const roomId = await app.client.createRoom({ name: 'TestRoom' }); + await use({ roomId }); + }, + }); + test("should replace the render method of a textual event", { tag: "@screenshot" }, async ({ page, room, app }) => { + await app.viewRoomById(room.roomId); + await app.client.sendMessage(room.roomId, 'Simple message'); + await expect(await page.getByText("Simple message")).toMatchScreenshot("custom-component-tile.png"); + }); + test("should render the original content of a textual event conditionally", { tag: "@screenshot" }, async ({ page, room, app }) => { + await app.viewRoomById(room.roomId); + await app.client.sendMessage(room.roomId, 'Do not replace me'); + await expect(await page.getByText("Do not replace me")).toMatchScreenshot("custom-component-tile-original.png"); + }); +}); diff --git a/playwright/sample-files/custom-component-module.js b/playwright/sample-files/custom-component-module.js new file mode 100644 index 0000000000..7ef9299c2d --- /dev/null +++ b/playwright/sample-files/custom-component-module.js @@ -0,0 +1,23 @@ +/* +Copyright 2025 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. +*/ + +export default class CustomComponentModule { + static moduleApiVersion = "^1.0.0"; + constructor(api) { + this.api = api; + this.api.customComponents.register("TextualBody", (props, originalComponent) => { + const body = props.mxEvent.getContent().body; + if (body === "Do not replace me") { + return originalComponent(); + } + return `Custom text for ${body}`; + }) + } + async load() { + + } +} diff --git a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-linux.png b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-linux.png new file mode 100644 index 0000000000..ed626c902a Binary files /dev/null and b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-linux.png differ diff --git a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-original-linux.png b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-original-linux.png new file mode 100644 index 0000000000..45c2279583 Binary files /dev/null and b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-original-linux.png differ