chore(deps): bump react-dom from 19.2.5 to 19.2.7 in /frontend #25
Workflow file for this run
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Chromatic Visual Regression Testing Workflow | |
| # Runs visual regression tests on Storybook components using Chromatic | |
| name: Chromatic Visual Regression | |
| on: | |
| push: | |
| branches: | |
| - main | |
| - develop | |
| paths: | |
| - 'frontend/**' | |
| - '.github/workflows/chromatic.yml' | |
| pull_request: | |
| branches: | |
| - main | |
| - develop | |
| paths: | |
| - 'frontend/**' | |
| - '.github/workflows/chromatic.yml' | |
| # Cancel in-progress runs for the same workflow and branch | |
| concurrency: | |
| group: ${{ github.workflow }}-${{ github.ref }} | |
| cancel-in-progress: true | |
| jobs: | |
| chromatic: | |
| name: Run Chromatic Visual Tests | |
| runs-on: ubuntu-latest | |
| timeout-minutes: 15 | |
| defaults: | |
| run: | |
| working-directory: frontend | |
| steps: | |
| - name: Checkout repository | |
| uses: actions/checkout@v4 | |
| with: | |
| fetch-depth: 0 # Required for Chromatic to detect changes | |
| - name: Set up Node.js | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: '20' | |
| cache: 'npm' | |
| cache-dependency-path: frontend/package-lock.json | |
| - name: Install dependencies | |
| run: npm ci | |
| - name: Build Storybook | |
| run: npm run build-storybook | |
| env: | |
| NODE_ENV: production | |
| - name: Publish to Chromatic | |
| id: chromatic | |
| uses: chromaui/action@latest | |
| continue-on-error: true | |
| with: | |
| projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} | |
| workingDir: frontend | |
| buildScriptName: build-storybook | |
| exitZeroOnChanges: true | |
| exitOnceUploaded: true | |
| autoAcceptChanges: ${{ github.ref == 'refs/heads/main' }} | |
| onlyChanged: true | |
| traceChanged: expanded | |
| skip: 'dependabot/**' | |
| zip: true | |
| - name: Comment PR with Chromatic results | |
| if: github.event_name == 'pull_request' && steps.chromatic.outputs.url != '' | |
| uses: actions/github-script@v7 | |
| with: | |
| 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 componentCount = '${{ steps.chromatic.outputs.componentCount }}'; | |
| const specCount = '${{ steps.chromatic.outputs.specCount }}'; | |
| const body = `## 📸 Chromatic Visual Regression Results | |
| **Build Status:** ${changeCount > 0 ? '⚠️ Changes Detected' : '✅ No Visual Changes'} | |
| ### Summary | |
| - **Components Tested:** ${componentCount} | |
| - **Stories Tested:** ${specCount} | |
| - **Visual Changes:** ${changeCount} | |
| ### Links | |
| - 🔍 [View Build Results](${buildUrl}) | |
| - 📚 [View Storybook](${storybookUrl}) | |
| - 🎨 [Chromatic Dashboard](${chromaticUrl}) | |
| ${changeCount > 0 ? '⚠️ **Action Required:** Please review the visual changes in Chromatic before merging.' : '✅ All visual tests passed! No changes detected.'} | |
| `; | |
| github.rest.issues.createComment({ | |
| issue_number: context.issue.number, | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| body: body | |
| }); | |
| - name: Upload Storybook build artifacts | |
| if: always() | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: storybook-build | |
| path: frontend/storybook-static/ | |
| retention-days: 7 | |
| - name: Check for visual changes | |
| if: github.event_name == 'pull_request' | |
| run: | | |
| if [ "${{ steps.chromatic.outputs.changeCount }}" -gt "0" ]; then | |
| echo "⚠️ Visual changes detected: ${{ steps.chromatic.outputs.changeCount }} changes" | |
| echo "Review required at: ${{ steps.chromatic.outputs.buildUrl }}" | |
| else | |
| echo "✅ No visual changes detected" | |
| fi | |
| # Optional: Run accessibility tests alongside visual regression | |
| accessibility: | |
| name: Accessibility Tests | |
| runs-on: ubuntu-latest | |
| timeout-minutes: 10 | |
| defaults: | |
| run: | |
| working-directory: frontend | |
| steps: | |
| - name: Checkout repository | |
| uses: actions/checkout@v4 | |
| - name: Set up Node.js | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: '20' | |
| cache: 'npm' | |
| cache-dependency-path: frontend/package-lock.json | |
| - name: Install dependencies | |
| run: npm ci | |
| - name: Build Storybook | |
| run: npm run build-storybook | |
| - name: Serve Storybook and run accessibility tests | |
| run: | | |
| npx http-server storybook-static --port 6006 & | |
| sleep 5 | |
| npx storybook-test-runner --url http://localhost:6006 | |
| continue-on-error: true | |
| - name: Upload accessibility report | |
| if: always() | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: accessibility-report | |
| path: frontend/test-results/ | |
| retention-days: 7 |