visual_diff.yml

name: Visual Diff

permissions:
  contents: read

on:
  pull_request:
    types: [labeled, unlabeled, opened, synchronize, reopened]

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

env:
  SW_DISABLED: true
  EMBER_EXAM_CONCURRENCY: 3

jobs:
  baseline:
    name: Baseline (${{ matrix.name }}, ${{ matrix.mode }})
    runs-on: ubuntu-latest
    strategy:
      matrix:
        include:
          - name: phone
            width: 399
            mode: light
          - name: phone
            width: 399
            mode: dark
          - name: tablet
            width: 768
            mode: light
          - name: tablet
            width: 768
            mode: dark
          - name: laptop
            width: 1200
            mode: light
          - name: laptop
            width: 1200
            mode: dark
          - name: desktop
            width: 1920
            mode: light
          - name: desktop
            width: 1920
            mode: dark
    env:
      MOZ_HEADLESS_WIDTH: ${{ matrix.width }}
    outputs:
      ref: ${{ steps.ref.outputs.ref }}
    steps:
      - uses: actions/checkout@v7
        with:
          ref: "master"
      - id: ref
        run: |
          echo "$(git rev-parse HEAD)"
          echo "ref=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"
      - name: Get cache date
        id: cache-date
        run: echo "date=$(date -u +%Y-%m-%d)" >> "$GITHUB_OUTPUT"
      - name: Cache Screenshots
        id: screenshot-cache
        uses: actions/cache@v6
        with:
          path: build
          key: screenshots-${{ steps.cache-date.outputs.date }}-${{ steps.ref.outputs.ref }}-${{ matrix.name }}-${{ matrix.mode }}
      - uses: pnpm/action-setup@v6
      - uses: actions/setup-node@v7
        with:
          node-version: 24
          cache: pnpm
      - name: Install Dependencies
        if: steps.screenshot-cache.outputs.cache-hit != 'true'
        run: pnpm install
      - name: Capture Screenshots
        continue-on-error: true
        if: steps.screenshot-cache.outputs.cache-hit != 'true'
        run: |
          if [ "${{ matrix.mode }}" = "dark" ]; then
            pnpm run test:darkmode-screenshots
          else
            pnpm run test:screenshots
          fi
      - name: Rename screenshots
        if: steps.screenshot-cache.outputs.cache-hit != 'true'
        run: |
          mkdir -p build/storage
          cd build/screenshots
          for file in *; do
            mv "$file" "../storage/${{ matrix.name }}-$file"
          done
      - name: Consolidate Screenshots
        if: steps.screenshot-cache.outputs.cache-hit != 'true'
        run: |
          rm -rf build/screenshots
          mv build/storage build/screenshots
      - uses: actions/upload-artifact@v7
        with:
          name: baseline-frontend-${{ matrix.name }}-${{ matrix.mode }}
          path: build/screenshots

  candidate:
    name: Candidate (${{ matrix.name }}, ${{ matrix.mode }})
    runs-on: ubuntu-latest
    strategy:
      matrix:
        include:
          - name: phone
            width: 399
            mode: light
          - name: phone
            width: 399
            mode: dark
          - name: tablet
            width: 768
            mode: light
          - name: tablet
            width: 768
            mode: dark
          - name: laptop
            width: 1200
            mode: light
          - name: laptop
            width: 1200
            mode: dark
          - name: desktop
            width: 1920
            mode: light
          - name: desktop
            width: 1920
            mode: dark
    env:
      MOZ_HEADLESS_WIDTH: ${{ matrix.width }}
    outputs:
      ref: ${{ steps.ref.outputs.ref }}
    steps:
      - uses: actions/checkout@v7
      - id: ref
        run: |
          echo "$(git rev-parse HEAD)"
          echo "ref=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"
      - name: Get cache date
        id: cache-date
        run: echo "date=$(date -u +%Y-%m-%d)" >> "$GITHUB_OUTPUT"
      - name: Cache Screenshots
        id: screenshot-cache
        uses: actions/cache@v6
        with:
          path: build
          key: screenshots-${{ steps.cache-date.outputs.date }}-${{ steps.ref.outputs.ref }}-${{ matrix.name }}-${{ matrix.mode }}
      - uses: pnpm/action-setup@v6
      - uses: actions/setup-node@v7
        with:
          node-version: 24
          cache: pnpm
      - name: Install Dependencies
        if: steps.screenshot-cache.outputs.cache-hit != 'true'
        run: pnpm install
      - name: Capture Screenshots
        continue-on-error: true
        if: steps.screenshot-cache.outputs.cache-hit != 'true'
        run: |
          if [ "${{ matrix.mode }}" = "dark" ]; then
            pnpm run test:darkmode-screenshots
          else
            pnpm run test:screenshots
          fi
      - name: Rename screenshots
        if: steps.screenshot-cache.outputs.cache-hit != 'true'
        run: |
          mkdir -p build/storage
          cd build/screenshots
          for file in *; do
            mv "$file" "../storage/${{ matrix.name }}-$file"
          done
      - name: Consolidate Screenshots
        if: steps.screenshot-cache.outputs.cache-hit != 'true'
        run: |
          rm -rf build/screenshots
          mv build/storage build/screenshots
      - uses: actions/upload-artifact@v7
        with:
          name: candidate-frontend-${{ matrix.name }}-${{ matrix.mode }}
          path: build/screenshots

  compare:
    name: Visual Diff
    needs: [baseline, candidate]
    runs-on: ubuntu-latest
    env:
      OUTPUT_DIR: visual-diff-${{ github.event.pull_request.number }}
      BASELINE_REF: ${{needs.baseline.outputs.ref}}
      CANDIDATE_REF: ${{needs.candidate.outputs.ref}}
    steps:
      - name: Restore Comparison Cache
        id: comparison-cache
        uses: actions/cache/restore@v6
        with:
          path: |
            ${{ env.OUTPUT_DIR }}
            results
          key: comparison-${{ env.BASELINE_REF }}-${{ env.CANDIDATE_REF }}
      - uses: actions/download-artifact@v8
        if: steps.comparison-cache.outputs.cache-hit != 'true'
        with:
          pattern: baseline-frontend-*
          path: baseline-frontend
          merge-multiple: true
      - uses: actions/download-artifact@v8
        if: steps.comparison-cache.outputs.cache-hit != 'true'
        with:
          pattern: candidate-frontend-*
          path: candidate-frontend
          merge-multiple: true
      - run: ls -lh baseline-frontend candidate-frontend 2>/dev/null || true
      - uses: actions/upload-artifact@v7
        with:
          name: combined-screenshots
          path: |
            baseline-frontend
            candidate-frontend
      - uses: actions/setup-node@v7
        with:
          node-version: 24
      - run: |
          mkdir -p ./results
          echo ${{ github.event.pull_request.number }} > ./results/pr_number
      - name: Create Visual Diff
        if: steps.comparison-cache.outputs.cache-hit != 'true'
        run: |
          set +e
          npx visual-differ --threshold=0.25 baseline-frontend candidate-frontend ${{ env.OUTPUT_DIR }} > results/visual-diff.txt
          exit_code=$?
          echo $exit_code > ./results/exit_code
          cp ${{ env.OUTPUT_DIR }}/report.md results/
          cat results/report.md results/visual-diff.txt
      - uses: actions/upload-artifact@v7
        id: upload-output
        with:
          name: ${{ env.OUTPUT_DIR }}
          path: ${{ env.OUTPUT_DIR }}
      - run: |
          echo ${{ steps.upload-output.outputs.artifact-url }} > ./results/artifact_url
          echo ${{ contains(github.event.pull_request.labels.*.name, 'approve visual diff') }} > ./results/approved
      - name: Save Comparison Cache
        if: steps.comparison-cache.outputs.cache-hit != 'true'
        uses: actions/cache/save@v6
        with:
          path: |
            ${{ env.OUTPUT_DIR }}
            results
          key: ${{ steps.comparison-cache.outputs.cache-primary-key }}
      - uses: actions/upload-artifact@v7
        with:
          name: results
          path: results
      - name: Check Status
        run: |
          exitCode=$(cat ./results/exit_code)
          approved=$(cat ./results/approved)
          echo "visual-differ exit code: $exitCode"
          echo "approve visual diff label present: $approved"
          if [ "$exitCode" != "0" ] && [ "$approved" != "true" ]; then
            echo "Visual diff detected and 'approve visual diff' label not present."
            exit 1
          fi