From afab6c29dca1d76d7d6ec85b0e1a138cb4fa678e Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Tue, 20 May 2025 13:27:22 +0100 Subject: [PATCH] Add a test for custom modules. --- .../e2e/modules/custom-component.spec.ts | 36 ++++++++++++++++++ .../sample-files/custom-component-module.js | 23 +++++++++++ .../custom-component-tile-linux.png | Bin 0 -> 4128 bytes .../custom-component-tile-original-linux.png | Bin 0 -> 2056 bytes 4 files changed, 59 insertions(+) create mode 100644 playwright/e2e/modules/custom-component.spec.ts create mode 100644 playwright/sample-files/custom-component-module.js create mode 100644 playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-linux.png create mode 100644 playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-original-linux.png 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 0000000000000000000000000000000000000000..ed626c902a1972a8c65cea633abe6f492521b80a GIT binary patch literal 4128 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 mT7(cnD7-Lh5kd%|@cI`t2}ap;;TM1a0000