diff --git a/.changeset/yellow-paws-jump.md b/.changeset/yellow-paws-jump.md new file mode 100644 index 0000000..d13d0bb --- /dev/null +++ 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 index 3559e4f..199430d 100644 --- 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 index e7711b0..6a4bb5c 100644 --- 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 index fbf9c74..56b4f5f 100644 --- 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 index 7cc0a7a..48d1b42 100644 --- 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 index 79551fd..4cc5e69 100644 --- 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 { 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/e2e/src/guestLogin.spec.ts-snapshots/Guest-Module-guest-dialog-should-not-have-automatically-detectable-accessibility-violations-1-chromium.txt b/e2e/src/guestLogin.spec.ts-snapshots/Guest-Module-guest-dialog-should-not-have-automatically-detectable-accessibility-violations-1-chromium.txt index edb2d35..7ab4a23 100644 --- a/e2e/src/guestLogin.spec.ts-snapshots/Guest-Module-guest-dialog-should-not-have-automatically-detectable-accessibility-violations-1-chromium.txt +++ b/e2e/src/guestLogin.spec.ts-snapshots/Guest-Module-guest-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 index be089f1..11d35f6 100644 --- 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 index f12e6c1..1f3c763 100644 --- 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 index 68ca467..302be7f 100644 --- 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 =