From 0f9e04e00ac38ba90945824b138bfdc0dda29cae Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Thu, 8 Aug 2024 19:43:16 +0200
Subject: [PATCH] Extract keychain connection logic

---
 .../starknet-react-next/tests/connect.spec.ts | 51 +++++--------------
 .../starknet-react-next/tests/keychain.ts     | 40 +++++++++++++++
 .../starknet-react-next/tests/webauthn.ts     |  4 +-
 3 files changed, 55 insertions(+), 40 deletions(-)
 create mode 100644 examples/starknet-react-next/tests/keychain.ts

diff --git a/examples/starknet-react-next/tests/connect.spec.ts b/examples/starknet-react-next/tests/connect.spec.ts
index 19b000179..09d9883bd 100644
--- a/examples/starknet-react-next/tests/connect.spec.ts
+++ b/examples/starknet-react-next/tests/connect.spec.ts
@@ -1,52 +1,27 @@
 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", async ({ page }) => {
+  const keychain = new Keychain({ page });
+  await keychain.signup();
 
-    await expect(
-      modal.getByText("Play with Cartridge Controller"),
-    ).toBeVisible();
-    await expect(
-      modal.getByText("Create your Cartridge Controller"),
-    ).toBeVisible();
-
-    const username = `test-${Date.now()}`;
-    await modal.getByPlaceholder("Username").fill(username);
-    await modal.getByText("SIGN UP").click();
-
-    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();
+test("Log in", async ({ page }) => {
+  const keychain = new Keychain({ page });
+  await keychain.signup();
+  await keychain.disconnect();
+  await keychain.login();
 
-//     await expect(page.getByText("Address: ")).toBeVisible();
-//   });
-// });
+  await expect(page.getByText(`Username: ${keychain.username}`)).toBeVisible();
+});
diff --git a/examples/starknet-react-next/tests/keychain.ts b/examples/starknet-react-next/tests/keychain.ts
new file mode 100644
index 000000000..4d4991548
--- /dev/null
+++ b/examples/starknet-react-next/tests/keychain.ts
@@ -0,0 +1,40 @@
+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();
+    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)}`;
+  }
+}
diff --git a/examples/starknet-react-next/tests/webauthn.ts b/examples/starknet-react-next/tests/webauthn.ts
index 93c24cf22..5a5fbed8a 100644
--- a/examples/starknet-react-next/tests/webauthn.ts
+++ b/examples/starknet-react-next/tests/webauthn.ts
@@ -2,7 +2,7 @@ import { CDPSession } from "@playwright/test";
 
 export async function addVirtualAuthenticator(client: CDPSession) {
   await client.send("WebAuthn.enable");
-  const {} = await client.send("WebAuthn.addVirtualAuthenticator", {
+  await client.send("WebAuthn.addVirtualAuthenticator", {
     options: {
       protocol: "ctap2",
       transport: "ble",
@@ -18,7 +18,7 @@ export class WebauthnEmulator {
   private client: CDPSession;
   public authenticatorId?: string;
 
-  constructor(client: CDPSession) {
+  constructor({ client }: { client: CDPSession }) {
     this.client = client;
   }