feat: 7702 e2e tests (#1369)

.eslintignore

@@ -16,4 +16,6 @@ account-kit/rn-signer/lib/*
 **/build/*
 **/.cxx/*
 
-**/vendor/*
+**/vendor/*
+**/test-results/*
+**/playwright-report/*

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

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

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

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}
       />

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>
             )}