Extract keychain connection logic

examples/starknet-react-next/tests/connect.spec.ts

@@ -1,52 +1,23 @@
 import { test, expect } from "@playwright/test";
 import { WebauthnEmulator } from "./webauthn";
+import { Keychain } from "./keychain";
 
 test.beforeEach(async ({ page }) => {
   await page.goto("/");
   const client = await page.context().newCDPSession(page);
-  const webauthn = new WebauthnEmulator(client);
+  const webauthn = new WebauthnEmulator({ client });
   await webauthn.enable();
   await webauthn.addVirtualAuthenticator();
 });
 
-test.describe("Sign up", () => {
-  test("should allow user to sign up and connect to Controller", async ({
-    page,
-  }) => {
-    await page.getByText("Connect").click();
-    const modal = page.frameLocator("#cartridge-modal");
+test("Sign up -> Disconnect -> Log in", async ({ page }) => {
+  const keychain = new Keychain({ page });
+  await keychain.signup();
+  await keychain.session();
 
-    await expect(
-      modal.getByText("Play with Cartridge Controller"),
-    ).toBeVisible();
-    await expect(
-      modal.getByText("Create your Cartridge Controller"),
-    ).toBeVisible();
+  await keychain.disconnect();
 
-    const username = `test-${Date.now()}`;
-    await modal.getByPlaceholder("Username").fill(username);
-    await modal.getByText("SIGN UP").click();
+  await keychain.login();
 
-    await expect(modal.getByText("Create Session").first()).toBeVisible();
-    await modal.getByRole("button", { name: "CREATE SESSION" }).click();
-
-    await expect(page.getByText(`Username: ${username}`)).toBeVisible();
-  });
+  await expect(page.getByText(`Username: ${keychain.username}`)).toBeVisible();
 });
-
-// test.describe("Log in", () => {
-//   test("should allow me to login and connect to Controller", async ({
-//     page,
-//   }) => {
-//     await page.getByText("Connect").click();
-//     const modal = page.frameLocator("#cartridge-modal");
-//     await modal.getByText("Log In").click();
-//     await expect(
-//       modal.getByText("Play with Cartridge Controller"),
-//     ).toBeVisible();
-//     await modal.getByPlaceholder("Username").fill("test-1");
-//     await modal.getByText("LOG IN").click();
-
-//     await expect(page.getByText("Address: ")).toBeVisible();
-//   });
-// });

examples/starknet-react-next/tests/keychain.ts

@@ -0,0 +1,43 @@
+import { FrameLocator } from "@playwright/test";
+import { Page } from "@playwright/test";
+
+export class Keychain {
+  private page: Page;
+  private modal: FrameLocator;
+  public username: string;
+
+  constructor({ page, username }: { page: Page; username?: string }) {
+    this.page = page;
+    this.modal = page.frameLocator("#cartridge-modal");
+    this.username = username ?? this.randomUsername();
+  }
+
+  async signup() {
+    await this.connect();
+    await this.modal.getByPlaceholder("Username").fill(this.username);
+    await this.modal.getByText("SIGN UP").click();
+  }
+
+  async session() {
+    await this.modal.getByRole("button", { name: "CREATE SESSION" }).click();
+  }
+
+  async login() {
+    await this.connect();
+    await this.modal.getByText("Log In").click();
+    await this.modal.getByPlaceholder("Username").fill(this.username);
+    await this.modal.getByText("LOG IN").click();
+  }
+
+  disconnect() {
+    return this.page.getByText("Disconnect").click();
+  }
+
+  private connect() {
+    return this.page.getByText("Connect").click();
+  }
+
+  private randomUsername() {
+    return `test-${Math.random().toString().slice(2, -1)}`;
+  }
+}

examples/starknet-react-next/tests/metadata.spec.ts

@@ -4,6 +4,6 @@ test.beforeEach(async ({ page }) => {
   await page.goto("/");
 });
 
-test("should have a title", async ({ page }) => {
+test("Page Title", async ({ page }) => {
   await expect(page).toHaveTitle(/StarkNet ❤️ React/);
 });

examples/starknet-react-next/tests/webauthn.ts

@@ -1,24 +1,10 @@
 import { CDPSession } from "@playwright/test";
 
-export async function addVirtualAuthenticator(client: CDPSession) {
-  await client.send("WebAuthn.enable");
-  const {} = await client.send("WebAuthn.addVirtualAuthenticator", {
-    options: {
-      protocol: "ctap2",
-      transport: "ble",
-      hasResidentKey: true,
-      hasUserVerification: true,
-      isUserVerified: true,
-      automaticPresenceSimulation: true,
-    },
-  });
-}
-
 export class WebauthnEmulator {
   private client: CDPSession;
   public authenticatorId?: string;
 
-  constructor(client: CDPSession) {
+  constructor({ client }: { client: CDPSession }) {
     this.client = client;
   }