feat(dx): add setup leap connect for e2e

.gitignore

@@ -71,11 +71,14 @@ apps/provider-proxy/.env
 apps/stats-web/.env
 .env.*.local
 .env.local
+.env.test
 
 # IDE files
 .idea
 .vscode
 .vscode-test
 
 # Data Folder
-data
+data
+testdata
+test-results

apps/deploy-web/playwright.config.ts

@@ -1,11 +1,8 @@
 import { defineConfig, devices } from "@playwright/test";
+import dotenv from 'dotenv';
+import path from "path";
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from 'dotenv';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
+dotenv.config({ path: path.resolve(__dirname, 'env/.env.test') });
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -36,7 +33,7 @@ export default defineConfig({
     {
       name: "chromium",
       use: { ...devices["Desktop Chrome"] }
-    },
+    }
 
     // {
     //   name: "firefox",

apps/deploy-web/tests/deploy-hello-world.spec.ts

@@ -1,27 +1,14 @@
-import { expect, selectors } from "@playwright/test";
 import { test } from "./utils/fixture";
 
-import { SSH_VM_IMAGES } from "@src/utils/sdl/data";
 import { DeployHelloWorldPage } from "./pages/DeployHelloWorldPage";
+import { setupLeap } from "./utils/wallet";
 
-test.beforeAll(async ({ page, extensionId }) => {
-  page.waitForLoadState("domcontentloaded");
-  console.log("clicking seed");
-  selectors.setTestIdAttribute("data-testing-id");
+// test.describe.configure({ mode: "serial" });
 
-  await page.goto(`chrome-extension://${extensionId}/index.html#/onboarding`);
-  await page.getByTestId("import-seed-phrase").click();
+test.only("deploy hello world", async ({ extPage: page, extensionId, context }) => {
+  await setupLeap(context, page, extensionId);
 
-  await page.locator(`//*[@id="root"]/div/div[2]/div/div[1]/div[1]/div/div[2]/div[1]`).click();
-  await page.locator("input").fill("test");
-
-  await page.pause();
-
-  selectors.setTestIdAttribute("data-testid");
-});
-
-test.only("deploy hello world", async ({ page }) => {
-  console.log("testing");
   const customTemplatePage = new DeployHelloWorldPage(page, "new-deployment", "build-template-card");
   await customTemplatePage.gotoInteractive();
+  await page.pause();
 });

apps/deploy-web/tests/pages/DeployBasePage.tsx

@@ -13,8 +13,8 @@ export class DeployBasePage {
 
   async gotoInteractive() {
     if (this.cardTestId) {
-      await this.page.goto("http://localhost:3000");
-      await this.page.getByTestId("welcome-modal-accept-button").click();
+      // await this.page.goto("http://localhost:3000");
+      // await this.page.getByTestId("welcome-modal-accept-button").click();
       await this.page.getByTestId("sidebar-deploy-button").first().click();
       await this.page.getByTestId(this.cardTestId).click();
     }

apps/deploy-web/tests/utils/fixture.tsx

@@ -1,21 +1,25 @@
-import { test as base, BrowserContext, chromium, selectors } from "@playwright/test";
+import { test as base, BrowserContext, chromium, selectors, Page } from "@playwright/test";
 import path from "path";
+import { nanoid } from "nanoid";
 
 export const test = base.extend<{
   context: BrowserContext;
   extensionId: string;
+  extPage: Page;
 }>({
   context: async ({}, use) => {
     console.log("context");
     const pathToExtension = path.join(__dirname, "Leap");
-    const context = await chromium.launchPersistentContext("", {
+    const contextName = nanoid();
+    const userDataDir = path.join(__dirname, "./testdata/tmp/" + contextName);
+    const context = await chromium.launchPersistentContext(userDataDir, {
       headless: false,
       args: [`--disable-extensions-except=${pathToExtension}`, `--load-extension=${pathToExtension}`]
     });
     console.log("using context");
     await use(context);
 
-    await context.close();
+    // await context.close();
   },
   extensionId: async ({ context }, use) => {
     console.log("extensionId");
@@ -34,6 +38,25 @@ export const test = base.extend<{
     await use(extensionId);
 
     context.route;
-  }
+  },
+  extPage: [
+    async ({ context }, use, workerInfo) => {
+      const pageList = context.pages();
+      if (pageList && pageList.length > 1) {
+        const extensionPage = pageList.filter(page => page.url().includes("extension")) || [];
+        if (extensionPage[0]) {
+          await extensionPage[0].waitForLoadState();
+          await use(extensionPage[0]);
+        }
+      } else {
+        const page = await context.waitForEvent("page");
+        await page.waitForLoadState();
+        if (page.url().includes("extension")) {
+          await use(page);
+        }
+      }
+    },
+    { scope: "test" }
+  ]
 });
 export const expect = test.expect;

apps/deploy-web/tests/utils/wallet.ts

@@ -0,0 +1,49 @@
+import { selectors, type BrowserContext, type Page } from "@playwright/test";
+
+export const setupLeap = async (context: BrowserContext, page: Page, extensionId: string) => {
+  page.waitForLoadState("domcontentloaded");
+  selectors.setTestIdAttribute("data-testing-id");
+
+  await page.getByTestId("import-seed-phrase").click();
+
+  const mnemonic = process.env.TEST_WALLET_MNEMONIC;
+  if (!mnemonic) {
+    throw new Error("TEST_WALLET_MNEMONIC is not set");
+  }
+  const mnemonicArray = mnemonic.split(" ");
+
+  for (let i = 0; i < mnemonicArray.length; i++) {
+    await page.locator(`//*[@id="root"]/div/div[2]/div/div[1]/div[1]/div/div[2]/div[${i + 1}]`).click();
+    await page.locator("input").last().fill(mnemonicArray[i]);
+  }
+
+  await page.getByTestId("btn-import-wallet").click();
+
+  // Select wallet
+  await page.getByTestId("wallet-1").click();
+  await page.getByTestId("btn-select-wallet-proceed").click();
+
+  // Set password
+  await page.getByTestId("input-password").fill("12345678");
+  await page.getByTestId("input-confirm-password").fill("12345678");
+  await page.getByTestId("btn-password-proceed").click();
+
+  await page.waitForLoadState("domcontentloaded");
+
+  // Reset test id attribute for console
+  selectors.setTestIdAttribute("data-testid");
+
+  await page.goto("http://localhost:3000");
+
+  await page.getByTestId("welcome-modal-accept-button").click();
+  await page.getByTestId("connect-wallet-btn").click();
+
+  await page.getByRole("button", { name: "Leap Leap" }).click();
+
+  // Connect to Leap
+  const popupPage = await context.waitForEvent("page");
+  await popupPage.waitForLoadState("domcontentloaded");
+  await popupPage.getByRole("button", { name: "Connect" }).click();
+
+  // await page.pause();
+};