Test/branched dbs

.eslintrc.cjs

@@ -32,6 +32,8 @@ const config = {
     '*.test.*',
     'public',
     '.eslintrc.cjs',
+    'test-results',
+    'playwright-report'
   ],
   rules: {
     '@next/next/no-img-element': 'off',

.github/workflows/cleanup-db-branches.yml

@@ -0,0 +1,15 @@
+name: Clean up branched databases
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  delete-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/setup-node@v4
+      - run: npm i -g neonctl@latest
+      - name: Delete Neon Branch
+        run: neonctl branches delete preview/${{ github.event.pull_request.head.ref }} --project-id ${{ secrets.NEON_PROJECT_ID }}
+        env:
+          NEON_API_KEY: ${{ secrets.NEON_API_KEY }}

.github/workflows/playwright.yml

@@ -0,0 +1,22 @@
+name: Playwright Tests
+on:
+  deployment_status:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: ${{ github.event_name == 'deployment_status' && startsWith(github.event.deployment_status.environment, 'preview') && github.event.deployment_status.state == 'success' }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm install -g pnpm && pnpm install
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Run tests
+        run: pnpm run test:e2e-ci
+        env:
+          UPLOADTHING_TOKEN: ${{ secrets.UPLOADTHING_TOKEN }}
+          BASE_URL: ${{ github.event.deployment_status.environment_url }}

.gitignore

@@ -35,9 +35,17 @@ yarn-error.log*
 # do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
 .env
 .env*.local
+.env.test
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

docker-compose.test.yml

@@ -0,0 +1,28 @@
+services:
+  postgres-test:
+    container_name: fresco-test-postgres
+    image: postgres:16-alpine
+    restart: always
+    ports:
+      - 5433:5432  # Avoid conflicts with dev
+    environment:
+      - POSTGRES_PASSWORD=test_postgres_password
+      - POSTGRES_USER=test_user
+      - POSTGRES_DB=test_db
+    volumes:
+      - test-postgres:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD", "pg_isready", '-U', 'test_user']
+      interval: 5s
+      timeout: 10s
+      retries: 5
+    networks:
+      - test-network
+
+volumes:
+  test-postgres:
+    name: fresco-test-db-volume
+
+networks:
+  test-network:
+    name: fresco-test-network

e2e/app.spec.ts

@@ -0,0 +1,18 @@
+
+import { expect, test } from '@playwright/test';
+
+
+// app should be setup before this is run
+
+test('should sign in', async ({ page }) => {
+
+  await page.goto("/");  // base url is set in playwright.config.ts
+  await expect(page).toHaveURL(/\/signin/);
+
+  // sign in using credentials
+  await page.fill('input[name="username"]', 'admin');
+  await page.fill('input[name="password"]', 'Administrator1!');
+  await page.click('button[type="submit"]');
+
+  await expect(page).toHaveURL(/\/dashboard/, { timeout: 10000 });
+});

e2e/files/participants.csv

@@ -0,0 +1,6 @@
+identifier,label
+d8a1d0be-5f9f-4cf9-b89b-f15e6c6df19d,John Doe
+4aefc585-18e6-40cb-ae04-2b511f0d007d,Jane Smith
+b2d788bc-0305-4fd5-b512-8928d9b33a20,Michael Johnson
+cce25123-d8c6-44cc-971b-2fc0f6cf9200,Emily Brown
+657b0254-33de-4f7d-8e3a-c1057bdf4f1a,Christopher Lee

e2e/global.setup.ts

@@ -0,0 +1,121 @@
+/* eslint-disable no-console */
+/* eslint-disable no-process-env */
+
+import { expect, test } from '@playwright/test';
+import { execSync } from 'child_process';
+
+test('create test database and setup app', async ({ page }) => {
+  console.log('Running setup test');
+  test.slow(); // triple the default timeout
+
+  // Stop any existing test db to ensure clean state
+  if (!process.env.CI) {
+    try { 
+      execSync('docker compose -f docker-compose.test.yml down -v', { stdio: 'inherit' });
+    } catch (error) {
+      // Ignore errors if no existing container
+    }
+
+    // Start test db
+    execSync('docker compose -f docker-compose.test.yml up -d', { stdio: 'inherit' });
+
+    // Optional: Wait for database to be ready
+    console.log('Waiting for database to be ready');
+    execSync('sleep 5', { stdio: 'inherit' });
+
+    // local dev, need to use .env.test.local
+    execSync('pnpm exec dotenv -e .env.test.local node ./setup-database.js && pnpm exec dotenv -e .env.test.local node ./initialize.js', { stdio: 'inherit' });
+  } else {
+    console.log('CI environment detected');
+    // we are in CI uiing the preview deployment
+    // sign in and reset database
+    await page.goto("/");  // base url is set in playwright.config.ts
+    await expect(page).toHaveURL(/\/signin/);
+
+    // sign in using credentials
+    await page.fill('input[name="username"]', 'admin');
+    await page.fill('input[name="password"]', 'Administrator1!');
+    await page.click('button[type="submit"]');
+
+    await expect(page).toHaveURL(/\/dashboard/, { timeout: 10000 });
+    console.log('✅ Signed in successfully');
+
+    // go to /settings
+    await page.goto("/dashboard/settings");
+    // click "reset all app data" button
+    const resetButton = page.getByRole('button', { name: 'Reset all app data' });
+    await resetButton.click({ timeout: 10000 });
+    const confirmButton = page.getByRole('button', { name: 'Delete all data' });
+    await confirmButton.click({ timeout: 10000 });
+
+    await expect(page).toHaveURL(/\/setup/, { timeout: 10000 });
+
+    console.log('✅ Reset app data with settings button')
+
+  }
+
+  // STEP 1
+  await page.goto("/setup");
+  // screenshot
+  await page.fill('input[name="username"]', 'admin', { timeout: 5000 });
+  await page.fill('input[name="password"]', 'Administrator1!', { timeout: 5000 });
+
+  await page.fill('input[name="confirmPassword"]', 'Administrator1!', { timeout: 5000 });
+  await page.click('button[type="submit"]', { timeout: 10000 });
+  await expect(page).toHaveURL(/\/setup\?step=2/);
+  console.log('✅ Step 1 completed: admin user created');
+
+  // STEP 2
+  // env var cannot be UPLOADTHING_TOKEN or this step will be skipped
+  // screenshot
+  await page.fill('input[name="uploadThingToken"]', process.env.UPLOADTHING_TOKEN ?? '', { timeout: 5000 });
+  await page.click('button[type="submit"]', { timeout: 10000 });
+
+  await expect(page).toHaveURL(/\/setup\?step=3/, { timeout: 20000 });
+  console.log('✅ Step 2 completed: uploadthing token set');
+
+  // STEP 3
+  const protocolHandle = page.locator('input[type="file"]');
+  await protocolHandle.setInputFiles('e2e/files/SampleProtocol.netcanvas');
+  // check for uploading assets toast
+  await expect(page.getByText('Uploading assets...')).toBeVisible({ timeout: 5000 });
+  await expect(page.getByText('Uploading assets...')).not.toBeVisible({ timeout: 120000 }); // long process if assets are large
+  await expect(page.getByText('Complete...')).toBeVisible({ timeout: 60000 });
+
+  await page.getByRole('button', { name: 'Continue' }).click({ timeout: 5000 });
+  await expect(page).toHaveURL(/\/setup\?step=4/);
+  console.log('✅ Step 3 completed: protocol uploaded');
+
+  // STEP 4
+  // import participants
+  await page.getByRole('button', { name: 'Import participants' }).click({ timeout: 5000 });
+
+  // dialog should be visible
+  await expect(page.getByRole('dialog')).toBeVisible({ timeout: 5000 });
+
+  const participantsHandle = page.locator('input[type="file"]');
+  await participantsHandle.setInputFiles('e2e/files/participants.csv');
+  await page.getByRole('button', { name: 'Import' }).click({ timeout: 5000 });
+
+  // participants imported toast
+  await expect(page.locator('div.text-sm.opacity-90', { hasText: 'Participants have been imported successfully' })).toBeVisible({ timeout: 5000 });
+
+  // toggle switches
+  const anonymousRecruitmentSwitch = page.getByRole('switch').first();
+  const limitInterviewsSwitch = page.getByRole('switch').last();
+  await anonymousRecruitmentSwitch.click({ timeout: 10000 });
+  await limitInterviewsSwitch.click({ timeout: 10000 });
+
+
+  await expect(anonymousRecruitmentSwitch).toBeChecked();
+  await expect(limitInterviewsSwitch).toBeChecked();
+
+  await page.getByRole('button', { name: 'Continue' }).click({ timeout: 10000 });
+  await expect(page).toHaveURL(/\/setup\?step=5/);
+  console.log('✅ Step 4 completed: participants imported and settings toggled');
+
+  // STEP 5 - documentation
+  await page.getByRole('button', { name: 'Go to the dashboard!' }).click({ timeout: 10000 });
+  await expect(page).toHaveURL(/\/dashboard/, { timeout: 10000 });
+  console.log('✅ Setup completed: dashboard reached');
+});

e2e/global.teardown.ts

@@ -0,0 +1,25 @@
+/* eslint-disable no-process-env */
+import { test as teardown } from '@playwright/test';
+import { execSync } from 'child_process';
+import { UTApi } from 'uploadthing/server';
+
+teardown('delete test database', async () => {
+  if (!process.env.CI) {
+    // remove uploaded files from uploadthing
+    // eslint-disable-next-line no-console
+    console.log('🗑️ Deleting uploaded files from uploadthing');
+
+    const utapi = new UTApi({
+      // TODO: figure out why we cannot use getUTApi here
+      token: process.env.UPLOADTHING_TOKEN,
+    });
+
+    await utapi.listFiles({}).then(({ files }) => {
+      const keys = files.map((file) => file.key);
+      return utapi.deleteFiles(keys);
+    });
+
+    // Stop and remove test db
+    execSync('docker compose -f docker-compose.test.yml down -v', { stdio: 'inherit' });
+  }
+});

initialize.js

@@ -16,7 +16,7 @@ async function setInitializedAt() {
   });
 
   if (initializedAt) {
-    console.log('App already initialized. Skipping.');
+    console.log(`App already initialized at ${initializedAt}. Skipping.`);
     return;
   }
 

knip.json

@@ -8,7 +8,9 @@
     "lib/interviewer/hooks/forceSimulation.worker.js",
     "lib/ui/components/Sprites/ExportSprite.js",
     "utils/auth.ts",
-    "load-test.js"
+    "load-test.js",
+    "e2e/global.setup.ts",
+    "e2e/global.teardown.ts"
   ],
   "ignoreDependencies": [
     "server-only",
@@ -18,7 +20,8 @@
     "@tailwindcss/container-queries",
     "@tailwindcss/forms",
     "@tailwindcss/typography",
-    "tailwindcss-animate"
+    "tailwindcss-animate",
+    "dotenv-cli"
   ],
   "ignoreBinaries": ["docker-compose"]
 }

package.json

@@ -15,7 +15,9 @@
     "vercel-build": "node ./setup-database.js && node ./initialize.js && next build",
     "knip": "knip",
     "test": "vitest",
-    "load-test": "docker run -i grafana/k6 run - <load-test.js"
+    "load-test": "docker run -i grafana/k6 run - <load-test.js",
+    "test:e2e-dev": "rm -rf .next && NODE_ENV='test' next build && playwright test --trace on",
+    "test:e2e-ci": "playwright test"
   },
   "pnpm": {
     "overrides": {
@@ -106,6 +108,7 @@
     "zod-form-data": "^2.0.5"
   },
   "devDependencies": {
+    "@playwright/test": "^1.50.1",
     "@prisma/client": "^6.4.1",
     "@t3-oss/env-nextjs": "^0.12.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
@@ -129,6 +132,7 @@
     "@typescript-eslint/eslint-plugin": "^8.25.0",
     "@typescript-eslint/parser": "^8.25.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "dotenv-cli": "^8.0.0",
     "eslint": "^8.57.1",
     "eslint-config-next": "^15.1.5",
     "eslint-config-prettier": "^10.0.1",

playwright.config.ts

@@ -0,0 +1,68 @@
+import { defineConfig, devices } from '@playwright/test';
+
+// Load environment variables
+import dotenv from 'dotenv';
+// const CI = process.env.CI;
+const CI = true;
+dotenv.config({
+  path: CI ? './.env' : './.env.test.local'
+});
+
+const PORT = 3001; // run on port 3001 to avoid conflicts with dev
+
+const baseURL = CI
+  // eslint-disable-next-line no-process-env
+  ? process.env.BASE_URL
+  : `http://localhost:${PORT}`;
+
+const webServer = CI ?
+undefined : {
+  command: `NODE_ENV=test next start -p ${PORT}`,
+  url: baseURL,
+  reuseExistingServer: true
+};
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  // forbidOnly: !!process.env.CI,
+  // retries: process.env.CI ? 2 : 0,
+  // workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+
+  use: {
+    baseURL,
+    trace: 'on-first-retry',
+  },
+
+  projects: [
+    {
+      name: 'setup db',
+      testMatch: /global\.setup\.ts/,
+    },
+    {
+      name: 'cleanup db',
+      testMatch: /global\.teardown\.ts/,
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+      dependencies: ['setup db'],
+      teardown: 'cleanup db',
+    },
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+      dependencies: ['setup db'],
+      teardown: 'cleanup db',
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+      dependencies: ['setup db'],
+      teardown: 'cleanup db',
+    },
+  ],
+
+  webServer,
+});