feat: add playwright

.env.example

@@ -9,3 +9,8 @@ LOG_LEVEL=debug
 NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=
 
 REDIS_URL=redis://localhost:6380
+
+# Bitwarden values are for running tests only
+BW_CLIENTKEY=
+BW_CLIENTSECRET=
+BW_TEST_CREDENTIALS_ITEM_ID=

.github/workflows/tests.yml

@@ -0,0 +1,78 @@
+name: Lint and Tests
+on:
+  pull_request:
+    branches:
+      - "*"
+  push:
+    branches:
+      - main
+
+env:
+  CI: true
+  DATABASE_URL: postgres://postgres:postgres@localhost:5432/postgres
+  JWT_SECRET: keyboardcat
+  LOG_LEVEL: debug
+  NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN: ${{ vars.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN }}
+  REDIS_URL: redis://localhost:6379
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Install dependencies
+        run: npm ci
+      - name: Run lint
+        run: npm run lint
+
+  test:
+    needs:
+      - lint
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    services:
+      postgres:
+        image: postgres:16
+        ports:
+          - 5432:5432
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: postgres
+          POSTGRES_DB: postgres
+        options: >-
+          --health-cmd="pg_isready"
+          --health-interval=10s
+          --health-timeout=5s
+          --health-retries=5
+      redis:
+        image: redis:7
+        ports:
+          - 6379:6379
+        options: >-
+          --health-cmd="redis-cli ping"
+          --health-interval=10s
+          --health-timeout=5s
+          --health-retries=5
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Install dependencies
+        run: npm ci
+      - name: Build app
+        run: npm run build
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -12,6 +12,7 @@
 
 # testing
 /coverage
+credentials.json
 
 # next.js
 /.next/
@@ -34,9 +35,11 @@ yarn-error.log*
 .env*
 !.env.example
 
+# area data
 resources/areaSets/*
 !resources/areaSets/.gitkeep
 
+# data sources
 resources/dataSets/*
 !resources/dataSets/.gitkeep
 
@@ -48,4 +51,11 @@ resources/dataSets/*
 next-env.d.ts
 
 # database backup
-ts-mapped.psql
+ts-mapped.psql
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -9,11 +9,18 @@
 
 ### Instructions
 
-1. Copy `.env.example` to `.env` and fill in any missing values.
+1. Copy `.env.example` to `.env` and fill in any missing values (Bitwarden values are only required for running tests).
 2. Get a database dump from the maintainer of this repo and place it in the root of the project as `ts-mapped.psql`.
 3. Start the database with `docker compose up`
 4. Import the database dump with `docker compose exec -u postgres -T postgres psql < ts-mapped.psql`
 5. Install dependencies with `npm i`
 6. Start the server with `npm run dev`
 7. View the site at `http://localhost:3000`
 8. Log in with username `joaquimds@gmail.com` and password `1234`.
+
+### End-to-end Tests
+
+1. Ensure you have the Bitwarden CLI installed: `npm install -g @bitwarden/cli`
+2. Start the test runner with `./bin/playwright.sh`.
+3. Run the tests through the test runner.
+

bin/playwright.sh

@@ -0,0 +1,31 @@
+#!/bin/bash
+set -euo pipefail
+
+docker compose up -d
+
+# Get Bitwarden env vars from .env file
+while IFS= read -r line; do
+  export "$line"
+done < <(grep '^BW_' ".env")
+
+bw logout
+bw login --apikey
+bw unlock --apikey
+bw sync
+bw get attachment credentials.json --itemid $BW_TEST_CREDENTIALS_ITEM_ID --output tests/
+bw logout
+
+while [ "$(docker inspect --format='{{.State.Health.Status}}' postgres)" != "healthy" ]; do
+  echo "Container status: $(docker inspect --format='{{.State.Health.Status}}' postgres). Waiting..."
+  sleep 2
+done
+
+docker compose exec postgres psql -U postgres -c "DROP DATABASE IF EXISTS playwright;"
+docker compose exec postgres psql -U postgres -c "CREATE DATABASE playwright;"
+
+export DATABASE_URL=postgres://postgres:postgres@localhost:5444/playwright
+
+npm run kysely migrate latest
+npm run cmd -- upsertUser --email joaquim@commonknowledge.coop --password 1234 --org "Common Knowledge"
+
+npx playwright test --ui

eslint.config.mjs

@@ -12,7 +12,7 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   {
-    ignores: [".next", "src/__generated__"],
+    ignores: [".next", "src/__generated__", "playwright-report"],
   },
   ...compat.extends("next/core-web-vitals", "next/typescript"),
   ...tseslint.configs.strict,