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();
+    });
+});