ci: refactor CI workflow and update test scripts (#314)

### TL;DR

Updated CI workflows, test scripts, and environment configurations to improve the development and testing process.

### What changed?

- Added a new reusable GitHub Action for setup and installation
- Created a new comprehensive CI workflow (ci.yml) replacing the old main.yml
- Updated the Chromatic workflow for visual regression testing
- Modified test scripts in package.json for better organization and clarity
- Updated the .env.test file to use quotes for the DATABASE_URL
- Updated the load test README with the correct build command

### How to test?

1. Review the new CI workflow in .github/workflows/ci.yml
2. Run the updated test scripts locally:
   - `npm run test:vitest` for unit and integration tests
   - `npm run test:e2e` for end-to-end tests
3. Verify that the Chromatic workflow runs correctly on pull requests
4. Check that the load test build command works: `npm run load-test:build`

### Why make this change?

These changes aim to:
- Streamline the CI process with a more comprehensive and organized workflow
- Improve test script naming and execution for better developer experience
- Ensure consistent setup across different GitHub Actions
- Enhance the reliability and efficiency of the testing and deployment pipeline

.env.test

@@ -2,7 +2,7 @@
 NODE_ENV=test
 # DATABASE_URL is not actually used in tests, but prisma will complain if the URL is incorrect
 # pglite is used in tests instead.
-DATABASE_URL=postgres://root:root@localhost:5432/test
+DATABASE_URL="postgres://root:root@localhost:5432/test"
 SESSION_SECRET=random_session_secret_that_is_at_least_32_characters
 
 OTP_EXPIRY=600

.github/actions/setup/action.yml

@@ -0,0 +1,15 @@
+name: 'Setup and install'
+description: 'Common setup steps for Actions'
+
+runs:
+  using: composite
+  steps:
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+        cache: 'npm'
+
+    - shell: bash
+      run: npm ci
+
+    # Add more steps here as needed

.github/workflows/chromatic.yml

@@ -18,25 +18,24 @@ jobs:
     runs-on: ubuntu-latest
     env:
       CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+    if: ${{ !endsWith(github.actor , 'bot') && !endsWith(github.actor, '[bot]')}}
     # Job steps
     steps:
-      - if: env.CHROMATIC_PROJECT_TOKEN != ''
-        uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+        if: env.CHROMATIC_PROJECT_TOKEN != ''
         with:
-          fetch-depth: 0 # Required for v2
-      - if: env.CHROMATIC_PROJECT_TOKEN != ''
-        name: Install dependencies
-        run: npm i
-      - if: env.CHROMATIC_PROJECT_TOKEN != ''
-        name: Load .env file
+          fetch-depth: 0 # Required so Chromatic can compare commits
+      - uses: ./.github/actions/setup
+        if: env.CHROMATIC_PROJECT_TOKEN != ''
+      - name: Load .env file
+        if: env.CHROMATIC_PROJECT_TOKEN != ''
         uses: xom9ikk/dotenv@v2
         with:
           mode: test
-      - if: env.CHROMATIC_PROJECT_TOKEN != ''
-        name: Publish to Chromatic
-        uses: chromaui/action@v1
+      - name: Publish to Chromatic
+        if: env.CHROMATIC_PROJECT_TOKEN != ''
+        uses: chromaui/action@latest
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           onlyChanged: true
           exitOnceUploaded: true

.github/workflows/ci.yml

@@ -0,0 +1,88 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+      # add more branches here for this job to run on
+      # - staging
+      # - production
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  install:
+    name: Install dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Lint
+        run: npm run lint
+
+  unit-integration-tests:
+    name: Unit & integration tests
+    needs:
+      - install
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Test
+        run: npm run test:vitest
+
+  end-to-end-tests:
+    name: End-to-end tests
+    needs:
+      - install
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Install Playwright (Chromium)
+        run: npx playwright install chromium
+      - name: Load .env file
+        uses: xom9ikk/dotenv@v2
+        with:
+          mode: test
+      - name: Next.js cache
+        uses: actions/cache@v4
+        with:
+          # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
+          path: |
+            ~/.npm
+            ${{ github.workspace }}/.next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
+
+      - name: Start test containers
+        run: npm run setup:test
+
+      - name: Build app
+        run: npm run build
+
+      - name: Run Playwright tests
+        run: npm run test-ci:e2e
+
+      - name: Stop test containers
+        run: npm run teardown
+
+      - name: Upload test results
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright/test-results/
+          retention-days: 7

package.json

@@ -21,12 +21,12 @@
     "migrate:dev": "prisma migrate dev",
     "migrate": "prisma migrate deploy",
     "test": "run-s test:*",
-    "test:unit": "dotenv -e .env.test vitest run",
-    "test:load:build": "webpack --config tests/load/webpack.config.js",
+    "test:vitest": "dotenv -e .env.test vitest run",
+    "test-dev:vitest": "dotenv -e .env.test vitest",
     "test:e2e": "dotenv -e .env.test playwright test",
-    "test-dev": "start-server-and-test dev http://127.0.0.1:3000 test",
-    "test-dev:unit": "dotenv -e .env.test vitest",
-    "test-start": "start-server-and-test start http://127.0.0.1:3000 test",
+    "test-ci:e2e": "start-server-and-test start http://127.0.0.1:3000 test:e2e",
+    "test-dev:e2e": "start-server-and-test dev http://127.0.0.1:3000 test:e2e",
+    "load-test:build": "webpack --config tests/load/webpack.config.js",
     "postinstall": "npm run generate && npm run build:theme",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"

tests/load/README.md

@@ -9,7 +9,7 @@
 1. Build the load test files.
 
    ```
-   npm run test:load:build
+   npm run load-test:build
    ```
 
 1. Log in to the target environment with a test account and save the session cookie value.