Merge pull request #961

* chore(32662): add matrix-based jobs for Percy

* chore(32662): trigger frontend

* chore(32662): disable old workflow

* chore(32662): fix working directory [?]

* chore(32662): fix working directory [?]

* Revert "chore(32662): fix working directory [?]"

* Revert "chore(32662): fix working directory [?]"

* chore(32662): fix run

* chore(32662): fix artefact

* chore(32662): add e2e and component support

* chore(32662): use cypress action

* chore(32662): fix names

* chore(32662): fix nonce

* chore(32662): fix command

* chore(32662): combine CodeCov and Percy

* chore(32662): fix checkout

* chore(32662): fix names and clean workflow

* chore(32662): remove deprecated workflow

Author: vanch3d

.github/workflows/check-frontend-visual.yml

@@ -1,6 +1,3 @@
-# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
-
 name: Frontend - React Testing Pyramid
 
 on:
@@ -18,6 +15,7 @@ defaults:
 
 jobs:
   lint:
+    name: Linting
     runs-on: ubuntu-latest
     steps:
       - name: 👓 Checkout repository
@@ -35,6 +33,7 @@ jobs:
         run: pnpm lint:eslint
 
   unit_tests:
+    name: Unit Tests
     runs-on: ubuntu-latest
     steps:
       - name: 👓 Checkout repository
@@ -57,6 +56,7 @@ jobs:
           retention-days: 1
 
   build_production:
+    name: Build Production
     runs-on: ubuntu-latest
     steps:
       - name: 👓 Checkout repository
@@ -78,6 +78,7 @@ jobs:
           retention-days: 1
 
   lighthouse:
+    name: Lighthouse Performance
     runs-on: ubuntu-latest
     needs: [ build_production ]
     steps:
@@ -99,20 +100,37 @@ jobs:
           uploadArtifacts: true # save results as an action artifacts
           configPath: 'hivemq-edge-frontend/.lighthouserc.cjs'
 
+  percy_prepare:
+    name: Percy (initialise parallel)
+    runs-on: ubuntu-latest
+    outputs:
+      LOCAL_NONCE: ${{ steps.percy.outputs.nonce }}
+    steps:
+      - name: 👓 Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+      - id: percy
+        run: |
+          echo "nonce=$(date +'%s')" >> "$GITHUB_OUTPUT"
+
   cypress_matrix:
     runs-on: ubuntu-latest
     continue-on-error: true
-    needs: [ build_production ]
+    needs: [ build_production, percy_prepare ]
+    env:
+      LOCAL_NONCE: ${{ needs.percy_prepare.outputs.LOCAL_NONCE }}
+      PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+    outputs:
+      LOCAL_NONCE: ${{ env.LOCAL_NONCE }}
     strategy:
       matrix:
         cypress: [
-          { component: false, spec: "./cypress/e2e/**/*", lcov_target: "E2E" },
-          { component: true, spec: "./src/components/**/*", lcov_target: "Components" },
-          { component: true, spec: "./src/extensions/**/*", lcov_target: "Extensions" },
-          { component: true, spec: "./src/modules/!(Workspace)**/*", lcov_target: "Modules" },
-          { component: true, spec: "./src/modules/Workspace/**/*", lcov_target: "Workspace" }
+          { component: false, spec: "./cypress/e2e/**/*", target: "E2E" },
+          { component: true, spec: "./src/components/**/*", target: "Components" },
+          { component: true, spec: "./src/extensions/**/*", target: "Extensions" },
+          { component: true, spec: "./src/modules/!(Workspace)**/*", target: "Modules" },
+          { component: true, spec: "./src/modules/Workspace/**/*", target: "Workspace" }
         ]
-    name: Cypress - ${{ matrix.cypress.lcov_target }}
+    name: Cypress - ${{ matrix.cypress.target }}
     steps:
       - name: 👓 Checkout repository
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
@@ -136,22 +154,26 @@ jobs:
           spec: ${{ matrix.cypress.spec }}
           start: pnpm preview --port 3000
           working-directory: ./hivemq-edge-frontend/
+          command-prefix: 'npx percy exec --parallel'
           quiet: true
+        env:
+          PERCY_PARALLEL_NONCE: ${{ env.LOCAL_NONCE }}
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
 
       # after the test, store videos
-      - name: 💾 Upload Cypress - ${{ matrix.cypress.lcov_target }} videos
+      - name: 💾 Upload Cypress - ${{ matrix.cypress.target }} videos
         if: failure()
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
         with:
-          name: cypress-${{ matrix.cypress.lcov_target }}-videos
+          name: cypress-${{ matrix.cypress.target }}-videos
           path: hivemq-edge-frontend/cypress/videos
           if-no-files-found: ignore
           retention-days: 1
 
       - name: 💾 Upload Cypress Code Coverage
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
         with:
-          name: lcov-cypress-${{ matrix.cypress.lcov_target }}
+          name: lcov-cypress-${{ matrix.cypress.target }}
           path: hivemq-edge-frontend/coverage-cypress/lcov.info
           if-no-files-found: ignore
           retention-days: 1
@@ -186,3 +208,25 @@ jobs:
             -Dsonar.verbose=false
         env:
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+
+  percy_finalise:
+    name: Percy (finalise)
+    needs: [ cypress_matrix ]
+    runs-on: ubuntu-latest
+    env:
+      LOCAL_NONCE: ${{ needs.cypress_matrix.outputs.LOCAL_NONCE }}
+      PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+    steps:
+      - name: 👓 Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+
+      - name: 🏗️ Setup node environment
+        uses: ./.github/actions/setup_node
+        with:
+          working-directory: ./hivemq-edge-frontend/
+          run-install: true
+
+      - run: npx percy build:finalize
+        env:
+          PERCY_PARALLEL_NONCE: ${{ env.LOCAL_NONCE }}
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

.github/workflows/check-frontend.yml

@@ -139,6 +139,8 @@ Together. they contain - and enforce - parts of the testing pyramid for frontend
 
 ### Percy - Visual testing
 
+See github actions
+
 ### Lighthouse - Performance testing
 
 ### SonarQube Cloud