Refactor connect complete

Author: incorbador

packages/tests-e2e/README.md

@@ -56,3 +56,11 @@ echo  $JWT
 The first segment of the script contains all the information that must be extracted from the backend deployment.
 
 As evident in the script, the token is valid for around 34 days. The token is intended to be renewed monthly using this script. For rewnewal, it is not necessary to extract all the information in the first segment.
+
+## Authoring rules (connect2)
+
+- Knowledge about page structure lives in `/models` only. Scenarios call model methods, not raw selectors.
+- All passkey authenticator interactions flow through `VirtualAuthenticator`.
+- All TOTP authenticator interactions flow through `AuthenticatorApp`.
+- Scenarios set up app state via navigation helpers and avoid duplicating UI logic.
+- Prefer explicit `awaitPage/visible` checks when changing screens.

packages/tests-e2e/playwright.config.connect.ts

@@ -2,7 +2,7 @@ import { defineConfig } from '@playwright/test';
 import dotenv from 'dotenv';
 import path from 'path';
 
-import { operationTimeout, totalTimeout } from './src/connect/utils/Constants';
+const operationTimeout = 5000;
 
 if (process.env.CI) {
   dotenv.config({ path: path.resolve(__dirname, '.env.connect.ci'), override: true });
@@ -11,35 +11,16 @@ if (process.env.CI) {
 }
 
 export default defineConfig({
-  testDir: './src/connect2',
-  // fullyParallel: true,
+  testDir: './src/connect',
   forbidOnly: !!process.env.CI,
   retries: 4,
   workers: process.env.CI
     ? process.env.PLAYWRIGHT_NUM_CORES
       ? parseInt(process.env.PLAYWRIGHT_NUM_CORES, 10) - 1
       : undefined
     : undefined,
-  reporter: [
-    // [
-    //   '../../node_modules/playwright-slack-report/dist/src/SlackReporter.js',
-    //   {
-    //     channels: ['corbado-tests'],
-    //     sendResults: 'always',
-    //     showInThread: true,
-    //     meta: [
-    //       {
-    //         key: 'Test Run Info',
-    //         value: `https://github.com/corbado/javascript/actions/runs/${process.env.GITHUB_RUN_ID}`,
-    //       },
-    //       { key: 'branch', value: `${process.env.GITHUB_BRANCH_NAME}` },
-    //     ],
-    //   },
-    // ],
-    ['html'],
-    ['junit', { outputFile: 'test-results/results.xml' }],
-  ],
-  timeout: totalTimeout, // default: 30000ms
+  reporter: [['html'], ['junit', { outputFile: 'test-results/results.xml' }]],
+  timeout: 120000, // default: 30000ms
   expect: {
     timeout: operationTimeout, // default: 5000ms
   },
@@ -48,16 +29,23 @@ export default defineConfig({
       'Mozilla/5.0 (Macintosh; Intel Mac OS X 15.3.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36',
     actionTimeout: operationTimeout, // default: none
     navigationTimeout: operationTimeout, // default: none
-    // baseURL: process.env.PLAYWRIGHT_TEST_URL,
     screenshot: 'only-on-failure',
     video: 'retain-on-failure',
     trace: 'retain-on-failure',
   },
   projects: [
     {
-      name: 'append-component',
+      name: 'append',
       testMatch: ['scenarios/append.spec.ts'],
     },
+    {
+      name: 'login',
+      testMatch: ['scenarios/login.spec.ts'],
+    },
+    {
+      name: 'network-blocking',
+      testMatch: ['scenarios/network-blocking.spec.ts'],
+    },
   ],
   globalSetup: 'src/connect/utils/Playground.ts',
 });

packages/tests-e2e/src/connect/fixtures/BaseTest.ts

@@ -17,6 +17,10 @@ export abstract class BasePage {
     return this.page.getByRole('link', { name: label }).click();
   }
 
+  clickText(text: string): Promise<void> {
+    return this.page.getByText(text).click();
+  }
+
   async waitForHeading(text: string): Promise<boolean> {
     try {
       await this.page.getByRole('heading', { name: text }).waitFor({ state: 'visible', timeout: 10000 });
@@ -56,4 +60,20 @@ export abstract class BasePage {
   expectText(text: string): Promise<void> {
     return this.page.getByText(text).waitFor({ state: 'visible' });
   }
+
+  // client-state
+  async clearProcessState(): Promise<void> {
+    return this.localStorageClearByPrefix('cbo_connect_process');
+  }
+
+  private localStorageClearByPrefix(prefix: string): Promise<void> {
+    return this.page.evaluate(prefix => {
+      for (let i = localStorage.length - 1; i >= 0; i--) {
+        const key = localStorage.key(i);
+        if (key && key.startsWith(prefix)) {
+          localStorage.removeItem(key);
+        }
+      }
+    }, prefix);
+  }
 }