Migrate email.spec.ts from Cypress to Playwright (#11920)

Co-authored-by: R Midhun Suresh <hi@midhun.dev>

playwright/e2e/login/login.spec.ts

@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { checkA11y, injectAxe } from "axe-playwright";
-
 import { test, expect } from "../../element-web-test";
 
 test.describe("Consent", () => {
@@ -30,9 +28,11 @@ test.describe("Consent", () => {
             await page.goto("/#/login");
         });
 
-        test("logs in with an existing account and lands on the home screen", async ({ page, homeserver }) => {
-            await injectAxe(page);
-
+        test("logs in with an existing account and lands on the home screen", async ({
+            page,
+            homeserver,
+            checkA11y,
+        }) => {
             // first pick the homeserver, as otherwise the user picker won't be visible
             await page.getByRole("button", { name: "Edit" }).click();
             await page.getByRole("textbox", { name: "Other homeserver" }).fill(homeserver.config.baseUrl);
@@ -66,7 +66,7 @@ test.describe("Consent", () => {
             await expect(page.getByRole("textbox", { name: "Username" })).toBeVisible();
             // Disabled because flaky - see https://github.com/vector-im/element-web/issues/24688
             // cy.percySnapshot("Login");
-            await checkA11y(page);
+            await checkA11y();
 
             await page.getByRole("textbox", { name: "Username" }).fill(username);
             await page.getByPlaceholder("Password").fill(password);

playwright/e2e/register/email.spec.ts

@@ -0,0 +1,84 @@
+/*
+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 { test, expect } from "../../element-web-test";
+import { MailHogServer } from "../../plugins/mailhog";
+
+test.describe("Email Registration", async () => {
+    test.use({
+        // eslint-disable-next-line no-empty-pattern
+        mailhog: async ({}, use) => {
+            const mailhog = new MailHogServer();
+            const instance = await mailhog.start();
+            await use(instance);
+            await mailhog.stop();
+        },
+        startHomeserverOpts: ({ mailhog }, use) =>
+            use({
+                template: "email",
+                variables: {
+                    SMTP_HOST: "{{HOST_DOCKER_INTERNAL}}", // This will get replaced in synapseStart
+                    SMTP_PORT: mailhog.instance.smtpPort,
+                },
+            }),
+        config: ({ homeserver }, use) =>
+            use({
+                default_server_config: {
+                    "m.homeserver": {
+                        base_url: homeserver.config.baseUrl,
+                    },
+                    "m.identity_server": {
+                        base_url: "https://server.invalid",
+                    },
+                },
+            }),
+    });
+
+    test.beforeEach(async ({ page }) => {
+        await page.goto("/#/register");
+    });
+
+    test("registers an account and lands on the use case selection screen", async ({
+        page,
+        mailhog,
+        request,
+        checkA11y,
+    }) => {
+        await expect(page.getByRole("textbox", { name: "Username" })).toBeVisible();
+        // Hide the server text as it contains the randomly allocated Homeserver port
+        // const percyCSS = ".mx_ServerPicker_server { visibility: hidden !important; }"; // XXX: Percy
+
+        await page.getByRole("textbox", { name: "Username" }).fill("alice");
+        await page.getByPlaceholder("Password", { exact: true }).fill("totally a great password");
+        await page.getByPlaceholder("Confirm password").fill("totally a great password");
+        await page.getByPlaceholder("Email").fill("alice@email.com");
+        await page.getByRole("button", { name: "Register" }).click();
+
+        await expect(page.getByText("Check your email to continue")).toBeVisible();
+        // cy.percySnapshot("Registration check your email", { percyCSS }); // XXX: Percy
+        await checkA11y();
+
+        await expect(page.getByText("An error was encountered when sending the email")).not.toBeVisible();
+
+        const messages = await mailhog.api.messages();
+        expect(messages.items).toHaveLength(1);
+        expect(messages.items[0].to).toEqual("alice@email.com");
+        const [emailLink] = messages.items[0].text.match(/http.+/);
+        await request.get(emailLink); // "Click" the link in the email
+
+        await expect(page.locator(".mx_UseCaseSelection_skip")).toBeVisible();
+    });
+});

playwright/element-web-test.ts

@@ -14,12 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { test as base } from "@playwright/test";
+import { test as base, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
 
+import type mailhog from "mailhog";
+import type { IConfigOptions } from "../src/IConfigOptions";
 import { HomeserverInstance, StartHomeserverOpts } from "./plugins/utils/homeserver";
 import { Synapse } from "./plugins/synapse";
+import { Instance } from "./plugins/mailhog";
 
-const CONFIG_JSON = {
+const CONFIG_JSON: Partial<IConfigOptions> = {
     // This is deliberately quite a minimal config.json, so that we can test that the default settings
     // actually work.
     //
@@ -41,9 +45,12 @@ export type TestOptions = {
 
 export const test = base.extend<
     TestOptions & {
+        axe: AxeBuilder;
+        checkA11y: () => Promise<void>;
         config: typeof CONFIG_JSON;
         startHomeserverOpts: StartHomeserverOpts | string;
         homeserver: HomeserverInstance;
+        mailhog?: { api: mailhog.API; instance: Instance };
     }
 >({
     crypto: ["legacy", { option: true }],
@@ -72,6 +79,21 @@ export const test = base.extend<
         await use(await server.start(opts));
         await server.stop();
     },
+
+    axe: async ({ page }, use) => {
+        await use(new AxeBuilder({ page }));
+    },
+    checkA11y: async ({ axe }, use, testInfo) =>
+        use(async () => {
+            const results = await axe.analyze();
+
+            await testInfo.attach("accessibility-scan-results", {
+                body: JSON.stringify(results, null, 2),
+                contentType: "application/json",
+            });
+
+            expect(results.violations).toEqual([]);
+        }),
 });
 
 test.use({});

playwright/plugins/mailhog/index.ts

@@ -0,0 +1,55 @@
+/*
+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 mailhog from "mailhog";
+
+import { getFreePort } from "../utils/port";
+import { Docker } from "../docker";
+
+export interface Instance {
+    host: string;
+    smtpPort: number;
+    httpPort: number;
+    containerId: string;
+}
+
+export class MailHogServer {
+    private readonly docker: Docker = new Docker();
+    private instance?: Instance;
+
+    async start(): Promise<{ api: mailhog.API; instance: Instance }> {
+        if (this.instance) throw new Error("Mailhog server is already running!");
+        const smtpPort = await getFreePort();
+        const httpPort = await getFreePort();
+        console.log(`Starting mailhog...`);
+        const containerId = await this.docker.run({
+            image: "mailhog/mailhog:latest",
+            containerName: `react-sdk-cypress-mailhog`,
+            params: ["--rm", "-p", `${smtpPort}:1025/tcp`, "-p", `${httpPort}:8025/tcp`],
+        });
+        console.log(`Started mailhog on ports smtp=${smtpPort} http=${httpPort}.`);
+        const host = await this.docker.getContainerIp();
+        this.instance = { smtpPort, httpPort, containerId, host };
+        return { api: mailhog({ host: "localhost", port: httpPort }), instance: this.instance };
+    }
+
+    async stop(): Promise<void> {
+        if (!this.instance) throw new Error("Missing existing mailhog instance, did you call stop() before start()?");
+        await this.docker.stop();
+        console.log(`Stopped mailhog id ${this.instance.containerId}.`);
+        this.instance = undefined;
+    }
+}

playwright/tsconfig.json

@@ -3,7 +3,6 @@
         "target": "es2016",
         "jsx": "react",
         "lib": ["es2021", "dom", "dom.iterable"],
-        "types": ["axe-playwright"],
         "resolveJsonModule": true,
         "esModuleInterop": true,
         "moduleResolution": "node",