Migrate user-onboarding-*.spec.ts from Cypress to Playwright (#11927)

Co-authored-by: R Midhun Suresh <hi@midhun.dev>
Co-authored-by: Johannes Marbach <johannesm@element.io>
Co-authored-by: Milton Moura <miltonmoura@gmail.com>

playwright/e2e/left-panel/left-panel.spec.ts

@@ -0,0 +1,31 @@
+/*
+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 { test, expect } from "../../element-web-test";
+
+test.describe("LeftPanel", () => {
+    test.use({
+        displayName: "Hanako",
+    });
+
+    test("should render the Rooms list", async ({ page, app, user }) => {
+        // create rooms and check room names are correct
+        for (const name of ["Apple", "Pineapple", "Orange"]) {
+            await app.createRoom({ name });
+            await expect(page.getByRole("treeitem", { name })).toBeVisible();
+        }
+    });
+});

playwright/e2e/login/consent.spec.ts

@@ -0,0 +1,55 @@
+/*
+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 { Page } from "@playwright/test";
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("Consent", () => {
+    test.use({
+        startHomeserverOpts: "consent",
+        displayName: "Bob",
+    });
+
+    test("should prompt the user to consent to terms when server deems it necessary", async ({
+        context,
+        page,
+        user,
+        app,
+    }) => {
+        // Attempt to create a room using the js-sdk which should return an error with `M_CONSENT_NOT_GIVEN`
+        await app.createRoom({}).catch(() => {});
+        const newPagePromise = new Promise<Page>((resolve) => context.once("page", resolve));
+
+        const dialog = page.locator(".mx_QuestionDialog");
+        // Accept terms & conditions
+        await expect(dialog.getByRole("heading", { name: "Terms and Conditions" })).toBeVisible();
+        await page.getByRole("button", { name: "Review terms and conditions" }).click();
+
+        const newPage = await newPagePromise;
+        await newPage.locator('[type="submit"]').click();
+        await expect(newPage.getByText("Danke schoen")).toBeVisible();
+
+        // go back to the app
+        await page.goto("/");
+        // wait for the app to re-load
+        await expect(page.locator(".mx_MatrixChat")).toBeVisible();
+
+        // attempt to perform the same action again and expect it to not fail
+        await app.createRoom({ name: "Test Room" });
+        await expect(page.getByText("Test Room")).toBeVisible();
+    });
+});

playwright/e2e/login/utils.ts

@@ -43,7 +43,7 @@ export async function doTokenRegistration(
 
     // Synapse prompts us to pick a user ID
     await expect(page.getByRole("heading", { name: "Create your account" })).toBeVisible();
-    await page.getByRole("textbox", { name: "Username (required)" }).type("alice");
+    await page.getByRole("textbox", { name: "Username (required)" }).fill("alice");
 
     // wait for username validation to start, and complete
     await expect(page.locator("#field-username-output")).toHaveText("");

playwright/e2e/user-onboarding/user-onboarding-new.spec.ts

@@ -0,0 +1,75 @@
+/*
+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 { test, expect } from "../../element-web-test";
+
+test.describe("User Onboarding (new user)", () => {
+    test.use({
+        displayName: "Jane Doe",
+    });
+
+    // This first beforeEach happens before the `user` fixture runs
+    test.beforeEach(async ({ page }) => {
+        await page.addInitScript(() => {
+            window.localStorage.setItem("mx_registration_time", "1656633601");
+        });
+    });
+
+    test.beforeEach(async ({ page, user }) => {
+        await expect(page.locator(".mx_UserOnboardingPage")).toBeVisible();
+        await expect(page.getByRole("button", { name: "Welcome" })).toBeVisible();
+        await expect(page.locator(".mx_UserOnboardingList")).toBeVisible();
+    });
+
+    test("page is shown and preference exists", async ({ page, app }) => {
+        await expect(page.locator(".mx_UserOnboardingPage")).toHaveScreenshot();
+        await app.openUserSettings("Preferences");
+        await expect(page.getByText("Show shortcut to welcome checklist above the room list")).toBeVisible();
+    });
+
+    test("app download dialog", async ({ page }) => {
+        await page.getByRole("button", { name: "Download apps" }).click();
+        await expect(
+            page.getByRole("dialog").getByRole("heading", { level: 2, name: "Download Element" }),
+        ).toBeVisible();
+        await expect(page.getByRole("dialog")).toHaveScreenshot();
+    });
+
+    test("using find friends action should increase progress", async ({ page, homeserver }) => {
+        const bot = await homeserver.registerUser("botbob", "password", "BotBob");
+
+        const oldProgress = parseFloat(await page.getByRole("progressbar").getAttribute("value"));
+        await page.getByRole("button", { name: "Find friends" }).click();
+        await page.locator(".mx_InviteDialog_editor").getByRole("textbox").fill(bot.userId);
+        await page.getByRole("button", { name: "Go" }).click();
+        await expect(page.locator(".mx_InviteDialog_buttonAndSpinner")).not.toBeVisible();
+
+        const message = "Hi!";
+        const composer = page.getByRole("textbox", { name: "Send a message…" });
+        await composer.fill(`${message}`);
+        await composer.press("Enter");
+        await expect(page.locator(".mx_MTextBody.mx_EventTile_content", { hasText: message })).toBeVisible();
+
+        await page.goto("/#/home");
+        await expect(page.locator(".mx_UserOnboardingPage")).toBeVisible();
+        await expect(page.getByRole("button", { name: "Welcome" })).toBeVisible();
+        await expect(page.locator(".mx_UserOnboardingList")).toBeVisible();
+
+        await page.waitForTimeout(500); // await progress bar animation
+        const progress = parseFloat(await page.getByRole("progressbar").getAttribute("value"));
+        expect(progress).toBeGreaterThan(oldProgress);
+    });
+});

playwright/e2e/user-onboarding/user-onboarding-old.spec.ts

@@ -0,0 +1,36 @@
+/*
+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 { test, expect } from "../../element-web-test";
+
+test.describe("User Onboarding (old user)", () => {
+    test.use({
+        displayName: "Jane Doe",
+    });
+
+    test.beforeEach(async ({ page }) => {
+        await page.addInitScript(() => {
+            window.localStorage.setItem("mx_registration_time", "2");
+        });
+    });
+
+    test("page and preference are hidden", async ({ page, user, app }) => {
+        await expect(page.locator(".mx_UserOnboardingPage")).not.toBeVisible();
+        await expect(page.locator(".mx_UserOnboardingButton")).not.toBeVisible();
+        await app.openUserSettings("Preferences");
+        await expect(page.getByText("Show shortcut to welcome checklist above the room list")).not.toBeVisible();
+    });
+});

playwright/element-web-test.ts

@@ -23,6 +23,7 @@ import type { IConfigOptions } from "../src/IConfigOptions";
 import { Credentials, HomeserverInstance, StartHomeserverOpts } from "./plugins/utils/homeserver";
 import { Synapse } from "./plugins/synapse";
 import { Instance } from "./plugins/mailhog";
+import { ElementAppPage } from "./pages/ElementAppPage";
 import { OAuthServer } from "./plugins/oauth_server";
 import { Toasts } from "./pages/toasts";
 
@@ -60,6 +61,7 @@ export const test = base.extend<
             displayName: string;
         };
         displayName?: string;
+        app: ElementAppPage;
         mailhog?: { api: mailhog.API; instance: Instance };
         toasts: Toasts;
     }
@@ -150,6 +152,9 @@ export const test = base.extend<
             expect(results.violations).toEqual([]);
         }),
 
+    app: async ({ page }, use) => {
+        await use(new ElementAppPage(page));
+    },
     toasts: async ({ page }, use) => {
         await use(new Toasts(page));
     },

playwright/global.d.ts

@@ -0,0 +1,25 @@
+/*
+Copyright 2023 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 MatrixClient } from "matrix-js-sdk/src/matrix";
+
+declare global {
+    interface Window {
+        mxMatrixClientPeg: {
+            get(): MatrixClient;
+        };
+    }
+}

playwright/pages/ElementAppPage.ts

@@ -0,0 +1,68 @@
+/*
+Copyright 2023 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 Locator, type Page } from "@playwright/test";
+import { type ICreateRoomOpts } from "matrix-js-sdk/src/matrix";
+
+export class ElementAppPage {
+    public constructor(private readonly page: Page) {}
+
+    /**
+     * Open the top left user menu, returning a Locator to the resulting context menu.
+     */
+    public async openUserMenu(): Promise<Locator> {
+        await this.page.getByRole("button", { name: "User menu" }).click();
+        const locator = this.page.locator(".mx_ContextualMenu");
+        await locator.waitFor();
+        return locator;
+    }
+
+    /**
+     * Switch settings tab to the one by the given name
+     * @param tab the name of the tab to switch to.
+     */
+    public async switchTab(tab: string): Promise<void> {
+        await this.page
+            .locator(".mx_TabbedView_tabLabels")
+            .locator(".mx_TabbedView_tabLabel", { hasText: tab })
+            .click();
+    }
+
+    /**
+     * Open user settings (via user menu), returns a locator to the dialog
+     * @param tab the name of the tab to switch to after opening, optional.
+     */
+    public async openUserSettings(tab?: string): Promise<Locator> {
+        const locator = await this.openUserMenu();
+        await locator.getByRole("menuitem", { name: "All settings", exact: true }).click();
+        if (tab) await this.switchTab(tab);
+        return this.page.locator(".mx_UserSettingsDialog");
+    }
+
+    /**
+     * Create a room with given options.
+     * @param options the options to apply when creating the room
+     * @return the ID of the newly created room
+     */
+    public async createRoom(options: ICreateRoomOpts): Promise<string> {
+        return this.page.evaluate<Promise<string>, ICreateRoomOpts>(async (options) => {
+            return window.mxMatrixClientPeg
+                .get()
+                .createRoom(options)
+                .then((res) => res.room_id);
+        }, options);
+    }
+}

playwright/plugins/synapse/index.ts

@@ -193,6 +193,10 @@ export class Synapse implements Homeserver, HomeserverInstance {
             },
         });
 
+        if (!res.ok()) {
+            throw await res.json();
+        }
+
         const data = await res.json();
         return {
             homeServer: data.home_server,

playwright/tsconfig.json

@@ -2,11 +2,15 @@
     "compilerOptions": {
         "target": "es2016",
         "jsx": "react",
-        "lib": ["es2021", "dom", "dom.iterable"],
+        "lib": ["ESNext", "es2021", "dom", "dom.iterable"],
         "resolveJsonModule": true,
         "esModuleInterop": true,
         "moduleResolution": "node",
         "module": "es2022"
     },
-    "include": ["**/*.ts", "../src/@types/global.d.ts"]
+    "include": [
+        "**/*.ts",
+        "../node_modules/matrix-js-sdk/src/@types/*.d.ts",
+        "../node_modules/matrix-js-sdk/node_modules/@matrix-org/olm/index.d.ts"
+    ]
 }