screenshot-test.yml

name: Checking Component Screenshots

on:
  push:
    branches: [main]
  pull_request:
    branches:
      - main
      - 'release/*'

permissions:
  contents: read
  statuses: write

concurrency:
  group: screenshots-${{ github.event.pull_request.number || github.sha }}
  cancel-in-progress: true

jobs:
  screenshots:
    name: Checking Component Screenshots
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v6
        with:
          lfs: true

      - name: Setup Node.js
        uses: actions/setup-node@v6
        with:
          node-version-file: .nvmrc

      - name: Install dependencies
        run: npm ci --ignore-scripts
        env:
          ELECTRON_SKIP_BINARY_DOWNLOAD: 1
          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: Install build dependencies
        run: npm ci
        working-directory: build

      - name: Install build/vite dependencies
        run: rm -f package-lock.json && npm install
        working-directory: build/vite

      - name: Build vite
        run: npm run build
        working-directory: build/vite

      - name: Install Playwright Chromium
        run: npx playwright install chromium

      - name: Capture screenshots
        run: ./node_modules/.bin/component-explorer screenshot --project ./test/componentFixtures/component-explorer.json

      - name: Compare screenshots
        id: compare
        run: |
          ./node_modules/.bin/component-explorer screenshot:compare \
            --project ./test/componentFixtures \
            --report ./test/componentFixtures/.screenshots/report
        continue-on-error: true

      - name: Prepare explorer artifact
        run: |
          mkdir -p /tmp/explorer-artifact/screenshot-report
          cp -r build/vite/dist/* /tmp/explorer-artifact/
          if [ -d test/componentFixtures/.screenshots/report ]; then
            cp -r test/componentFixtures/.screenshots/report/* /tmp/explorer-artifact/screenshot-report/
          fi

      - name: Upload explorer artifact
        uses: actions/upload-artifact@v7
        with:
          name: component-explorer
          path: /tmp/explorer-artifact/

      - name: Upload screenshot report
        if: steps.compare.outcome == 'failure'
        uses: actions/upload-artifact@v7
        with:
          name: screenshot-diff
          path: |
            test/componentFixtures/.screenshots/current/
            test/componentFixtures/.screenshots/report/

      - name: Set check title
        env:
          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
          REPORT="test/componentFixtures/.screenshots/report/report.json"
          STATE="success"
          if [ -f "$REPORT" ]; then
            CHANGED=$(node -e "const r = require('./$REPORT'); console.log(r.summary.added + r.summary.removed + r.summary.changed)")
            TITLE="⚠ ${CHANGED} screenshots changed"
            BLOCKS_CI=$(node -e "
              const r = require('./$REPORT');
              const blocking = Object.entries(r.fixtures).filter(([, f]) =>
                f.status !== 'unchanged' && (f.labels || []).includes('blocks-ci')
              );
              if (blocking.length > 0) {
                console.log(blocking.map(([name]) => name).join(', '));
              }
            ")
            if [ -n "$BLOCKS_CI" ]; then
              STATE="failure"
              TITLE="❌ ${CHANGED} screenshots changed (blocks CI: ${BLOCKS_CI})"
            fi
          else
            TITLE="✅ Screenshots match"
          fi

          SHA="${{ github.event.pull_request.head.sha || github.sha }}"
          DETAILS_URL="https://hediet-ghartifactpreview.azurewebsites.net/${{ github.repository }}/run/${{ github.run_id }}/component-explorer/___explorer.html?report=./screenshot-report/report.json&search=changed"

          gh api "repos/${{ github.repository }}/statuses/$SHA" \
            --input - <<EOF || echo "::warning::Could not create commit status (expected for fork PRs)"
          {"state":"$STATE","target_url":"$DETAILS_URL","description":"$TITLE","context":"Component Screenshots"}
          EOF

      # - name: Post PR comment
      #   if: github.event_name == 'pull_request'
      #   env:
      #     GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      #   run: |
      #     COMMENT_MARKER="<!-- screenshot-report -->"
      #     BODY="$COMMENT_MARKER"$'\n'
      #
      #     if [ -f test/componentFixtures/.screenshots/report.md ]; then
      #       BODY+=$(cat test/componentFixtures/.screenshots/report.md)
      #       BODY+=$'\n\n'
      #       BODY+="📦 [Download the \`screenshot-diff\` artifact](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}) to review images."
      #     else
      #       BODY+="## Screenshots ✅"$'\n\n'
      #       BODY+="No visual changes detected."
      #     fi
      #
      #     # Find existing comment
      #     EXISTING=$(gh api "repos/${{ github.repository }}/issues/${{ github.event.pull_request.number }}/comments" \
      #       --paginate --jq ".[] | select(.body | startswith(\"$COMMENT_MARKER\")) | .id" | head -1)
      #
      #     if [ -n "$EXISTING" ]; then
      #       gh api "repos/${{ github.repository }}/issues/comments/$EXISTING" -X PATCH -f body="$BODY"
      #     else
      #       gh pr comment "${{ github.event.pull_request.number }}" --body "$BODY"
      #     fi