PP-13239 Add Cypress tests for custom branding

app/views/includes/custom.njk

@@ -1,14 +1,14 @@
-<header class="govuk-header" role="banner" data-module="govuk-header">
-  <div class="govuk-header__container govuk-width-container">
+<header class="govuk-header" role="banner" data-module="govuk-header" data-cy="header">
+  <div class="govuk-header__container govuk-width-container" data-cy="header-container" data-cy="header-container>
     <div class="govuk-header__logo">
       <span class="govuk-header__link--homepage">
         <span class="govuk-header__logotype">
-          <img src="{{ service.customBranding.imageUrl }}" class="govuk-header__logotype-crown custom-branding-image" alt="">
+          <img src="{{ service.customBranding.imageUrl }}" class="govuk-header__logotype-crown custom-branding-image" alt="" data-cy="custom-branding-image">
         </span>
       </span>
     </div>
     <div class="govuk-header__content">
-      <span class="govuk-header__service-name">
+      <span class="govuk-header__service-name" data-cy="service-name">
         {{ serviceName }}
       </span>
     </div>

package.json

@@ -72,7 +72,7 @@
   "dependencies": {
     "@aws-crypto/decrypt-node": "^1.0.3",
     "@aws-crypto/raw-rsa-keyring-node": "^1.1.0",
-    "@govuk-pay/pay-js-commons": "^6.0.18",
+    "@govuk-pay/pay-js-commons": "^6.0.22",
     "@govuk-pay/pay-js-metrics": "^1.0.6",
     "@sentry/node": "7.119.2",
     "cert-info": "^1.5.1",

test/cypress/integration/card/custom-branding.test.cy.js

@@ -0,0 +1,59 @@
+const cardPaymentStubs = require('../../utils/card-payment-stubs')
+
+const tokenId = 'be88a908-3b99-4254-9807-c855d53f6b2b'
+const chargeId = 'ub8de8r5mh4pb49rgm1ismaqfv'
+
+describe('Custom branding', () => {
+  it('Should setup custom branding correctly when white background with dark text', () => {
+    cy.task('clearStubs')
+    const createPaymentChargeStubs = cardPaymentStubs.buildCreatePaymentChargeStubs(
+      tokenId,
+      chargeId,
+      'en',
+      101,
+      {
+        custom_branding: {
+          image_url: '/public/images/custom/cypress-testing.svg',
+          css_url: '/public/stylesheets/custom/cypress-testing-white-background.min.css'
+        }
+      }
+    )
+
+    cy.task('setupStubs', createPaymentChargeStubs)
+    cy.visit(`/secure/${tokenId}`)
+
+    cy.location('pathname').should('eq', `/card_details/${chargeId}`)
+
+    cy.get('[data-cy=header]').should('have.css', 'background-color', 'rgb(255, 255, 255)')
+    cy.get('[data-cy=header-container]').should('have.css', 'border-bottom-color', 'rgb(0, 0, 0)')
+    cy.get('[data-cy=service-name]').should('have.css', 'color', 'rgb(0, 0, 0)')
+    cy.get('[data-cy=custom-branding-image]').should('have.attr', 'src', '/public/images/custom/cypress-testing.svg')
+  })
+
+  it('Should setup custom branding correctly when purple background with white text', () => {
+    // Cypress.session.clearAllSavedSessions()
+    cy.task('clearStubs')
+    const createPaymentChargeStubs = cardPaymentStubs.buildCreatePaymentChargeStubs(
+      tokenId,
+      chargeId,
+      'en',
+      102,
+      {
+        custom_branding: {
+          image_url: '/public/images/custom/cypress-testing.svg',
+          css_url: '/public/stylesheets/custom/cypress-testing-purple-background.min.css'
+        }
+      }
+    )
+
+    cy.task('setupStubs', createPaymentChargeStubs)
+    cy.visit(`/secure/${tokenId}?date=` + Date.now())
+
+    cy.location('pathname').should('eq', `/card_details/${chargeId}`)
+
+    cy.get('[data-cy=header]').should('have.css', 'background-color', 'rgb(191, 64, 191)')
+    cy.get('[data-cy=header-container]').should('have.css', 'border-bottom-color', 'rgb(0, 0, 0)')
+    cy.get('[data-cy=service-name]').should('have.css', 'color', 'rgb(255, 255, 255)')
+    cy.get('[data-cy=custom-branding-image]').should('have.attr', 'src', '/public/images/custom/cypress-testing.svg')
+  })
+})