visual-diff.yml

name: Visual diff (Chromatic)

on:
  push:
    branches:
      - main
  pull_request:

permissions:
  contents: read

concurrency:
  group: visual-diff-${{ github.ref }}
  cancel-in-progress: true

jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6
        with:
          fetch-depth: 0
      - uses: pnpm/action-setup@v5
      - name: Setup Node.js
        uses: actions/setup-node@v6
        with:
          node-version-file: '.nvmrc'
          cache: 'pnpm'
      - name: Copy environment file
        run: cp template.env .env
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      - name: Cache imagetools transforms
        uses: actions/cache@v4
        with:
          path: node_modules/.cache/imagetools
          key: imagetools-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml', 'vite.config.ts', 'src/**/*.{png,jpg,jpeg,webp,avif,svg}', 'static/**/*.{png,jpg,jpeg,webp,avif,svg}') }}
          restore-keys: |
            imagetools-${{ runner.os }}-
      - name: Cache Playwright browsers
        id: playwright-cache
        uses: actions/cache@v4
        with:
          path: ~/.cache/ms-playwright
          key: playwright-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
          restore-keys: |
            playwright-${{ runner.os }}-
      - name: Install Playwright (browser + deps on cache miss)
        if: steps.playwright-cache.outputs.cache-hit != 'true'
        run: pnpm exec playwright install --with-deps chromium
      - name: Install Playwright system deps (cache hit)
        if: steps.playwright-cache.outputs.cache-hit == 'true'
        run: pnpm exec playwright install-deps chromium
      - name: Run Playwright tests
        run: pnpm exec playwright test
        env:
          VISUAL_TEST: '1'
          # NPM_CONFIG_NODE_OPTIONS is the only way to propagate --import through
          # pnpm: pnpm overwrites NODE_OPTIONS (with --experimental-global-webcrypto)
          # when spawning scripts, but npm config values pass through untouched.
          # See https://github.com/pnpm/pnpm/issues/6210
          NPM_CONFIG_NODE_OPTIONS: '--import ./tests/visual/msw-setup.ts'
          # Fake keys so the SDKs actually make HTTP requests (they short-circuit
          # to a "no key" error otherwise, bypassing MSW entirely). The real
          # requests are intercepted by MSW and served from fixtures.
          AIRTABLE_API_KEY: 'fake-visual-test-key'
          NOTION_API_KEY: 'fake-visual-test-key'
          # Log of un-fixtured outbound requests (catch-all hits + unhandled
          # bypasses). Surfaced by the scope-comment companion workflow.
          MSW_WARN_LOG: ${{ github.workspace }}/msw-warn.log
      - name: Upload Playwright report
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 14
      - name: Publish to Chromatic
        id: chromatic
        # Inlined plaintext token — Chromatic's own recommended pattern for fork-PR
        # support (forks can't read repo secrets). The token is a project-scoped
        # write credential (anyone with it can run builds and consume snapshot
        # quota for this project), rotatable from the Chromatic UI. See
        # https://www.chromatic.com/docs/github-actions/ for the full rationale
        # and any capability/scope details.
        uses: chromaui/action@v16
        with:
          playwright: true
          projectToken: chpt_cefd614c783fb5c
          exitZeroOnChanges: true
          exitOnceUploaded: true
      - name: Generate scope comment
        # Only on successful test runs — the comment describes what was
        # covered, and an early-failed run has nothing meaningful to report.
        # Runs after Chromatic publish so the scope comment can link to the
        # Chromatic build URL (where reviewers accept/deny snapshots).
        if: success() && github.event_name == 'pull_request'
        env:
          MSW_WARN_LOG: ${{ github.workspace }}/msw-warn.log
          # The head SHA of the PR. The runner's GITHUB_SHA on pull_request
          # events points at the auto-generated merge-ref commit, and a
          # step-level env override of GITHUB_SHA doesn't beat the runner
          # injection, so pass through a distinct variable.
          SCOPE_HEAD_SHA: ${{ github.event.pull_request.head.sha }}
          CHROMATIC_BUILD_URL: ${{ steps.chromatic.outputs.buildUrl }}
        run: |
          mkdir -p scope
          node --experimental-strip-types tests/visual/scope-comment.ts > scope/body.md
      - name: Upload scope comment artifact
        # Fork PRs can't be trusted to write an honest pr-number.txt, so the
        # companion workflow derives the PR number from the workflow_run
        # payload's head_sha (trusted, served by the base repo's API) instead.
        if: success() && github.event_name == 'pull_request'
        uses: actions/upload-artifact@v4
        with:
          name: visual-diff-scope
          path: scope/
          retention-days: 1