change tests to handle auto append

Author: aehnh

packages/tests-e2e/src/connect/models/BaseModel.ts

@@ -32,14 +32,14 @@ export class BaseModel {
     this.page = page;
     this.authenticator = authenticator;
     this.blocker = blocker;
-    this.signup = new SignupModel(page);
+    this.signup = new SignupModel(page, authenticator);
     this.login = new LoginModel(page, authenticator);
     this.append = new AppendModel(page, authenticator);
     this.home = new HomeModel(page);
     this.passkeyList = new PasskeyListModel(page, authenticator);
     this.webhook = new WebhookModel(page);
     this.storage = new StorageModel(page);
-    this.mfa = new MFAModel(page);
+    this.mfa = new MFAModel(page, authenticator);
   }
 
   loadSignup() {
@@ -64,17 +64,20 @@ export class BaseModel {
 
   async createUser(invited: boolean, append: boolean) {
     this.email = await this.signup.autofillCredentials();
-    await this.signup.submit();
-    this.mfa.registerTokenUsed();
     if (invited) {
-      await this.expectScreen(ScreenNames.PasskeyAppend);
       if (append) {
-        await this.append.appendPasskey(true);
+        await this.signup.autoAppendPasskey(true);
         await this.expectScreen(ScreenNames.PasskeyAppended);
         await this.append.confirmAppended();
       } else {
+        // todo: figure out how to wait until continue button no longer has loading sign
+        await this.signup.autoAppendPasskey(false);
+        await this.expectScreen(ScreenNames.PasskeyAppend);
         await this.append.skipAppend();
       }
+    } else {
+      await this.signup.submit();
     }
+    this.mfa.registerTokenUsed();
   }
 }

packages/tests-e2e/src/connect/models/MFAModel.ts

@@ -1,12 +1,18 @@
 import type { Page } from '@playwright/test';
 import { expect } from '@playwright/test';
 
+import { ScreenNames } from '../utils/Constants';
+import { expectScreen } from '../utils/ExpectScreen';
+import type { VirtualAuthenticator } from '../utils/VirtualAuthenticator';
+
 export class MFAModel {
   page: Page;
+  authenticator: VirtualAuthenticator;
   timestamp: number;
 
-  constructor(page: Page) {
+  constructor(page: Page, authenticator: VirtualAuthenticator) {
     this.page = page;
+    this.authenticator = authenticator;
     this.timestamp = Date.now();
   }
 
@@ -24,4 +30,16 @@ export class MFAModel {
   submit() {
     return this.page.getByRole('button', { name: 'Submit' }).click();
   }
+
+  autoAppendPasskey(complete: boolean) {
+    const operationTrigger = () => this.page.getByRole('button', { name: 'Submit' }).click();
+    if (complete) {
+      return this.authenticator.startAndCompletePasskeyOperation(operationTrigger);
+    } else {
+      return this.authenticator.startAndCancelPasskeyOperation(operationTrigger, async () => {
+        await expectScreen(this.page, ScreenNames.PasskeyAppend);
+        await this.page.waitForSelector('.button-loading-container', { state: 'detached' });
+      });
+    }
+  }
 }

packages/tests-e2e/src/connect/models/SignupModel.ts

@@ -1,10 +1,16 @@
 import type { Page } from '@playwright/test';
 
+import type { VirtualAuthenticator } from '../utils/VirtualAuthenticator';
+import { ScreenNames } from '../utils/Constants';
+import { expectScreen } from '../utils/ExpectScreen';
+
 export class SignupModel {
   page: Page;
+  authenticator: VirtualAuthenticator;
 
-  constructor(page: Page) {
+  constructor(page: Page, authenticator: VirtualAuthenticator) {
     this.page = page;
+    this.authenticator = authenticator;
   }
 
   async autofillCredentials(): Promise<string> {
@@ -15,4 +21,16 @@ export class SignupModel {
   submit() {
     return this.page.getByRole('button', { name: 'Sign up' }).click();
   }
+
+  autoAppendPasskey(complete: boolean) {
+    const operationTrigger = () => this.page.getByRole('button', { name: 'Sign up' }).click();
+    if (complete) {
+      return this.authenticator.startAndCompletePasskeyOperation(operationTrigger);
+    } else {
+      return this.authenticator.startAndCancelPasskeyOperation(operationTrigger, async () => {
+        await expectScreen(this.page, ScreenNames.PasskeyAppend);
+        await this.page.waitForSelector('.button-loading-container', { state: 'detached' });
+      });
+    }
+  }
 }

packages/tests-e2e/src/connect/scenarios/append.spec.ts

@@ -2,30 +2,38 @@ import { expect } from '@playwright/test';
 
 import { test } from '../fixtures/BaseTest';
 import { password, ScreenNames } from '../utils/Constants';
-import { loadPasskeyAppend, setupNetworkBlocker, setupUser, setupVirtualAuthenticator } from './hooks';
+import {
+  loadBeforePasskeyAppend,
+  setupNetworkBlocker,
+  setupUser,
+  setupVirtualAuthenticator,
+} from './hooks';
 
 test.describe('append component', () => {
   setupVirtualAuthenticator(test);
   setupNetworkBlocker(test);
   setupUser(test, true, false);
-  loadPasskeyAppend(test);
+  loadBeforePasskeyAppend(test);
 
   test('successful passkey append on login', async ({ model }) => {
-    await model.append.appendPasskey(true);
+    // await model.append.appendPasskey(true);
+    await model.mfa.autoAppendPasskey(true);
     await model.expectScreen(ScreenNames.PasskeyAppended);
 
     await model.append.confirmAppended();
     await model.expectScreen(ScreenNames.Home);
   });
 
   test('failed passkey append on login', async ({ model }) => {
-    await model.append.appendPasskey(false);
+    // await model.append.appendPasskey(false);
+    await model.mfa.autoAppendPasskey(false);
   });
 
   test('Corbado FAPI unavailable after authentication', async ({ model }) => {
     await model.blocker.blockCorbadoFAPIFinishEndpoint();
 
-    await model.append.appendPasskey(true);
+    // await model.append.appendPasskey(true);
+    await model.mfa.autoAppendPasskey(true);
     await model.expectScreen(ScreenNames.Home);
   });
 });

packages/tests-e2e/src/connect/scenarios/hooks.ts

@@ -83,7 +83,7 @@ export function setupUser(
 }
 
 // assumes that setupUser(test, true, false) has been called right before
-export function loadPasskeyAppend(
+export function loadBeforePasskeyAppend(
   test: TestType<
     PlaywrightTestArgs & PlaywrightTestOptions & { model: BaseModel },
     PlaywrightWorkerArgs & PlaywrightWorkerOptions
@@ -100,8 +100,8 @@ export function loadPasskeyAppend(
     await model.expectScreen(ScreenNames.MFA);
 
     await model.mfa.autofillTOTP();
-    await model.mfa.submit();
-    await model.expectScreen(ScreenNames.PasskeyAppend);
+    // await model.mfa.submit();
+    // await model.expectScreen(ScreenNames.PasskeyAppend);
   });
 }
 

packages/tests-e2e/src/connect/scenarios/login.spec.ts

@@ -35,8 +35,9 @@ test.describe('login component (with invitation token, without passkeys)', () =>
     await model.expectScreen(ScreenNames.MFA);
 
     await model.mfa.autofillTOTP();
-    await model.mfa.submit();
-    await model.expectScreen(ScreenNames.PasskeyAppend);
+    // await model.mfa.submit();
+    // await model.expectScreen(ScreenNames.PasskeyAppend);
+    await model.mfa.autoAppendPasskey(false);
 
     await model.append.skipAppend();
     await model.expectScreen(ScreenNames.Home);

packages/tests-e2e/src/connect/scenarios/misc.spec.ts

@@ -1,7 +1,7 @@
 import { test } from '../fixtures/BaseTest';
 import { ScreenNames, WebhookTypes } from '../utils/Constants';
 import {
-  loadPasskeyAppend,
+  loadBeforePasskeyAppend,
   loadPasskeyList,
   setupNetworkBlocker,
   setupUser,
@@ -34,11 +34,12 @@ test.describe.serial('webhook tests', () => {
     setupVirtualAuthenticator(test);
     setupNetworkBlocker(test);
     setupUser(test, true, false);
-    loadPasskeyAppend(test);
+    loadBeforePasskeyAppend(test);
     setupWebhooks(test, [WebhookTypes.Create]);
 
     test('successful passkey append on login (+ webhook)', async ({ model }) => {
-      await model.append.appendPasskey(true);
+      // await model.append.appendPasskey(true);
+      await model.mfa.autoAppendPasskey(true);
       await model.expectScreen(ScreenNames.PasskeyAppended);
 
       await model.append.confirmAppended();