vscode/.github/workflows/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 rspack dependencies
        run: npm ci
        working-directory: build/rspack

      - name: Transpile source
        run: npm run transpile-client

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

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

      - name: Upload screenshots
        uses: actions/upload-artifact@v7
        with:
          name: screenshots
          path: test/componentFixtures/.screenshots/current/

      # - 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