PP-14288 Percy - integrate with Github actions

.github/workflows/_run-tests.yml

@@ -7,6 +7,8 @@ on:
         required: true
       pact_broker_password:
         required: true
+      percy_token:
+        required: true
 
 permissions:
   contents: read
@@ -21,83 +23,85 @@ jobs:
         uses: alphagov/pay-ci/actions/detect-secrets@master
 
   install-and-compile:
-    name: "Install and compile"
+    name: 'Install and compile'
     uses: alphagov/pay-ci/.github/workflows/_run-node-install-and-compile.yml@master
     with:
       has_cypress_tests: true
 
   formatting-check:
-      name: "Formatting check"
-      runs-on: ubuntu-latest
-      needs: [ install-and-compile ]
-      steps:
-        - name: Checkout
-          uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b
-          with:
-            fetch-depth: 50
-        - name: Setup
-          uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8
-          with:
-            node-version-file: ".nvmrc"
-        - name: Cache build directories
-          uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57
-          with:
-            path: |
-              node_modules
-              govuk_modules
-              public
-              dist
-            key: ${{ runner.os }}-build-id-${{ github.head_ref }}-${{ github.sha }}
-        - name: Cache pacts directory
-          if: ${{ inputs.publish_pacts }}
-          uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57
-          with:
-            path: pacts
-            key: ${{ runner.os }}-build-id-${{ github.head_ref }}-${{ github.sha }}-pacts
-        - name: Check PR changes for formatting
-          run: |
-            git fetch origin ${{ github.base_ref }} --depth=1
-            CHANGED_FILES=$(git diff --name-only --diff-filter=AM origin/${{ github.base_ref }}...HEAD | \
-              grep -E '\.(js|ts|json|css|scss|html|njk)$' || true)
+    name: 'Formatting check'
+    runs-on: ubuntu-latest
+    needs: [install-and-compile]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b
+        with:
+          fetch-depth: 50
+      - name: Setup
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8
+        with:
+          node-version-file: '.nvmrc'
+      - name: Cache build directories
+        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57
+        with:
+          path: |
+            node_modules
+            govuk_modules
+            public
+            dist
+          key: ${{ runner.os }}-build-id-${{ github.head_ref }}-${{ github.sha }}
+      - name: Cache pacts directory
+        if: ${{ inputs.publish_pacts }}
+        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57
+        with:
+          path: pacts
+          key: ${{ runner.os }}-build-id-${{ github.head_ref }}-${{ github.sha }}-pacts
+      - name: Check PR changes for formatting
+        run: |
+          git fetch origin ${{ github.base_ref }} --depth=1
+          CHANGED_FILES=$(git diff --name-only --diff-filter=AM origin/${{ github.base_ref }}...HEAD | \
+            grep -E '\.(js|ts|json|css|scss|html|njk)$' || true)
 
-            if [ -z "$CHANGED_FILES" ]; then
-              echo "No files to check"
-              exit 0
-            fi
+          if [ -z "$CHANGED_FILES" ]; then
+            echo "No files to check"
+            exit 0
+          fi
 
-            if ! echo "$CHANGED_FILES" | xargs npx prettier --check; then
-              echo "❌ detected files are not formatted correctly"
-              exit 1
-            fi
+          if ! echo "$CHANGED_FILES" | xargs npx prettier --check; then
+            echo "❌ detected files are not formatted correctly"
+            exit 1
+          fi
 
-            echo "✅ all files are formatted"
+          echo "✅ all files are formatted"
 
   tests:
-    name: "Unit tests and pacts"
-    needs: [ install-and-compile ]
+    name: 'Unit tests and pacts'
+    needs: [install-and-compile]
     uses: alphagov/pay-ci/.github/workflows/_run-node-unit-tests-and-publish-pacts.yml@master
     with:
       publish_pacts: true
     secrets:
       pact_broker_username: ${{ secrets.pact_broker_username }}
       pact_broker_password: ${{ secrets.pact_broker_password }}
 
-  cypress-tests:
-    name: "Cypress"
-    needs: [ install-and-compile ]
-    uses: alphagov/pay-ci/.github/workflows/_run-node-cypress-tests.yml@master
+  cypress-percy-tests:
+    name: 'Cypress'
+    needs: [install-and-compile]
+    uses: alphagov/pay-ci/.github/workflows/_run-node-cypress-tests-percy.yml@master
     with:
-      LIBGL_ALWAYS_SOFTWARE: "1"
+      LIBGL_ALWAYS_SOFTWARE: '1'
+    secrets:
+      percy_token: ${{ secrets.percy_token }}
 
   pact-providers-contract-tests:
-    name: "Provider tests"
+    name: 'Provider tests'
     needs: tests
     uses: alphagov/pay-ci/.github/workflows/_run-provider-pact-tests-for-consumer.yml@master
     strategy:
       matrix:
-        provider: [ 'adminusers', 'connector', 'ledger', 'products' ]
+        provider: ['adminusers', 'connector', 'ledger', 'products']
     with:
-      consumer: "selfservice"
+      consumer: 'selfservice'
       provider: ${{ matrix.provider }}
     secrets:
       pact_broker_username: ${{ secrets.pact_broker_username }}

.github/workflows/post-merge.yml

@@ -18,6 +18,7 @@ jobs:
     secrets:
       pact_broker_username: ${{ secrets.pact_broker_username }}
       pact_broker_password: ${{ secrets.pact_broker_password }}
+      percy_token: ${{ secrets.percy_token }}
 
   tag-release:
     needs:

.github/workflows/pr.yml

@@ -12,6 +12,7 @@ jobs:
     secrets:
       pact_broker_username: ${{ secrets.pact_broker_username }}
       pact_broker_password: ${{ secrets.pact_broker_password }}
+      percy_token: ${{ secrets.percy_token }}
 
   dependency-review:
     name: Dependency Review scan

test/cypress/integration/cookie-banner/cookie-banner.cy.js

@@ -8,6 +8,7 @@ describe('Cookie banner', () => {
 
   describe('Visiting application for first time', () => {
     it('Should show cookie banner on page load', () => {
+      cy.percySnapshot()
       cy.get('#pay-cookie-banner').should('have.css', 'display', 'block')
     })