improve playwright tests

Author: ChibiBlasphem

package.json

@@ -27,6 +27,18 @@
     "overrides": {
       "cookie": "^0.7.2",
       "cross-spawn": "^7.0.5"
-    }
+    },
+    "ignoredBuiltDependencies": [
+      "ssh2"
+    ],
+    "onlyBuiltDependencies": [
+      "@firebase/util",
+      "@sentry/cli",
+      "@tailwindcss/oxide",
+      "cpu-features",
+      "esbuild",
+      "lefthook",
+      "protobufjs"
+    ]
   }
 }

packages/app-builder/src/routes/_auth+/sign-in.tsx

@@ -28,7 +28,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const [err, appConfig] = await tryit(() => appConfigRepository.getAppConfig())();
 
   if (err) {
-    console.error('Error fetching app config API');
+    console.error('Error fetching app config API', err);
   }
 
   const url = new URL(request.url);

packages/tests/auth.json

@@ -4,10 +4,10 @@ import { fileURLToPath } from 'url';
 
 test('Initial login page', async ({ page }) => {
   await page.goto('/');
-  await page.waitForURL('/sign-in');
+  await page.waitForURL('/sign-in-email?email=');
 
   await expect(page).toHaveTitle('Marble');
-  await expect(page.getByText('Great rules are built with the Right Tools')).toBeVisible();
+  await expect(page.getByText('Iterate. Improve. Automate.')).toBeVisible();
 });
 
 test('Invalid username', async ({ page }) => {
@@ -23,7 +23,7 @@ test('Invalid username', async ({ page }) => {
     .fill('very-secret');
   await page.getByRole('button', { name: 'Sign in', exact: true }).click();
 
-  await expect(page.getByText('No user account found for this address.')).toBeVisible();
+  await expect(page.getByText('Invalid login credentials.')).toBeVisible();
 });
 
 test('Invalid password', async ({ page }) => {
@@ -39,7 +39,7 @@ test('Invalid password', async ({ page }) => {
     .fill('invalid');
   await page.getByRole('button', { name: 'Sign in', exact: true }).click();
 
-  await expect(page.getByText('Wrong password.')).toBeVisible();
+  await expect(page.getByText('Invalid login credentials.')).toBeVisible();
 });
 
 const authState = path.join(path.dirname(fileURLToPath(import.meta.url)), '../auth.json');

packages/tests/e2e/auth.spec.ts

@@ -4,7 +4,7 @@ import { waitForThen } from 'tests/common/utils';
 
 test('Create new list', async ({ page }) => {
   await page.goto('/lists');
-  
+
   const listName = crypto.randomUUID();
   const values = Array.from({ length: 5 }, () => crypto.randomUUID());
 
@@ -21,10 +21,11 @@ test('Create new list', async ({ page }) => {
   await page.waitForURL('/lists/**');
   await page.waitForLoadState();
 
-  
   for (const value of values) {
-    await waitForThen(page, page.getByRole('button', { name: 'New value' }), async (button) =>
-      await button.click(),
+    await waitForThen(
+      page,
+      page.getByRole('button', { name: 'New value' }),
+      async (button) => await button.click(),
     );
 
     await waitForThen(

packages/tests/e2e/custom-lists.spec.ts

@@ -1,22 +1,24 @@
-import knex from 'knex';
 import crypto from 'crypto';
+import knex from 'knex';
 
-interface Org { id: string; }
+interface Org {
+  id: string;
+}
 
 interface Table {
   table: string;
-  fields: { [key: string]: string};
+  fields: { [key: string]: string };
 }
 
 const TABLES: Table[] = [
   {
     table: 'transactions',
     fields: {
-      'beneficiary': 'String',
-      'amount': 'Float',
-    }
-  }
-]
+      beneficiary: 'String',
+      amount: 'Float',
+    },
+  },
+];
 
 export const setupFixtures = async (dsn: string, apiUrl: string) => {
   const sql = knex({ client: 'pg', connection: dsn });
@@ -26,10 +28,10 @@ export const setupFixtures = async (dsn: string, apiUrl: string) => {
   const hash = crypto.createHash('sha256').update(apiKey).digest();
 
   await sql('api_keys').insert({
-    'org_id': org!.id,
-    'role': 4,
-    'prefix': apiKey.substring(0, 3),
-    'key_hash': hash,
+    org_id: org!.id,
+    role: 4,
+    prefix: apiKey.substring(0, 3),
+    key_hash: hash,
   });
 
   apiUrl = `http://localhost:${apiUrl}`;
@@ -45,12 +47,12 @@ const createTable = async (apiUrl: string, apiKey: string, table: Table) => {
     headers: {
       'x-api-key': apiKey,
     },
-    body: JSON.stringify({ 'name': table.table, 'description': 'Lorem ipsum.' })
+    body: JSON.stringify({ name: table.table, description: 'Lorem ipsum.' }),
   });
 
   if (tableResponse.status != 200) throw new Error('failed to create data model table');
 
-  const tableId = (await tableResponse.json() as { id: string; }).id;
+  const tableId = ((await tableResponse.json()) as { id: string }).id;
 
   for (const [fieldName, fieldType] of Object.entries(table.fields)) {
     const fieldResponse = await fetch(`${apiUrl}/data-model/tables/${tableId}/fields`, {
@@ -59,11 +61,11 @@ const createTable = async (apiUrl: string, apiKey: string, table: Table) => {
         'x-api-key': apiKey,
       },
       body: JSON.stringify({
-        'name': fieldName,
-        'type': fieldType,
+        name: fieldName,
+        type: fieldType,
       }),
     });
 
     if (fieldResponse.status != 200) throw new Error('failed to create data model table field');
   }
-}
+};

packages/tests/e2e/fixtures.ts

@@ -1,27 +1,23 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 import crypto from 'crypto';
 import { waitForThen } from 'tests/common/utils';
 
 test('Create a simple scenario', async ({ page }) => {
   await page.goto('/scenarios');
-  
+
   const scenarioName = crypto.randomUUID();
 
   await page.getByRole('button', { name: 'New Scenario' }).click();
 
   await waitForThen(
     page,
     page.getByRole('textbox', { name: 'Name' }),
-    async (field) => await field.fill(scenarioName), 
+    async (field) => await field.fill(scenarioName),
   );
 
   await page.getByRole('textbox', { name: 'Description' }).fill('DESC');
 
-  await waitForThen(
-    page,
-    page.getByRole('combobox'),
-    async (box) => await box.click(),
-  );
+  await waitForThen(page, page.getByRole('combobox'), async (box) => await box.click());
 
   await page.waitForTimeout(200);
 
@@ -43,11 +39,11 @@ test('Create a simple scenario', async ({ page }) => {
   await page.getByRole('button', { name: 'Select an operand...' }).first().click();
   await page.getByRole('option', { name: 'transactions' }).hover();
   await page.getByText('amount').click();
-  await page.getByRole('combobox').click();
+  await page.getByRole('button', { name: '...' }).first().click();
   await page.getByRole('option', { name: '>' }).click();
   await page.getByRole('button', { name: 'Select an operand...' }).click();
-  await page.getByRole('combobox', { name: 'Select or create an operand' }).fill('100');
-  await page.getByRole('combobox', { name: 'Select or create an operand' }).press('Enter');
+  await page.getByPlaceholder('Select or create an operand').fill('100');
+  await page.getByPlaceholder('Select or create an operand').press('Enter');
   await page.getByRole('button', { name: 'Save' }).click();
   await page.getByRole('link', { name: 'Rules' }).click();
   await page.getByRole('button', { name: 'Add' }).click();
@@ -56,21 +52,23 @@ test('Create a simple scenario', async ({ page }) => {
   await page.getByRole('button', { name: 'Select an operand...' }).first().click();
   await page.getByRole('option', { name: 'transactions' }).hover();
   await page.getByText('amount').click();
-  await page.getByRole('combobox').click();
+  await page.getByRole('button', { name: '...' }).first().click();
   await page.getByRole('option', { name: '>' }).click();
   await page.getByRole('button', { name: 'Select an operand...' }).click();
-  await page.getByRole('combobox', { name: 'Select or create an operand' }).fill('9000');
-  await page.getByRole('combobox', { name: 'Select or create an operand' }).press('Enter');
+  await page.getByPlaceholder('Select or create an operand').fill('9000');
+  await page.getByPlaceholder('Select or create an operand').press('Enter');
   await page.getByRole('button', { name: 'Save' }).click();
 
   await page.getByRole('listitem').filter({ hasText: 'Scenarios' }).getByRole('link').click();
 
-  await expect(page.getByRole('link', { name: `${scenarioName} DESC`})).toBeVisible();
+  await expect(page.getByRole('link', { name: `${scenarioName} DESC` })).toBeVisible();
 
   await page.getByRole('link', { name: `${scenarioName} DESC` }).click();
   await page.getByRole('link', { name: 'draft' }).click();
 
-  await expect(page.getByRole('button', { name: 'edit_operand.operator_type.' })).toHaveText('amount');
-  await expect(page.getByRole('combobox')).toHaveText('>');
+  await expect(page.getByRole('button', { name: 'edit_operand.operator_type.' })).toHaveText(
+    'amount',
+  );
+  await expect(page.getByRole('button', { name: '>' })).toHaveText('>');
   await expect(page.getByRole('button', { name: 'Number 100' })).toBeVisible();
-});
+});

packages/tests/e2e/scenarios.spec.ts

@@ -20,7 +20,7 @@ async function globalSetup() {
     .start();
 
   const dsn = 'postgres://postgres:marble@db/marble?sslmode=disable';
-  const externalDsn = `postgres://postgres:marble@${db.getIpAddress(net.getName())}/marble?sslmode=disable`;
+  const externalDsn = `postgres://postgres:marble@127.0.0.1:${db.getFirstMappedPort()}/marble?sslmode=disable`;
 
   const firebase = await new GenericContainer(
     'europe-west1-docker.pkg.dev/marble-infra/marble/firebase-emulator:latest',
@@ -43,7 +43,6 @@ async function globalSetup() {
     .withDefaultLogDriver()
     .start();
 
-
   const api = await new GenericContainer(
     'europe-west1-docker.pkg.dev/marble-infra/marble/marble-backend',
   )
@@ -54,6 +53,7 @@ async function globalSetup() {
       PG_CONNECTION_STRING: dsn,
       MARBLE_APP_URL: 'http://localhost:3000',
       FIREBASE_AUTH_EMULATOR_HOST: `firebase:9099`,
+      FIREBASE_API_KEY: 'dummy',
       GOOGLE_CLOUD_PROJECT: 'test-project',
       CREATE_GLOBAL_ADMIN_EMAIL: 'admin@checkmarble.com',
       CREATE_ORG_NAME: 'Zorg',
@@ -65,7 +65,6 @@ async function globalSetup() {
     .withDefaultLogDriver()
     .start();
 
-    
   process.env['API_PORT'] = api.getFirstMappedPort().toString();
   process.env['FIREBASE_PORT'] = firebase.getFirstMappedPort().toString();
 

packages/tests/e2e/setup.ts

@@ -5,6 +5,7 @@
   "sideEffect": false,
   "type": "module",
   "scripts": {
+    "test:install": "playwright install",
     "test": "NODE_OPTIONS=--disable-warning=ExperimentalWarning playwright test",
     "test:ui": "NODE_OPTIONS=--disable-warning=ExperimentalWarning playwright test --ui",
     "lint": "eslint ."

packages/tests/package.json

@@ -16,7 +16,7 @@ export default defineConfig({
     screenshot: 'only-on-failure',
     launchOptions: {
       slowMo: 250,
-    }
+    },
   },
   projects: [
     {
@@ -48,8 +48,6 @@ export default defineConfig({
       MARBLE_API_URL_SERVER: `http://localhost:${process.env['API_PORT']}`,
       MARBLE_API_URL_CLIENT: `http://localhost:${process.env['API_PORT']}`,
       FIREBASE_AUTH_EMULATOR_HOST: `localhost:${process.env['FIREBASE_PORT']}`,
-      FIREBASE_API_KEY: 'dummy',
-      FIREBASE_PROJECT_ID: 'test-project',
     },
   },
 });