feat: show call participants in room list (Discord-style)

apps/web/playwright/e2e/app-loading/feature-detection.spec.ts

@@ -0,0 +1,34 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+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(`shows error page if browser lacks Intl support`, { tag: "@screenshot" }, async ({ page }) => {
+    await page.addInitScript({ content: `delete window.Intl;` });
+    await page.goto("/");
+
+    // Lack of Intl support causes the app bundle to fail to load, so we get the iframed
+    // static error page and need to explicitly look in the iframe because Playwright doesn't
+    // recurse into iframes when looking for elements
+    const header = page.frameLocator("iframe").getByText("Unsupported browser");
+    await expect(header).toBeVisible();
+
+    await expect(page).toMatchScreenshot("unsupported-browser.png");
+});
+
+test(`shows error page if browser lacks WebAssembly support`, { tag: "@screenshot" }, async ({ page }) => {
+    await page.addInitScript({ content: `delete window.WebAssembly;` });
+    await page.goto("/");
+
+    // Lack of WebAssembly support doesn't cause the bundle to fail loading, so we get
+    // CompatibilityView, i.e. no iframes.
+    const header = page.getByText("Element does not support this browser");
+    await expect(header).toBeVisible();
+
+    await expect(page).toMatchScreenshot("unsupported-browser-CompatibilityView.png");
+});

apps/web/playwright/e2e/app-loading/guest-registration.spec.ts

@@ -0,0 +1,49 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+/*
+ * Tests for application startup with guest registration enabled on the server.
+ */
+
+import type { Page } from "playwright-core";
+import { expect, test } from "../../element-web-test";
+
+test.use({
+    synapseConfig: {
+        allow_guest_access: true,
+    },
+});
+
+const screenshotOptions = (page?: Page) => ({
+    // Hide the UserID
+    css: `
+        span[data-testid="userId"] {
+            display: none !important;
+        }
+    `,
+});
+
+test("Shows the welcome page by default", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.getByRole("heading", { name: "Be in your element" })).toBeVisible();
+    await expect(page.getByRole("link", { name: "Sign in" })).toBeVisible();
+});
+
+test("Shows the user menu for guests", { tag: ["@screenshot"] }, async ({ page, app }) => {
+    await page.goto("/#/room/!room:id");
+    await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });
+    const menu = await app.openUserMenu();
+    await expect(menu).toMatchScreenshot("guest-menu.png", screenshotOptions(page));
+});
+
+test("Room link correctly loads a room view", async ({ page }) => {
+    await page.goto("/#/room/!room:id");
+    await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });
+    await expect(page).toHaveURL(/\/#\/room\/!room:id$/);
+    await expect(page.getByRole("heading", { name: "Join the conversation with an account" })).toBeVisible();
+});

apps/web/playwright/e2e/app-loading/stored-credentials.spec.ts

@@ -0,0 +1,73 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+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 { expect, test } from "../../element-web-test";
+import { ElementAppPage } from "../../pages/ElementAppPage";
+
+/*
+ * Tests for application startup with credentials stored in localstorage.
+ */
+
+test.use({ displayName: "Boris" });
+
+test("Shows the homepage by default", async ({ pageWithCredentials: page }) => {
+    await page.goto("/");
+    await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });
+
+    await expect(page).toHaveURL(/\/#\/home/);
+    await expect(page.getByRole("heading", { name: "Welcome Boris", exact: true })).toBeVisible();
+});
+
+test(
+    "Adjusts homepage button layout in thin viewport",
+    { tag: "@screenshot" },
+    async ({ pageWithCredentials: page }) => {
+        await page.setViewportSize({ width: 920, height: 720 });
+        await page.goto("/#/home");
+        await page.waitForSelector(".mx_HomePage", { timeout: 30000 });
+
+        await expect(page.locator(".mx_HomePage")).toMatchScreenshot("home-thin-viewport.png");
+    },
+);
+
+test("Shows the last known page on reload", async ({ pageWithCredentials: page }) => {
+    await page.goto("/");
+    await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });
+
+    const app = new ElementAppPage(page);
+    await app.client.createRoom({ name: "Test Room" });
+    await app.viewRoomByName("Test Room");
+    await expect(page).toHaveURL(/\/#\/room\//);
+
+    // Navigate away
+    await page.goto("about:blank");
+
+    // And back again
+    await page.goto("/");
+    await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });
+
+    // Check that the room reloaded
+    await expect(page).toHaveURL(/\/#\/room\//);
+    await expect(page.locator(".mx_RoomHeader")).toContainText("Test Room");
+});
+
+test("Room link correctly loads a room view", async ({ pageWithCredentials: page }) => {
+    await page.goto("/#/room/!room:id");
+    await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });
+
+    await expect(page).toHaveURL(/\/#\/room\/!room:id$/);
+    await expect(page.getByRole("button", { name: "Join the discussion" })).toBeVisible();
+});
+
+test("Login link redirects to home page", async ({ pageWithCredentials: page }) => {
+    await page.goto("/#/login");
+    await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });
+
+    await expect(page).toHaveURL(/\/#\/home/);
+    await expect(page.getByRole("heading", { name: "Welcome Boris", exact: true })).toBeVisible();
+});