From 0e22413885848e24a76ee00fc0c67f10a6ad8661 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 19 Feb 2024 17:26:32 +0000
Subject: [PATCH] Improvements to Playwright test infrastructure (#12260)

* Move mailhog fixture to element-web-test.ts

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

* Remove spurious debug log

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

* Lazily set up ElementAppPage subfixtures to avoid conflicting on network routing

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

* Update playwright/e2e/crypto/utils.ts

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 playwright/e2e/crypto/utils.ts        |  2 --
 playwright/e2e/register/email.spec.ts |  8 --------
 playwright/element-web-test.ts        | 12 ++++++++++--
 playwright/pages/ElementAppPage.ts    | 20 +++++++++++++++++---
 4 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/playwright/e2e/crypto/utils.ts b/playwright/e2e/crypto/utils.ts
index 5ea7beccbd..0362148d39 100644
--- a/playwright/e2e/crypto/utils.ts
+++ b/playwright/e2e/crypto/utils.ts
@@ -36,9 +36,7 @@ import { ElementAppPage } from "../../pages/ElementAppPage";
 export async function waitForVerificationRequest(client: Client): Promise<JSHandle<VerificationRequest>> {
     return client.evaluateHandle((cli) => {
         return new Promise<VerificationRequest>((resolve) => {
-            console.log("~~");
             const onVerificationRequestEvent = async (request: VerificationRequest) => {
-                console.log("@@", request);
                 await request.accept();
                 resolve(request);
             };
diff --git a/playwright/e2e/register/email.spec.ts b/playwright/e2e/register/email.spec.ts
index 5b093f5036..c6b6d7b38a 100644
--- a/playwright/e2e/register/email.spec.ts
+++ b/playwright/e2e/register/email.spec.ts
@@ -15,20 +15,12 @@ limitations under the License.
 */
 
 import { test, expect } from "../../element-web-test";
-import { MailHogServer } from "../../plugins/mailhog";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 test.describe("Email Registration", async () => {
     test.skip(isDendrite, "not yet wired up");
 
     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",
diff --git a/playwright/element-web-test.ts b/playwright/element-web-test.ts
index 4e7d3a5b65..21407d2585 100644
--- a/playwright/element-web-test.ts
+++ b/playwright/element-web-test.ts
@@ -24,7 +24,7 @@ import type { IConfigOptions } from "../src/IConfigOptions";
 import { Credentials, Homeserver, HomeserverInstance, StartHomeserverOpts } from "./plugins/homeserver";
 import { Synapse } from "./plugins/homeserver/synapse";
 import { Dendrite, Pinecone } from "./plugins/homeserver/dendrite";
-import { Instance } from "./plugins/mailhog";
+import { Instance, MailHogServer } from "./plugins/mailhog";
 import { ElementAppPage } from "./pages/ElementAppPage";
 import { OAuthServer } from "./plugins/oauth_server";
 import { Crypto } from "./pages/crypto";
@@ -86,7 +86,7 @@ export const test = base.extend<
         user: CredentialsWithDisplayName;
         displayName?: string;
         app: ElementAppPage;
-        mailhog?: { api: mailhog.API; instance: Instance };
+        mailhog: { api: mailhog.API; instance: Instance };
         crypto: Crypto;
         room?: { roomId: string };
         toasts: Toasts;
@@ -234,6 +234,14 @@ export const test = base.extend<
         await use(bot);
     },
 
+    // 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();
+    },
+
     slidingSyncProxy: async ({ page, user, homeserver }, use) => {
         const proxy = new SlidingSyncProxy(homeserver.config.dockerUrl);
         const proxyInstance = await proxy.start();
diff --git a/playwright/pages/ElementAppPage.ts b/playwright/pages/ElementAppPage.ts
index be80cf6280..babb44f881 100644
--- a/playwright/pages/ElementAppPage.ts
+++ b/playwright/pages/ElementAppPage.ts
@@ -24,9 +24,23 @@ import { Spotlight } from "./Spotlight";
 export class ElementAppPage {
     public constructor(public readonly page: Page) {}
 
-    public settings = new Settings(this.page);
-    public client: Client = new Client(this.page);
-    public timeline: Timeline = new Timeline(this.page);
+    // We create these lazily on first access to avoid calling setup code which might cause conflicts,
+    // e.g. the network routing code in the client subfixture.
+    private _settings?: Settings;
+    public get settings(): Settings {
+        if (!this._settings) this._settings = new Settings(this.page);
+        return this._settings;
+    }
+    private _client?: Client;
+    public get client(): Client {
+        if (!this._client) this._client = new Client(this.page);
+        return this._client;
+    }
+    private _timeline?: Timeline;
+    public get timeline(): Timeline {
+        if (!this._timeline) this._timeline = new Timeline(this.page);
+        return this._timeline;
+    }
 
     /**
      * Open the top left user menu, returning a Locator to the resulting context menu.