Migrate Element Web guest module to Element Web version 1.11.84 or la…

…ter (#183) * Migrate Element Web guest module to Element Web version 1.11.84 or later Signed-off-by: Michael Weimann <michael.weimann@nordeck.net> * Update e2e image to Element Web 1.11.84 Signed-off-by: Michael Weimann <michael.weimann@nordeck.net> * Make e2e tests run with Podman Signed-off-by: Michael Weimann <michael.weimann@nordeck.net> --------- Signed-off-by: Michael Weimann <michael.weimann@nordeck.net>
nordeck · Nov 15, 2024 · 374bc3f · 374bc3f
1 parent 135f094
commit 374bc3f
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 24 deletions.
diff --git a/.changeset/yellow-paws-jump.md b/.changeset/yellow-paws-jump.md
@@ -0,0 +1,9 @@
+---
+'@nordeck/element-web-guest-module': major
+---
+
+Makes the Element Web guest module work with Element 1.11.84 or later.
+
+Element Web included the matrix-react-sdk into Element Web with release 1.11.84.
+With this release of Element Web guest modules Element Web 1.11.84 or later is required.
+If you want to use a previous version of Element Web also use a previous version of the guest module.
diff --git a/e2e/README.md b/e2e/README.md
@@ -6,7 +6,9 @@ End-to-end tests for the components in this repository.
 
 ### Prerequisites
 
-Running the e2e tests requires Docker to be installed.
+Running the e2e tests requires Docker or Podman to be installed.
+
+If using Podman be sure to [set up the `DOCKER_HOST` environment variable](https://node.testcontainers.org/supported-container-runtimes/).
 
 ### Running Tests
 

diff --git a/e2e/src/deploy/elementWeb/Dockerfile b/e2e/src/deploy/elementWeb/Dockerfile
@@ -1,6 +1,6 @@
 FROM node:20-bullseye as builder
 
-ARG ELEMENT_VERSION="v1.11.50"
+ARG ELEMENT_VERSION="v1.11.84"
 
 WORKDIR /src
 

diff --git a/e2e/src/deploy/elementWeb/config.json b/e2e/src/deploy/elementWeb/config.json
@@ -21,7 +21,8 @@
   "default_country_code": "GB",
   "show_labs_settings": false,
   "features": {
-    "feature_ask_to_join": true
+    "feature_ask_to_join": true,
+    "feature_release_announcement": false
   },
   "default_federate": true,
   "default_theme": "light",

diff --git a/e2e/src/deploy/elementWeb/index.ts b/e2e/src/deploy/elementWeb/index.ts
@@ -22,7 +22,7 @@ let container: StartedTestContainer | undefined;
 export async function startElementWeb({
   homeserverUrl,
   widgetServerUrl,
-  version = 'v1.11.50',
+  version = 'v1.11.84',
 }: {
   homeserverUrl: string;
   widgetServerUrl: string;

diff --git a/e2e/src/deploy/synapse/index.ts b/e2e/src/deploy/synapse/index.ts
@@ -91,7 +91,9 @@ export async function startSynapse({
   const synapseUrl = `http://${container.getHost()}:${container.getMappedPort(
     8008,
   )}`;
-  const synapseHostUrl = `http://${container.getIpAddress('bridge')}:8008`;
+
+  const ipAddress = getIpAddress(container);
+  const synapseHostUrl = `http://${ipAddress}:8008`;
 
   await container.copyContentToContainer([
     {
@@ -144,3 +146,15 @@ async function loadModuleToTmp(containerImage: string): Promise<string> {
 
   return modulesFolder;
 }
+
+function getIpAddress(container: StartedTestContainer): string {
+  try {
+    // First try to return the Docker IP address
+    return container.getIpAddress('bridge');
+  } catch {
+    // Ignore
+  }
+
+  // Try the Podman IP address otherwise
+  return container.getIpAddress('podman');
+}
diff --git a/...t-dialog-should-not-have-automatically-detectable-accessibility-violations-1-chromium.txt b/...t-dialog-should-not-have-automatically-detectable-accessibility-violations-1-chromium.txt
@@ -1,14 +1,20 @@
 [
   {
-    "rule": "color-contrast",
-    "description": "Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+    "rule": "color-contrast-enhanced",
+    "description": "Ensures the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds",
     "targets": [
       {
         "target": [
           ".mx_RoomSearch_spotlightTriggerText"
         ],
-        "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.5 (foreground color: #6c737e, background color: #d8dde4, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
-      },
+        "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 6.5 (foreground color: #474a51, background color: #d8dde4, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1"
+      }
+    ]
+  },
+  {
+    "rule": "color-contrast",
+    "description": "Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+    "targets": [
       {
         "target": [
           "kbd"

diff --git a/e2e/src/pages/elementWebPage.ts b/e2e/src/pages/elementWebPage.ts
@@ -31,8 +31,8 @@ export class ElementWebPage {
   private readonly startChatButton: Locator;
 
   constructor(private readonly page: Page) {
-    this.navigationRegion = page.getByRole('navigation');
-    this.mainRegion = page.getByRole('main');
+    this.navigationRegion = page.locator('.mx_LeftPanel_wrapper');
+    this.mainRegion = page.locator('.mx_RoomView_wrapper');
     this.headerRegion = this.mainRegion.locator('header');
     this.sendMessageTextbox = page.getByRole('textbox', { name: /message…/ });
     this.roomNameText = this.headerRegion.getByRole('heading');
@@ -140,7 +140,10 @@ export class ElementWebPage {
   }
 
   async toggleRoomInfo() {
-    await this.headerRegion.getByRole('button', { name: 'Room info' }).click();
+    await this.headerRegion
+      .getByRole('button', { name: 'Room info' })
+      .first()
+      .click();
   }
 
   async sendMessage(message: string) {
@@ -157,15 +160,10 @@ export class ElementWebPage {
     await this.sendMessage(`/addwidget ${url}`);
 
     await this.toggleRoomInfo();
-    await this.page
-      .getByRole('button', { name: 'Custom' })
-      .locator('..')
-      .getByRole('button', { name: 'Pin' })
-      .click();
+    await this.page.getByRole('menuitem', { name: 'Extensions' }).click();
+    await this.page.getByRole('button', { name: 'Pin' }).click();
 
-    await this.page
-      .getByRole('button', { name: 'Set my room layout for everyone' })
-      .click();
+    await this.page.getByText('Set layout for everyone').click();
   }
 
   async inviteUser(username: string) {
@@ -244,6 +242,12 @@ export class ElementWebPage {
       { synapseUrl, credentials },
     );
 
+    // Bypass the unsupported browser toast by setting a local storage key
+    // https://github.com/element-hq/element-web/blob/9a126795a81d13aba2d331b38df75878682d54a1/src/SupportedBrowser.ts#L94
+    await this.page.evaluate(() => {
+      window.localStorage.setItem('mx_accepts_unsupported_browser', 'true');
+    });
+
     // Reload and use the credentials
     await this.page.goto(getElementWebUrl());
 

diff --git a/packages/element-web-guest-module/README.md b/packages/element-web-guest-module/README.md
@@ -25,7 +25,7 @@ Guest users...
 
 ## Requirements
 
-The minimal Element version to use this module is `1.11.40`.
+The minimal Element version to use this module is `1.11.84`.
 
 ## Install the Element Module
 

diff --git a/packages/element-web-guest-module/customisations/ComponentVisibility.ts b/packages/element-web-guest-module/customisations/ComponentVisibility.ts
@@ -34,9 +34,13 @@ import {
   assertValidGuestModuleConfig,
   shouldShowComponent as shouldShowComponentShared,
 } from '@nordeck/element-web-guest-module';
-import { MatrixClientPeg } from 'matrix-react-sdk/src/MatrixClientPeg';
-import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
-import { UIComponent } from 'matrix-react-sdk/src/settings/UIFeature';
+// The next two imports are a hack to make it work after React SDK was merged into Element Web.
+// The idea is to start with matrix-js-sdk, that is placed into node_modules, and
+// then use a relative path to import something from /src in Element Web.
+// /src in Element Web is now what previously matrix-react-sdk was.
+// matrix-js-sdk should be relatively safe, as Element Web uses it itself.
+import { MatrixClientPeg } from 'matrix-js-sdk/../../src/MatrixClientPeg';
+import SdkConfig from 'matrix-js-sdk/../../src/SdkConfig';
 
 export function getConfig(): GuestModuleConfig {
   const rawConfig =