introduce VRT test failures (#45)

* introduce test failures

* only trigger tests if library component file changes

* deliberately introduce visual change

* revert visual change

.github/workflows/chromatic-vrt.yml → .github/workflows/chromatic.yml

@@ -1,9 +1,14 @@
-name: 'Chromatic VRT'
+name: Chromatic
 
-on:
-  pull_request:
-    branches:
-      - main
+on: workflow_call
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}-chromatic
+  cancel-in-progress: true
+
+permissions:
+  actions: write
+  contents: read
 
 jobs:
   chromatic:
@@ -16,10 +21,15 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
+          cache: npm
+          cache-dependency-path: ./package.json
           node-version: 20
       - name: Install dependencies
         run: npm ci
-      - name: Run Chromatic
+      - name: Run Visual Regression Tests
         uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          autoAcceptChanges: 'main'
+          exitZeroOnChanges: true
+          exitOnceUploaded: true

.github/workflows/pull-request.yml

@@ -0,0 +1,43 @@
+name: 'CI checks'
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  ui-changes:
+    runs-on: ubuntu-latest
+    name: ui-changes
+    outputs:
+      any_modified: ${{ steps.ui-changes.outputs.any_modified }}
+      all_modified_files: ${{ steps.ui-changes.outputs.all_modified_files }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Get changed files
+        id: ui-changes
+        uses: tj-actions/changed-files@v44
+        with:
+          write_output_files: true
+          files: |
+            src/**
+            !src/demo/**
+            .storybook/**
+      - name: List all changed files
+        env:
+          ALL_MODIFIED_FILES: ${{ steps.ui-changes.outputs.all_modified_files }}
+          ANY_MODIFIED: ${{ steps.ui-changes.outputs.any_modified }}
+        run: |
+          echo "Found ${#ALL_MODIFIED_FILES[@]} changed UI file(s)"
+          for file in ${ALL_MODIFIED_FILES}; do
+            echo "$file"
+          done
+
+  chromatic:
+    name: Run Chromatic
+    needs: [ui-changes]
+    if: ${{ needs.ui-changes.outputs.any_modified == 'true' }}
+    uses: ./.github/workflows/chromatic.yml
+    secrets: inherit

src/demo/index.tsx

@@ -254,4 +254,5 @@ export default function Demo() {
     </div>
   );
 }
+
 createRoot(document.getElementById('app') as HTMLDivElement).render(<Demo />);