feat: add passkey login to nextjs example template

e2e/example.spec.ts

@@ -1,89 +1,98 @@
 import {testWithII} from '@dfinity/internet-identity-playwright';
-import {initTestSuite} from './utils/init.utils';
+import {initTestSuiteWithInternetIdentity, initTestSuiteWithPasskey} from './utils/init.utils';
 
-const getExamplePage = initTestSuite();
+testWithII.describe.configure({mode: 'serial'});
 
-testWithII('should sign-in', async () => {
-  const examplePage = getExamplePage();
+[
+  {title: 'With II', initExamplePage: initTestSuiteWithInternetIdentity},
+  {title: 'With Passkey', initExamplePage: initTestSuiteWithPasskey}
+].forEach(({title, initExamplePage}) => {
+  testWithII.describe(title, () => {
+    const getExamplePage = initExamplePage();
 
-  await examplePage.assertSignedIn();
-});
+    testWithII('should sign-in', async () => {
+      const examplePage = getExamplePage();
 
-testWithII('should add an entry', async () => {
-  const examplePage = getExamplePage();
+      await examplePage.assertSignedIn();
+    });
 
-  await examplePage.addEntry('My notes.');
-});
+    testWithII('should add an entry', async () => {
+      const examplePage = getExamplePage();
 
-testWithII('should add an entry with file', async () => {
-  const examplePage = getExamplePage();
+      await examplePage.addEntry('My notes.');
+    });
 
-  await examplePage.addEntryWithFile({
-    text: 'My file.',
-    filePath: 'e2e/data/dog.jpg'
-  });
+    testWithII('should add an entry with file', async () => {
+      const examplePage = getExamplePage();
 
-  await examplePage.assertUploadedImage();
-});
+      await examplePage.addEntryWithFile({
+        text: 'My file.',
+        filePath: 'e2e/data/dog.jpg'
+      });
 
-const lastEntryText = 'My last note.';
+      await examplePage.assertUploadedImage();
+    });
 
-testWithII('should add another entry', async () => {
-  const examplePage = getExamplePage();
+    const lastEntryText = 'My last note.';
 
-  await examplePage.addEntry(lastEntryText);
-});
+    testWithII('should add another entry', async () => {
+      const examplePage = getExamplePage();
 
-testWithII('should delete entry', async () => {
-  const examplePage = getExamplePage();
+      await examplePage.addEntry(lastEntryText);
+    });
 
-  await examplePage.deleteLastEntry();
-});
+    testWithII('should delete entry', async () => {
+      const examplePage = getExamplePage();
 
-testWithII('should sign-out', async () => {
-  const examplePage = getExamplePage();
+      await examplePage.deleteLastEntry();
+    });
 
-  await examplePage.signOut();
+    testWithII('should sign-out', async () => {
+      const examplePage = getExamplePage();
 
-  await examplePage.assertSignedOut();
-});
+      await examplePage.signOut();
 
-// TODO: testWithII does not seem to support setting dark or light mode so for now we just use screenshot of default mode
+      await examplePage.assertSignedOut();
+    });
 
-testWithII('match login screenshot', async () => {
-  const examplePage = getExamplePage();
+    // TODO: testWithII does not seem to support setting dark or light mode so for now we just use screenshot of default mode
 
-  await examplePage.assertSignedOut();
+    testWithII('match login screenshot', async () => {
+      const examplePage = getExamplePage();
 
-  await examplePage.assertScreenshot({mode: 'current', name: 'login'});
-});
+      await examplePage.assertSignedOut();
 
-testWithII('match logged in screenshot', async () => {
-  const examplePage = getExamplePage();
+      await examplePage.assertScreenshot({mode: 'current', name: 'login'});
+    });
 
-  await examplePage.signInWithIdentity();
+    testWithII('match logged in screenshot', async () => {
+      const examplePage = getExamplePage();
 
-  await examplePage.assertSignedIn();
+      await examplePage.signIn();
 
-  await examplePage.assertScreenshot({mode: 'current', name: 'logged-in'});
-});
+      await examplePage.assertSignedIn();
 
-testWithII('match modal screenshot', async () => {
-  const examplePage = getExamplePage();
+      await examplePage.assertScreenshot({mode: 'current', name: 'logged-in'});
+    });
 
-  await examplePage.openAddEntry();
+    testWithII('match modal screenshot', async () => {
+      const examplePage = getExamplePage();
 
-  await examplePage.assertScreenshot({mode: 'current', name: 'modal'});
+      await examplePage.openAddEntry();
 
-  await examplePage.closeAddEntryModal();
-});
+      await examplePage.assertScreenshot({mode: 'current', name: 'modal'});
+
+      await examplePage.closeAddEntryModal();
+    });
 
-testWithII('match logout screenshot', async () => {
-  const examplePage = getExamplePage();
+    testWithII('match logout screenshot', async () => {
+      const examplePage = getExamplePage();
 
-  await examplePage.signOut();
+      await examplePage.signOut();
 
-  await examplePage.assertSignedOut();
+      await examplePage.assertSignedOut();
 
-  await examplePage.assertScreenshot({mode: 'current', name: 'logout'});
+      await examplePage.assertScreenshot({mode: 'current', name: 'logout'});
+    });
+  });
 });

e2e/page-objects/app.page.ts

@@ -13,15 +13,25 @@ export abstract class AppPage {
 
   protected readonly callToActions = {
     logout: 'Logout',
-    continue_with_ii: 'Sign in',
     add_an_entry: 'Add an entry',
-    submit: 'Submit'
+    submit: 'Submit',
+    internet_identity: {
+      continue: 'Continue with Internet Identity'
+    },
+    passkey: {
+      continue: 'Continue with Passkey',
+      create: 'Create a new passkey',
+      create_now: 'Create now',
+      use: 'Use your Passkey'
+    }
   };
 
   protected readonly locators = {
-    sign_in_with_ii: `button:has-text("${this.callToActions.continue_with_ii}")`,
     open_data: 'a[aria-label="Open data"]',
-    delete_entry: 'button[aria-label="Delete entry"]'
+    delete_entry: 'button[aria-label="Delete entry"]',
+    internet_identity: {
+      sign_in: `button:has-text("${this.callToActions.internet_identity.continue}")`
+    }
   };
 
   protected constructor({page, context, browser}: AppPageParams) {
@@ -30,6 +40,12 @@ export abstract class AppPage {
     this.browser = browser;
   }
 
+  waitReady?(): Promise<void>;
+
+  cleanUp?(): Promise<void>;
+
+  abstract signUp(): Promise<void>;
+
   abstract signIn(): Promise<void>;
 
   async signOut(): Promise<void> {
@@ -39,5 +55,6 @@ export abstract class AppPage {
 
   async close(): Promise<void> {
     await this.page.close();
+    await this.browser.close();
   }
 }

e2e/page-objects/example.ii.page.ts

@@ -0,0 +1,46 @@
+import {InternetIdentityPage} from '@dfinity/internet-identity-playwright';
+import {assertNonNullish} from '@dfinity/utils';
+import type {AppPageParams} from './app.page';
+import {ExamplePage} from './example.page';
+
+export class ExampleInternetIdentityPage extends ExamplePage {
+  #identity: number | undefined;
+
+  #iiPage: InternetIdentityPage;
+
+  private constructor(params: AppPageParams) {
+    super(params);
+
+    this.#iiPage = new InternetIdentityPage({
+      page: this.page,
+      context: this.context,
+      browser: this.browser
+    });
+  }
+
+  static async create(params: AppPageParams): Promise<ExampleInternetIdentityPage> {
+    return new ExampleInternetIdentityPage(params);
+  }
+
+  override async waitReady(): Promise<void> {
+    const REPLICA_URL = 'http://127.0.0.1:5987';
+    const INTERNET_IDENTITY_ID = 'rdmx6-jaaaa-aaaaa-aaadq-cai';
+
+    await this.#iiPage.waitReady({url: REPLICA_URL, canisterId: INTERNET_IDENTITY_ID});
+  }
+
+  override async signUp(): Promise<void> {
+    this.#identity = await this.#iiPage.signInWithNewIdentity({
+      selector: this.locators.internet_identity.sign_in
+    });
+  }
+
+  override async signIn(): Promise<void> {
+    assertNonNullish(this.#identity);
+
+    await this.#iiPage.signInWithIdentity({
+      identity: this.#identity,
+      selector: this.locators.internet_identity.sign_in
+    });
+  }
+}

e2e/page-objects/example.page.ts

@@ -1,55 +1,19 @@
-import {InternetIdentityPage} from '@dfinity/internet-identity-playwright';
-import {assertNonNullish} from '@dfinity/utils';
 import {expect} from '@playwright/test';
-import {AppPage, AppPageParams} from './app.page';
-
-export class ExamplePage extends AppPage {
-  #identity: number | undefined;
-
-  #iiPage: InternetIdentityPage;
-
-  constructor(params: AppPageParams) {
-    super(params);
-
-    this.#iiPage = new InternetIdentityPage({
-      page: this.page,
-      context: this.context,
-      browser: this.browser
-    });
-  }
-
-  override async signIn(): Promise<void> {
-    this.#identity = await this.#iiPage.signInWithNewIdentity({
-      selector: this.locators.sign_in_with_ii
-    });
-  }
-
-  async signInWithIdentity(): Promise<void> {
-    assertNonNullish(this.#identity);
-
-    await this.#iiPage.signInWithIdentity({
-      identity: this.#identity,
-      selector: this.locators.sign_in_with_ii
-    });
-  }
+import {AppPage} from './app.page';
 
+export abstract class ExamplePage extends AppPage {
   async assertSignedIn(): Promise<void> {
     const button = this.page.locator('button', {hasText: this.callToActions.logout});
     await expect(button).toBeVisible();
   }
 
   async assertSignedOut(): Promise<void> {
-    const button = this.page.locator('button', {hasText: this.callToActions.continue_with_ii});
+    const button = this.page.locator('button', {
+      hasText: this.callToActions.internet_identity.continue
+    });
     await expect(button).toBeVisible();
   }
 
-  async waitReady(): Promise<void> {
-    const REPLICA_URL = 'http://127.0.0.1:5987';
-    const INTERNET_IDENTITY_ID = 'rdmx6-jaaaa-aaaaa-aaadq-cai';
-
-    await this.#iiPage.waitReady({url: REPLICA_URL, canisterId: INTERNET_IDENTITY_ID});
-  }
-
   async goto(): Promise<void> {
     await this.page.goto('/');
   }