appkit/.github/workflows/visual_regression_tests.yml at 5172c08b7a36436c2e0c1b1452fcd8bd71c45de2 · reown-com/appkit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
name: Visual Regression Tests

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

permissions:
  contents: read
  pull-requests: write

jobs:
  chromatic:
    name: Run Chromatic
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - uses: pnpm/action-setup@v4
        name: Install pnpm

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22.x
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Build packages
        run: pnpm --filter "@reown/appkit-common" --filter "@reown/appkit-polyfills" --filter "@reown/appkit-wallet" --filter "@reown/appkit-controllers" --filter "@reown/appkit-ui" --filter "@reown/appkit-utils" --filter "@reown/appkit-scaffold-ui" --filter "@reown/appkit-pay" build

      - name: Run Chromatic
        id: chromatic
        continue-on-error: true
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          workingDir: apps/gallery
          buildScriptName: build
          onlyChanged: true
          autoAcceptChanges: false
          exitZeroOnChanges: true
          zip: true

      - name: Comment on PR with Chromatic results
        if: github.event_name == 'pull_request' && always()
        uses: actions/github-script@v7
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          script: |
            const chromaticUrl = '${{ steps.chromatic.outputs.url }}';
            const buildUrl = '${{ steps.chromatic.outputs.buildUrl }}';
            const storybookUrl = '${{ steps.chromatic.outputs.storybookUrl }}';
            const changeCount = '${{ steps.chromatic.outputs.changeCount }}';
            const outcome = '${{ steps.chromatic.outcome }}';

            const status = outcome === 'success' ? '✅ Passed' : '❌ Failed';
            const changesText = changeCount > 0 ? `⚠️ ${changeCount} visual change(s) detected` : '✨ No visual changes detected';

            const commentBody = `## Visual Regression Test Results ${status}

            ${changesText}

            **Chromatic Build:** ${buildUrl || chromaticUrl || 'URL not available'}
            **Storybook Preview:** ${storybookUrl || 'Not available'}

            ${changeCount > 0 ? '👉 Please review the visual changes in Chromatic and accept or reject them.' : ''}`;

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

            const botComment = comments.data.find(comment =>
              comment.user.type === 'Bot' &&
              comment.body.includes('Visual Regression Test Results')
            );

            // Update existing comment or create new one
            if (botComment) {
              await github.rest.issues.updateComment({
                comment_id: botComment.id,
                owner: context.repo.owner,
                repo: context.repo.repo,
                body: commentBody
              });
            } else {
              await github.rest.issues.createComment({
                issue_number: context.issue.number,
                owner: context.repo.owner,
                repo: context.repo.repo,
                body: commentBody
              });
            }