From 8302ca014e74d5dde86200c26b5719f883ccf3cb Mon Sep 17 00:00:00 2001 From: Iqbal Ahmed Date: Wed, 28 Jan 2026 09:52:36 +0000 Subject: [PATCH] PP-14288 Percy - integrate with Github actions - Set up Github actions so that the Percy runs with Cypress on every PR and MERGE to master. --- .github/workflows/_run-tests.yml | 108 +++++++++--------- .github/workflows/post-merge.yml | 1 + .github/workflows/pr.yml | 1 + .../cookie-banner/cookie-banner.cy.js | 1 + 4 files changed, 59 insertions(+), 52 deletions(-) diff --git a/.github/workflows/_run-tests.yml b/.github/workflows/_run-tests.yml index 42dcccd7d8..cb3d73a35d 100644 --- a/.github/workflows/_run-tests.yml +++ b/.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,60 +23,60 @@ 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 @@ -82,22 +84,24 @@ jobs: 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 }} diff --git a/.github/workflows/post-merge.yml b/.github/workflows/post-merge.yml index c0aa1f3bb7..c764a3bafe 100644 --- a/.github/workflows/post-merge.yml +++ b/.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: diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index 6f732b6c12..a6a1b01ba6 100644 --- a/.github/workflows/pr.yml +++ b/.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 diff --git a/test/cypress/integration/cookie-banner/cookie-banner.cy.js b/test/cypress/integration/cookie-banner/cookie-banner.cy.js index 17a69d0fcf..3f7890c943 100644 --- a/test/cypress/integration/cookie-banner/cookie-banner.cy.js +++ b/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') })