diff --git a/examples/starknet-react-next/tests/connect.spec.ts b/examples/starknet-react-next/tests/connect.spec.ts index 19b000179..5a318990a 100644 --- a/examples/starknet-react-next/tests/connect.spec.ts +++ b/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(); -// }); -// }); diff --git a/examples/starknet-react-next/tests/keychain.ts b/examples/starknet-react-next/tests/keychain.ts new file mode 100644 index 000000000..253a30384 --- /dev/null +++ b/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)}`; + } +} diff --git a/examples/starknet-react-next/tests/metadata.spec.ts b/examples/starknet-react-next/tests/metadata.spec.ts index 0e80bb5f7..8910b4f1a 100644 --- a/examples/starknet-react-next/tests/metadata.spec.ts +++ b/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/); }); diff --git a/examples/starknet-react-next/tests/webauthn.ts b/examples/starknet-react-next/tests/webauthn.ts index 93c24cf22..05d5197ba 100644 --- a/examples/starknet-react-next/tests/webauthn.ts +++ b/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; }