Migrate room/* from Cypress to Playwright (#11985)

* Remove old percy media query CSS

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Stabilise soft_logout.spec.ts

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots using `toMatchScreenshot` assertion with CSS overrides

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix accidentally commented test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Migrate room/* from Cypress to Playwright

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update labs.ts

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

playwright/e2e/room/room-header.spec.ts

@@ -0,0 +1,280 @@
+/*
+Copyright 2023 Suguru Hirahara
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Page } from "@playwright/test";
+
+import { test, expect } from "../../element-web-test";
+import { ElementAppPage } from "../../pages/ElementAppPage";
+
+test.describe("Room Header", () => {
+    test.use({
+        displayName: "Sakura",
+    });
+
+    test.describe("with feature_notifications enabled", () => {
+        test.beforeEach(async ({ app }) => {
+            await app.labs.enableLabsFeature("feature_notifications");
+        });
+
+        test("should render default buttons properly", async ({ page, app, user }) => {
+            await app.client.createRoom({ name: "Test Room" });
+            await app.viewRoomByName("Test Room");
+
+            const header = page.locator(".mx_LegacyRoomHeader");
+            // Names (aria-label) of every button rendered on mx_LegacyRoomHeader by default
+            const expectedButtonNames = [
+                "Room options", // The room name button next to the room avatar, which renders dropdown menu on click
+                "Voice call",
+                "Video call",
+                "Search",
+                "Threads",
+                "Notifications",
+                "Room info",
+            ];
+
+            // Assert they are found and visible
+            for (const name of expectedButtonNames) {
+                await expect(header.getByRole("button", { name })).toBeVisible();
+            }
+
+            // Assert that just those seven buttons exist on mx_LegacyRoomHeader by default
+            await expect(header.getByRole("button")).toHaveCount(7);
+
+            await expect(header).toMatchScreenshot("room-header.png");
+        });
+
+        test("should render a very long room name without collapsing the buttons", async ({ page, app, user }) => {
+            const LONG_ROOM_NAME =
+                "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore " +
+                "et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " +
+                "aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum " +
+                "dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui " +
+                "officia deserunt mollit anim id est laborum.";
+
+            await app.client.createRoom({ name: LONG_ROOM_NAME });
+            await app.viewRoomByName(LONG_ROOM_NAME);
+
+            const header = page.locator(".mx_LegacyRoomHeader");
+            // Wait until the room name is set
+            await expect(page.locator(".mx_LegacyRoomHeader_nametext").getByText(LONG_ROOM_NAME)).toBeVisible();
+
+            // Assert the size of buttons on RoomHeader are specified and the buttons are not compressed
+            // Note these assertions do not check the size of mx_LegacyRoomHeader_name button
+            const buttons = page.locator(".mx_LegacyRoomHeader_button");
+            await expect(buttons).toHaveCount(6);
+            for (const button of await buttons.all()) {
+                await expect(button).toBeVisible();
+                await expect(button).toHaveCSS("height", "32px");
+                await expect(button).toHaveCSS("width", "32px");
+            }
+
+            await expect(header).toMatchScreenshot("room-header-long-name.png");
+        });
+
+        test("should have buttons highlighted by being clicked", async ({ page, app, user }) => {
+            await app.client.createRoom({ name: "Test Room" });
+            await app.viewRoomByName("Test Room");
+
+            const header = page.locator(".mx_LegacyRoomHeader");
+            // Check these buttons
+            const buttonsHighlighted = ["Threads", "Notifications", "Room info"];
+
+            for (const name of buttonsHighlighted) {
+                await header.getByRole("button", { name: name }).click(); // Highlight the button
+            }
+
+            await expect(header).toMatchScreenshot("room-header-highlighted.png");
+        });
+    });
+
+    test.describe("with feature_pinning enabled", () => {
+        test.beforeEach(async ({ app }) => {
+            await app.labs.enableLabsFeature("feature_pinning");
+        });
+
+        test("should render the pin button for pinned messages card", async ({ page, app, user }) => {
+            await app.client.createRoom({ name: "Test Room" });
+            await app.viewRoomByName("Test Room");
+
+            const composer = app.getComposer().locator("[contenteditable]");
+            await composer.fill("Test message");
+            await composer.press("Enter");
+
+            const lastTile = page.locator(".mx_EventTile_last");
+            await lastTile.hover();
+            await lastTile.getByRole("button", { name: "Options" }).click();
+
+            await page.getByRole("menuitem", { name: "Pin" }).click();
+
+            await expect(
+                page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Pinned messages" }),
+            ).toBeVisible();
+        });
+    });
+
+    test.describe("with a video room", () => {
+        test.beforeEach(async ({ app }) => {
+            await app.labs.enableLabsFeature("feature_video_rooms");
+        });
+
+        const createVideoRoom = async (page: Page, app: ElementAppPage) => {
+            await page.locator(".mx_LeftPanel_roomListContainer").getByRole("button", { name: "Add room" }).click();
+
+            await page.getByRole("menuitem", { name: "New video room" }).click();
+
+            await page.getByRole("textbox", { name: "Name" }).type("Test video room");
+
+            await page.getByRole("button", { name: "Create video room" }).click();
+
+            await app.viewRoomByName("Test video room");
+        };
+
+        test("should render buttons for room options, beta pill, invite, chat, and room info", async ({
+            page,
+            app,
+            user,
+        }) => {
+            await app.labs.enableLabsFeature("feature_notifications");
+            await createVideoRoom(page, app);
+
+            const header = page.locator(".mx_LegacyRoomHeader");
+            // Names (aria-label) of the buttons on the video room header
+            const expectedButtonNames = [
+                "Room options",
+                "Video rooms are a beta feature Click for more info", // Beta pill
+                "Invite",
+                "Chat",
+                "Room info",
+            ];
+
+            // Assert they are found and visible
+            for (const name of expectedButtonNames) {
+                await expect(header.getByRole("button", { name })).toBeVisible();
+            }
+
+            // Assert that there is not a button except those buttons
+            await expect(header.getByRole("button")).toHaveCount(7);
+
+            await expect(header).toMatchScreenshot("room-header-video-room.png");
+        });
+
+        test("should render a working chat button which opens the timeline on a right panel", async ({
+            page,
+            app,
+            user,
+        }) => {
+            await createVideoRoom(page, app);
+
+            await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Chat" }).click();
+
+            // Assert that the video is rendered
+            await expect(page.locator(".mx_CallView video")).toBeVisible();
+
+            // Assert that GELS is visible
+            await expect(
+                page.locator(".mx_RightPanel .mx_TimelineCard").getByText("Sakura created and configured the room."),
+            ).toBeVisible();
+        });
+    });
+
+    test.describe("with a widget", () => {
+        const ROOM_NAME = "Test Room with a widget";
+        const WIDGET_ID = "fake-widget";
+        const WIDGET_HTML = `
+            <html lang="en">
+                <head>
+                    <title>Fake Widget</title>
+                </head>
+                <body>
+                    Hello World
+                </body>
+            </html>
+        `;
+
+        test.beforeEach(async ({ page, app, user, webserver }) => {
+            const widgetUrl = webserver.start(WIDGET_HTML);
+            const roomId = await app.client.createRoom({ name: ROOM_NAME });
+
+            // setup widget via state event
+            await app.client.evaluate(
+                async (matrixClient, { roomId, widgetUrl, id }) => {
+                    await matrixClient.sendStateEvent(
+                        roomId,
+                        "im.vector.modular.widgets",
+                        {
+                            id,
+                            creatorUserId: "somebody",
+                            type: "widget",
+                            name: "widget",
+                            url: widgetUrl,
+                        },
+                        id,
+                    );
+                    await matrixClient.sendStateEvent(
+                        roomId,
+                        "io.element.widgets.layout",
+                        {
+                            widgets: {
+                                [id]: {
+                                    container: "top",
+                                    index: 1,
+                                    width: 100,
+                                    height: 0,
+                                },
+                            },
+                        },
+                        "",
+                    );
+                },
+                {
+                    roomId,
+                    widgetUrl,
+                    id: WIDGET_ID,
+                },
+            );
+
+            // open the room
+            await app.viewRoomByName(ROOM_NAME);
+        });
+
+        test("should highlight the apps button", async ({ page, app, user }) => {
+            // Assert that AppsDrawer is rendered
+            await expect(page.locator(".mx_AppsDrawer")).toBeVisible();
+
+            const header = page.locator(".mx_LegacyRoomHeader");
+            // Assert that "Hide Widgets" button is rendered and aria-checked is set to true
+            await expect(header.getByRole("button", { name: "Hide Widgets" })).toHaveAttribute("aria-checked", "true");
+
+            await expect(header).toMatchScreenshot("room-header-with-apps-button-highlighted.png");
+        });
+
+        test("should support hiding a widget", async ({ page, app, user }) => {
+            await expect(page.locator(".mx_AppsDrawer")).toBeVisible();
+
+            const header = page.locator(".mx_LegacyRoomHeader");
+            // Click the apps button to hide AppsDrawer
+            await header.getByRole("button", { name: "Hide Widgets" }).click();
+
+            // Assert that "Show widgets" button is rendered and aria-checked is set to false
+            await expect(header.getByRole("button", { name: "Show Widgets" })).toHaveAttribute("aria-checked", "false");
+
+            // Assert that AppsDrawer is not rendered
+            await expect(page.locator(".mx_AppsDrawer")).not.toBeVisible();
+
+            await expect(header).toMatchScreenshot("room-header-with-apps-button-not-highlighted.png");
+        });
+    });
+});

playwright/e2e/room/room.spec.ts

@@ -0,0 +1,63 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import type { EventType } from "matrix-js-sdk/src/matrix";
+import { test, expect } from "../../element-web-test";
+import { Bot } from "../../pages/bot";
+
+test.describe("Room Directory", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    test("should switch between existing dm rooms without a loader", async ({ page, homeserver, app, user }) => {
+        const bob = new Bot(page, homeserver, { displayName: "Bob" });
+        await bob.prepareClient();
+        const charlie = new Bot(page, homeserver, { displayName: "Charlie" });
+        await charlie.prepareClient();
+
+        // create dms with bob and charlie
+        await app.client.evaluate(
+            async (cli, { bob, charlie }) => {
+                const bobRoom = await cli.createRoom({ is_direct: true });
+                const charlieRoom = await cli.createRoom({ is_direct: true });
+                await cli.invite(bobRoom.room_id, bob);
+                await cli.invite(charlieRoom.room_id, charlie);
+                await cli.setAccountData("m.direct" as EventType, {
+                    [bob]: [bobRoom.room_id],
+                    [charlie]: [charlieRoom.room_id],
+                });
+            },
+            {
+                bob: bob.credentials.userId,
+                charlie: charlie.credentials.userId,
+            },
+        );
+
+        await app.viewRoomByName("Bob");
+
+        // short timeout because loader is only visible for short period
+        // we want to make sure it is never displayed when switching these rooms
+        await expect(page.locator(".mx_RoomPreviewBar_spinnerTitle")).not.toBeVisible({ timeout: 1 });
+        // confirm the room was loaded
+        await expect(page.getByText("Bob joined the room")).toBeVisible();
+
+        await app.viewRoomByName("Charlie");
+        await expect(page.locator(".mx_RoomPreviewBar_spinnerTitle")).not.toBeVisible({ timeout: 1 });
+        // confirm the room was loaded
+        await expect(page.getByText("Charlie joined the room")).toBeVisible();
+    });
+});

playwright/element-web-test.ts

@@ -29,6 +29,7 @@ import { OAuthServer } from "./plugins/oauth_server";
 import { Crypto } from "./pages/crypto";
 import { Toasts } from "./pages/toasts";
 import { Bot, CreateBotOpts } from "./pages/bot";
+import { Webserver } from "./plugins/webserver";
 
 const CONFIG_JSON: Partial<IConfigOptions> = {
     // This is deliberately quite a minimal config.json, so that we can test that the default settings
@@ -75,6 +76,7 @@ export const test = base.extend<
         uut?: Locator; // Unit Under Test, useful place to refer a prepared locator
         botCreateOpts: CreateBotOpts;
         bot: Bot;
+        webserver: Webserver;
     }
 >({
     cryptoBackend: ["legacy", { option: true }],
@@ -195,6 +197,13 @@ export const test = base.extend<
         await bot.prepareClient(); // eagerly register the bot
         await use(bot);
     },
+
+    // eslint-disable-next-line no-empty-pattern
+    webserver: async ({}, use) => {
+        const webserver = new Webserver();
+        await use(webserver);
+        webserver.stop();
+    },
 });
 
 export const expect = baseExpect.extend({

playwright/pages/ElementAppPage.ts

@@ -82,7 +82,7 @@ export class ElementAppPage {
      * Get the composer element
      * @param isRightPanel whether to select the right panel composer, otherwise the main timeline composer
      */
-    public async getComposer(isRightPanel?: boolean): Promise<Locator> {
+    public getComposer(isRightPanel?: boolean): Locator {
         const panelClass = isRightPanel ? ".mx_RightPanel" : ".mx_RoomView_body";
         return this.page.locator(`${panelClass} .mx_MessageComposer`);
     }
@@ -92,7 +92,7 @@ export class ElementAppPage {
      * @param isRightPanel whether to select the right panel composer, otherwise the main timeline composer
      */
     public async openMessageComposerOptions(isRightPanel?: boolean): Promise<Locator> {
-        const composer = await this.getComposer(isRightPanel);
+        const composer = this.getComposer(isRightPanel);
         await composer.getByRole("button", { name: "More options", exact: true }).click();
         return this.page.getByRole("menu");
     }

playwright/pages/labs.ts

@@ -21,12 +21,17 @@ export class Labs {
 
     /**
      * Enables a labs feature for an element session.
-     * Has to be called before the session is initialized
      * @param feature labsFeature to enable (e.g. "feature_spotlight")
      */
     public async enableLabsFeature(feature: string): Promise<void> {
-        await this.page.evaluate((feature) => {
-            window.localStorage.setItem(`mx_labs_feature_${feature}`, "true");
-        }, feature);
+        if (this.page.url() === "about:blank") {
+            await this.page.addInitScript((feature) => {
+                window.localStorage.setItem(`mx_labs_feature_${feature}`, "true");
+            }, feature);
+        } else {
+            await this.page.evaluate((feature) => {
+                window.localStorage.setItem(`mx_labs_feature_${feature}`, "true");
+            }, feature);
+        }
     }
 }

playwright/plugins/webserver/index.ts

@@ -0,0 +1,46 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as http from "http";
+import { AddressInfo } from "net";
+
+export class Webserver {
+    private server?: http.Server;
+
+    public start(html: string): string {
+        if (this.server) this.stop();
+
+        this.server = http.createServer((req, res) => {
+            res.writeHead(200, {
+                "Content-Type": "text/html",
+            });
+            res.end(html);
+        });
+        this.server.listen();
+
+        const address = this.server.address() as AddressInfo;
+        console.log(`Started webserver at ${address.address}:${address.port}`);
+        return `http://localhost:${address.port}/`;
+    }
+
+    public stop(): void {
+        if (!this.server) return;
+        console.log("Stopping webserver");
+        const address = this.server.address() as AddressInfo;
+        this.server.close();
+        console.log(`Stopped webserver at ${address.address}:${address.port}`);
+    }
+}