From 5e09e3b7e12609e1846d9076e0e6b82a55c35491 Mon Sep 17 00:00:00 2001
From: Rob <30500864+RobChangCA@users.noreply.github.com>
Date: Tue, 18 Feb 2025 17:23:55 -0500
Subject: [PATCH] feat: 7702 e2e tests (#1369)

---
 .eslintignore                                 |  4 +-
 examples/ui-demo/e2e/7702.spec.ts             | 24 ++++++
 examples/ui-demo/e2e/helpers/mintWorkflow.ts  | 55 ++++++++++++++
 .../ui-demo/e2e/smart-contract-mint.spec.ts   | 74 -------------------
 examples/ui-demo/e2e/smart-contract.spec.ts   | 26 +++++++
 .../configuration/Configuration.tsx           |  9 ++-
 .../src/components/small-cards/MintStages.tsx |  7 +-
 7 files changed, 120 insertions(+), 79 deletions(-)
 create mode 100644 examples/ui-demo/e2e/7702.spec.ts
 create mode 100644 examples/ui-demo/e2e/helpers/mintWorkflow.ts
 delete mode 100644 examples/ui-demo/e2e/smart-contract-mint.spec.ts
 create mode 100644 examples/ui-demo/e2e/smart-contract.spec.ts

diff --git a/.eslintignore b/.eslintignore
index fd6eec95a6..937d972dbb 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -16,4 +16,6 @@ account-kit/rn-signer/lib/*
 **/build/*
 **/.cxx/*
 
-**/vendor/*
\ No newline at end of file
+**/vendor/*
+**/test-results/*
+**/playwright-report/*
\ No newline at end of file
diff --git a/examples/ui-demo/e2e/7702.spec.ts b/examples/ui-demo/e2e/7702.spec.ts
new file mode 100644
index 0000000000..0386aeb910
--- /dev/null
+++ b/examples/ui-demo/e2e/7702.spec.ts
@@ -0,0 +1,24 @@
+import { test, expect } from "@playwright/test";
+import { mintWithGoogleAuthWorkflow } from "./helpers/mintWorkflow";
+const googleEmail = process.env.PLAYWRIGHT_GOOGLE_EMAIL;
+const googlePassword = process.env.PLAYWRIGHT_GOOGLE_PASSWORD;
+
+test.beforeEach(async ({ page, baseURL }) => {
+  await page.goto(baseURL!);
+});
+test("Google sign in", async ({ page }) => {
+  if (!googleEmail || !googlePassword) {
+    throw new Error(
+      "PLAYWRIGHT_GOOGLE_EMAIL and PLAYWRIGHT_GOOGLE_PASSWORD must be set"
+    );
+  }
+  await expect(page).toHaveTitle(/Account Kit/);
+  // Fast way to initialize the page and ensure config is loaded
+  await page.getByRole("switch", { name: "Email" }).click();
+  await page.getByRole("switch", { name: "Email" }).click();
+  const walletSwitch = await page.locator("#wallet-switch");
+  if ((await walletSwitch.getAttribute("aria-checked")) === "false") {
+    await walletSwitch.click();
+  }
+  await mintWithGoogleAuthWorkflow(page, googleEmail, googlePassword);
+});
diff --git a/examples/ui-demo/e2e/helpers/mintWorkflow.ts b/examples/ui-demo/e2e/helpers/mintWorkflow.ts
new file mode 100644
index 0000000000..a067edcce3
--- /dev/null
+++ b/examples/ui-demo/e2e/helpers/mintWorkflow.ts
@@ -0,0 +1,55 @@
+// sharedWorkflow.ts
+import { Page, expect } from "@playwright/test";
+
+export async function mintWithGoogleAuthWorkflow(
+  page: Page,
+  googleEmail: string,
+  googlePassword: string
+) {
+  // Google sign in
+  await page.locator("button[aria-label='Google sign in']").click();
+  const popup = await page.waitForEvent("popup");
+  await popup.waitForLoadState("networkidle");
+
+  const emailInput = popup.getByRole("textbox");
+  await emailInput.fill(googleEmail);
+  await popup.getByRole("button", { name: /Next/i }).click();
+  await expect(popup.getByText(/Enter your password/i)).toBeVisible();
+
+  const passwordInput = popup.locator("input[type='password']:visible");
+  await passwordInput.fill(googlePassword);
+  await popup.getByRole("button", { name: /Next/i }).click();
+
+  // Wait for page to load after sign in
+  await expect(page.getByText(/Gasless transactions/i)).toBeVisible();
+  const avatar = page.getByRole("button", { name: `Hello, ${googleEmail}` });
+  await expect(avatar).toBeVisible();
+  await page.locator("img[alt='An NFT']");
+
+  // Collect NFT
+  await page.getByRole("button", { name: "Collect NFT" }).click();
+  await expect(page.getByText("Success", { exact: true })).toBeVisible({
+    timeout: 30000,
+  });
+
+  // Create session key
+  await page.getByRole("button", { name: "Create session key" }).click();
+  await expect(page.getByText("Bought 1 ETH")).toBeVisible({
+    timeout: 30000,
+  });
+
+  // Check external links
+  await expect(page.locator("a[aria-label='View transaction']")).toBeVisible();
+  await expect(page.getByRole("link", { name: "Quickstart" })).toHaveAttribute(
+    "href",
+    "https://accountkit.alchemy.com/react/quickstart"
+  );
+  await expect(page.locator("a[aria-label='GitHub']")).toHaveAttribute(
+    "href",
+    "https://github.com/alchemyplatform/aa-sdk/tree/v4.x.x"
+  );
+  await expect(page.getByRole("link", { name: "CSS" })).toHaveAttribute(
+    "href",
+    "https://github.com/alchemyplatform/aa-sdk/blob/v4.x.x/account-kit/react/src/tailwind/types.ts#L6"
+  );
+}
diff --git a/examples/ui-demo/e2e/smart-contract-mint.spec.ts b/examples/ui-demo/e2e/smart-contract-mint.spec.ts
deleted file mode 100644
index 55b2ae044c..0000000000
--- a/examples/ui-demo/e2e/smart-contract-mint.spec.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-const googleEmail = process.env.PLAYWRIGHT_GOOGLE_EMAIL;
-const googlePassword = process.env.PLAYWRIGHT_GOOGLE_PASSWORD;
-
-test.beforeEach(async ({ page, baseURL }) => {
-  await page.goto(baseURL!);
-});
-test("Google sign in", async ({ page }) => {
-  if (!googleEmail || !googlePassword) {
-    throw new Error(
-      "PLAYWRIGHT_GOOGLE_EMAIL and PLAYWRIGHT_GOOGLE_PASSWORD must be set"
-    );
-  }
-  await expect(page).toHaveTitle(/Account Kit/);
-  // Enabling and disabling email to ensure config is loaded
-  // TODO: find a better way to determine init complete.
-  await page.getByRole("switch", { name: "Email" }).click();
-  await page.getByRole("switch", { name: "Email" }).click();
-  await page.locator("button[aria-label='Google sign in']").click();
-  const pagePromise = page.waitForEvent("popup");
-  const popup = await pagePromise;
-  await popup.waitForLoadState("networkidle");
-  const emailInput = await popup.getByRole("textbox");
-
-  await emailInput.fill(googleEmail);
-  await popup.getByRole("button", { name: /Next/i }).click();
-  await expect(popup.getByText(/Enter your password/i)).toBeVisible();
-  const passwordInput = await popup.locator("input[type='password']:visible");
-  await passwordInput.fill(googlePassword);
-  await popup.getByRole("button", { name: /Next/i }).click();
-
-  // Wait for the page to load after sign in
-  await expect(page.getByText(/One-click checkout/i).first()).toBeVisible();
-  const avatar = await page.getByRole("button", {
-    name: `Hello, ${googleEmail}`,
-  });
-  expect(avatar).toBeVisible();
-  await page.locator("img[alt='An NFT']");
-
-  // Collect NFT
-  await page.getByRole("button", { name: "Collect NFT" }).click();
-  await expect(await page.getByText("Success", { exact: true })).toBeVisible({
-    timeout: 30000,
-  });
-
-  // Check external links
-  await expect(
-    page.getByRole("link", { name: "View transaction" })
-  ).toBeVisible();
-  await expect(
-    await page.getByRole("link", { name: "Build with Account kit" })
-  ).toHaveAttribute(
-    "href",
-    "https://dashboard.alchemy.com/accounts?utm_source=demo_alchemy_com&utm_medium=referral&utm_campaign=demo_to_dashboard"
-  );
-  await expect(
-    await page.getByRole("link", { name: "Learn how." })
-  ).toHaveAttribute("href", "https://accountkit.alchemy.com/react/sponsor-gas");
-  await expect(
-    await page.getByRole("link", { name: "View docs" })
-  ).toHaveAttribute("href", "https://accountkit.alchemy.com/react/quickstart");
-  await expect(
-    await page.getByRole("link", { name: "Quickstart" })
-  ).toHaveAttribute("href", "https://accountkit.alchemy.com/react/quickstart");
-  await expect(await page.locator("a[aria-label='GitHub']")).toHaveAttribute(
-    "href",
-    "https://github.com/alchemyplatform/aa-sdk/tree/v4.x.x"
-  );
-  await expect(await page.getByRole("link", { name: "CSS" })).toHaveAttribute(
-    "href",
-    "https://github.com/alchemyplatform/aa-sdk/blob/v4.x.x/account-kit/react/src/tailwind/types.ts#L6"
-  );
-});
diff --git a/examples/ui-demo/e2e/smart-contract.spec.ts b/examples/ui-demo/e2e/smart-contract.spec.ts
new file mode 100644
index 0000000000..66d3d50abc
--- /dev/null
+++ b/examples/ui-demo/e2e/smart-contract.spec.ts
@@ -0,0 +1,26 @@
+import { test, expect } from "@playwright/test";
+import { mintWithGoogleAuthWorkflow } from "./helpers/mintWorkflow";
+const googleEmail = process.env.PLAYWRIGHT_GOOGLE_EMAIL;
+const googlePassword = process.env.PLAYWRIGHT_GOOGLE_PASSWORD;
+
+test.beforeEach(async ({ page, baseURL }) => {
+  await page.goto(baseURL!);
+});
+test("Google sign in", async ({ page }) => {
+  if (!googleEmail || !googlePassword) {
+    throw new Error(
+      "PLAYWRIGHT_GOOGLE_EMAIL and PLAYWRIGHT_GOOGLE_PASSWORD must be set"
+    );
+  }
+  await expect(page).toHaveTitle(/Account Kit/);
+  // Fast way to initialize the page and ensure config is loaded
+  await page.getByRole("switch", { name: "Email" }).click();
+  await page.getByRole("switch", { name: "Email" }).click();
+
+  const walletSwitch = await page.locator("#wallet-switch");
+  if ((await walletSwitch.getAttribute("aria-checked")) === "true") {
+    await walletSwitch.click();
+  }
+
+  await mintWithGoogleAuthWorkflow(page, googleEmail, googlePassword);
+});
diff --git a/examples/ui-demo/src/components/configuration/Configuration.tsx b/examples/ui-demo/src/components/configuration/Configuration.tsx
index 1f6cee70c9..f613bf43c4 100644
--- a/examples/ui-demo/src/components/configuration/Configuration.tsx
+++ b/examples/ui-demo/src/components/configuration/Configuration.tsx
@@ -27,13 +27,16 @@ export const Configuration = ({ className }: { className?: string }) => {
         <span className="font-semibold">Configuration</span>
       </div>
       <div className="flex flex-row items-center gap-2 pb-2">
-        <h4 className="font-normal text-sm text-secondary-foreground">
+        <label
+          className="font-normal text-sm text-secondary-foreground"
+          htmlFor="wallet-switch"
+        >
           Embedded wallet type
-        </h4>
+        </label>
         {/* <HelpTooltip text="An account powered by a smart contract to enable more features. Not an EOA. Recommended for new wallets." /> */}
       </div>
       <WalletTypeSwitch
-        id="theme-switch"
+        id="wallet-switch"
         checked={walletType === WalletTypes.hybrid7702}
         onCheckedChange={onSwitchWalletType}
       />
diff --git a/examples/ui-demo/src/components/small-cards/MintStages.tsx b/examples/ui-demo/src/components/small-cards/MintStages.tsx
index 2f9dcc6384..6c7c8df649 100644
--- a/examples/ui-demo/src/components/small-cards/MintStages.tsx
+++ b/examples/ui-demo/src/components/small-cards/MintStages.tsx
@@ -27,7 +27,12 @@ export const MintStages = ({
           <span className="flex gap-3 justify-between">
             Deploying your smart account...
             {status.batch === "success" && transactionUrl && (
-              <a href={transactionUrl} target="_blank" rel="noreferrer">
+              <a
+                href={transactionUrl}
+                target="_blank"
+                rel="noreferrer"
+                aria-label="View transaction"
+              >
                 <ExternalLinkIcon className="stroke-fg-secondary w-4 h-4" />
               </a>
             )}