Preview vs Production Workflow

name: Visual Check
on:
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write # Required to post/update comments on your PR
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      # Replace this with your preview provider's output.
      - name: Set preview URL
        run: echo "PREVIEW_URL=https://preview.myapp.com" >> "$GITHUB_ENV"

      - name: Install RegressionBot SDK
        run: npm install @regressionbot/sdk

      - name: Run RegressionBot and write report
        run: |
          node --input-type=module <<'EOF'
          import fs from 'node:fs';
          import { RegressionBot } from '@regressionbot/sdk';

          const client = new RegressionBot(process.env.REGRESSIONBOT_API_KEY);
          const job = await client
            .test(process.env.PREVIEW_URL)
            .against('https://myapp.com')
            .forProject('my-web-app')
            .on(['Desktop Chrome', 'iPhone 12'])
            .sitemap(process.env.PREVIEW_URL + '/sitemap.xml')
            .scan('/pages/**')
            .withContext({
              prTitle: process.env.PR_TITLE,
              prDescription: process.env.PR_BODY
            })
            .run();

          await job.waitForCompletion(5000, undefined, { waitForSummaries: true });
          const summary = await job.getSummary();

          const lines = [
            '## 🚀 RegressionBot Visual Test Results',
            '',
            '**Job ID:** `' + job.jobId + '`',
            '**Pages changed:** ' + summary.regressionCount,
            ''
          ];

          for (const regression of summary.regressions || []) {
            const diff = (regression.diffPercentage ?? 0).toFixed(3);
            lines.push(
              '### ' + regression.url,
              '',
              '**Variant:** ' + regression.variantName,
              '**Changes:** ' + (regression.changes?.length ?? 0) + ' (' + diff + '% of the page)',
              ''
            );

            if (regression.regressionbotSummary) {
              const summaryLines = Array.isArray(regression.regressionbotSummary)
                ? regression.regressionbotSummary.map((item) =>
                    item.label ? '**' + item.label + '**: ' + item.text : item.text)
                : [regression.regressionbotSummary];
              lines.push(
                '> **RegressionBot Summary:**',
                ...summaryLines.map((l) => '> ' + l),
                ''
              );
            }

            if (regression.diffUrl) {
              lines.push('[Open diff image](' + regression.diffUrl + ')', '');
            }
          }

          fs.writeFileSync('regressionbot-report.md', lines.join('
'));
          if (summary.regressionCount > 0) process.exit(1);
          EOF
        env:
          REGRESSIONBOT_API_KEY: ${{ secrets.REGRESSIONBOT_API_KEY }}
          PR_TITLE: ${{ github.event.pull_request.title }}
          PR_BODY: ${{ github.event.pull_request.body }}

      - name: Comment visual summary on PR
        if: always()
        uses: actions/github-script@v7
        with:
          script: |
            const fs = require('fs');
            const body = fs.existsSync('regressionbot-report.md')
              ? fs.readFileSync('regressionbot-report.md', 'utf8')
              : 'RegressionBot did not produce a report. Check the workflow logs.';

            const { data: comments } = await github.rest.issues.listComments({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: context.issue.number,
            });

            const botComment = comments.find(comment => 
              comment.body.includes('🚀 RegressionBot Visual Test Results')
            );

            if (botComment) {
              await github.rest.issues.updateComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                comment_id: botComment.id,
                body
              });
            } else {
              await github.rest.issues.createComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: context.issue.number,
                body
              });
            }
          

on:
  issue_comment:
    types: [created]

jobs:
  approve:
    if: github.event.issue.pull_request && startsWith(github.event.comment.body, '/approve-visual')
    runs-on: ubuntu-latest
    permissions:
      statuses: write # Required to update commit status check
      pull-requests: read
    steps:
      - name: Approve RegressionBot Job
        run: |
          JOB_ID=$(gh api repos/${{ github.repository }}/issues/${{ github.event.issue.number }}/comments --jq '.[] | select(.body | contains("🚀 RegressionBot Visual Test Results")) | .body' | grep "Job ID:" | awk -F'`' '{print $2}' | tail -n 1)
          if [ -z "$JOB_ID" ]; then
            echo "Error: Could not find a RegressionBot job ID for this PR."
            exit 1
          fi
          npx regressionbot approve "$JOB_ID"
        env:
          REGRESSIONBOT_API_KEY: ${{ secrets.REGRESSIONBOT_API_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: Update GitHub status check to success
        run: |
          # Fetch PR head SHA
          SHA=$(gh api repos/${{ github.repository }}/pulls/${{ github.event.issue.number }} --jq '.head.sha')
          
          # Mark visual regression status check as green/success
          gh api \
            --method POST \
            -H "Accept: application/vnd.github+json" \
            /repos/${{ github.repository }}/statuses/$SHA \
            -f state='success'             -f target_url="${{ github.event.comment.html_url }}"             -f description='Visual regressions approved by developer'             -f context='RegressionBot Visual Check'
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}