ci: gate visual regression tests by path

.github/workflows/main.yml

@@ -34,10 +34,6 @@
           command: npm run test:a11y -w packages/stacks-classic -- --config web-test-runner.config.ci.mjs
           needs_lfs: false
           needs_playwright: true
-        - command_description: Visual Regression Tests
-          command: npm run test:visual:ci -w packages/stacks-classic -- --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.ci.mjs
-          needs_lfs: true
-          needs_playwright: false # we are using playwright docker image to run visual tests
         - command_description: Unit Tests (stacks-svelte)
           command: npm run test -w packages/stacks-svelte
           needs_lfs: false
@@ -53,17 +49,28 @@
       needs_lfs: ${{ matrix.needs_lfs }}
     secrets: inherit
 
+  visual-regression-tests:
+    name: Visual Regression Tests
+    uses: ./.github/workflows/test-visual-regression.yml
+    secrets: inherit
+
   release:
     name: Release (latest or beta)
-    if: github.ref == 'refs/heads/develop' || github.ref == 'refs/heads/beta'
-    needs: [build-and-test]
+    if: >-
+      ${{
+        !cancelled() &&
+        (github.ref == 'refs/heads/develop' || github.ref == 'refs/heads/beta') &&
+        needs.build-and-test.result == 'success' &&
+        (needs.visual-regression-tests.result == 'success' || needs.visual-regression-tests.result == 'skipped')
+      }}
+    needs: [build-and-test, visual-regression-tests]
     runs-on: ubuntu-latest
     outputs:
       published: ${{ steps.changesets.outputs.published }}
     steps:
       - uses: actions/checkout@v5
       - name: Setup Node.js environment
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: lts/*
           cache: "npm"

.github/workflows/test-visual-regression.yml

@@ -0,0 +1,62 @@
+name: Visual Regression Tests
+run-name: Visual Regression Tests
+
+on:
+  workflow_call:
+
+jobs:
+  changes:
+    name: Detect Changes
+    runs-on: ubuntu-latest
+    outputs:
+      should_run: ${{ steps.filter.outputs.run }}
+    steps:
+      - name: ⬇️ Checkout
+        uses: actions/checkout@v5
+
+      - name: Detect Stacks Classic changes
+        id: filter
+        uses: dorny/paths-filter@v4
+        with:
+          filters: |
+            run:
+              - 'packages/stacks-classic/**'
+
+  visual-regression-tests:
+    name: Visual Regression Tests
+    needs: changes
+    if: needs.changes.outputs.should_run == 'true'
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout
+        uses: actions/checkout@v5
+        with:
+          lfs: true
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v5
+        with:
+          node-version: 'lts/*'
+
+      - name: 🏗 Install Dependencies
+        run: npm ci
+
+      - name: 🔑 Setup SSH for private submodule
+        run: |
+          mkdir -p ~/.ssh
+          echo -e "${SUBMODULE_SSH_KEY//_/\\n}" > ~/.ssh/id_rsa
+          chmod og-rwx ~/.ssh/id_rsa
+        env:
+          SUBMODULE_SSH_KEY: ${{ secrets.SUBMODULE_SSH_KEY }}
+
+      - name: ▶️ Visual Regression Tests
+        run: npm run test:visual:ci -w packages/stacks-classic -- --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.ci.mjs
+        env:
+          BETTER_AUTH_SECRET: ${{ secrets.AUTH_SECRET || 'ci-build-placeholder-secret' }}
+
+      - name: ⬆️ Upload Visual Regression Test Results
+        uses: actions/upload-artifact@v4
+        if: ${{ failure() }}
+        with:
+          name: visual-regression-test-results
+          path: packages/stacks-classic/screenshots

.github/workflows/test.yml

@@ -27,12 +27,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: ⬇️ Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           lfs: ${{ inputs.needs_lfs }}
 
       - name: ⎔ Setup node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: 'lts/*'