Merge pull request #1976 from UK-Export-Finance/fix/EMS-2873

fix(EMS-2873): Cookies consent banner - "view cookies" link
UK-Export-Finance · Feb 27, 2024 · 239267a · 239267a
2 parents 4c881a9 + 399b399
commit 239267a
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 31 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -207,6 +207,7 @@ jobs:
             "check-your-answers/policy/**/*.spec.js",
             "check-your-answers/your-business/**/*.spec.js",
             "check-your-answers/your-buyer/**/*.spec.js",
+            "cookies-consent/**/*.spec.js",
             "dashboard/**/*.spec.js",
             "declarations/anti-bribery/**/*.spec.js",
             "declarations/confidentiality/**/*.spec.js",

diff --git a/e2e-tests/commands/analytics/check-analytics-cookies-consent-and-accept.js b/e2e-tests/commands/analytics/check-analytics-cookies-consent-and-accept.js
@@ -7,8 +7,13 @@ const accept = () => {
   partials.cookieBanner.hideButton().click();
 };
 
-const checkAnalyticsCookiesConsentAndAccept = () => {
-  checkCookiesConsentBannerIsVisible();
+/**
+ * checkAnalyticsCookiesConsentAndAccept
+ * Check analytics cookies consent banner contents and accept the cookies.
+ * @param {Boolean} isInsurancePage: Current page is an "insurance" page.
+ */
+const checkAnalyticsCookiesConsentAndAccept = ({ isInsurancePage }) => {
+  checkCookiesConsentBannerIsVisible({ isInsurancePage });
   accept();
   checkCookiesConsentBannerIsNotVisible();
 

diff --git a/e2e-tests/commands/analytics/check-cookies-consent-banner-is-visible.js b/e2e-tests/commands/analytics/check-cookies-consent-banner-is-visible.js
@@ -1,8 +1,14 @@
 import partials from '../../partials';
 import { ROUTES } from '../../constants';
+
 import { COOKIES_CONSENT } from '../../content-strings';
 
-const checkCookiesConsentBannerIsVisible = () => {
+/**
+ * checkCookiesConsentBannerIsVisible
+ * Check that the "cookies consent" banner is visible, and has the correct elements.
+ * @param {Boolean} isInsurancePage: Current page is an "insurance" page.
+ */
+const checkCookiesConsentBannerIsVisible = ({ isInsurancePage }) => {
   partials.cookieBanner.heading().should('exist');
 
   cy.checkText(partials.cookieBanner.question.copy(), COOKIES_CONSENT.QUESTION.COPY);
@@ -11,9 +17,11 @@ const checkCookiesConsentBannerIsVisible = () => {
 
   cy.checkText(partials.cookieBanner.question.rejectButton(), COOKIES_CONSENT.QUESTION.REJECT_BUTTON);
 
+  const expectedLink = isInsurancePage ? ROUTES.INSURANCE.COOKIES : ROUTES.COOKIES;
+
   cy.checkLink(
     partials.cookieBanner.cookiesLink(),
-    ROUTES.COOKIES,
+    expectedLink,
     COOKIES_CONSENT.QUESTION.VIEW_COOKIES,
   );
 };

diff --git a/e2e-tests/commands/core-page-checks.js b/e2e-tests/commands/core-page-checks.js
@@ -93,7 +93,7 @@ const corePageChecks = ({
 
   if (assertCookies) {
   // check analytics cookie banner
-    cy.checkAnalyticsCookiesConsentAndAccept();
+    cy.checkAnalyticsCookiesConsentAndAccept({ isInsurancePage });
     cy.rejectAnalyticsCookies();
   }
 

diff --git a/e2e-tests/insurance/cypress/e2e/journeys/cookies-consent/cookies-consent.spec.js b/e2e-tests/insurance/cypress/e2e/journeys/cookies-consent/cookies-consent.spec.js
@@ -0,0 +1,82 @@
+import partials from '../../../../../partials';
+import { COOKIES_CONSENT } from '../../../../../content-strings';
+import { INSURANCE_ROUTES } from '../../../../../constants/routes/insurance';
+
+const { COOKIES, ROOT } = INSURANCE_ROUTES;
+
+const baseUrl = Cypress.config('baseUrl');
+
+context('Insurance - Cookies consent - initial/default', () => {
+  const rootUrl = `${baseUrl}${ROOT}`;
+
+  beforeEach(() => {
+    cy.clearCookies();
+    cy.navigateToUrl(rootUrl);
+  });
+
+  it('should render a link to cookies', () => {
+    cy.checkLink(
+      partials.cookieBanner.cookiesLink(),
+      COOKIES,
+      COOKIES_CONSENT.QUESTION.VIEW_COOKIES,
+    );
+  });
+
+  it(`should redirect to ${COOKIES} when clicking cookies link`, () => {
+    partials.cookieBanner.cookiesLink().click();
+
+    const expectedUrl = `${baseUrl}${COOKIES}`;
+
+    cy.assertUrl(expectedUrl);
+  });
+
+  describe('when clicking `accept cookies` button', () => {
+    beforeEach(() => {
+      cy.clearCookies();
+      cy.navigateToUrl(rootUrl);
+
+      partials.cookieBanner.question.acceptButton().click();
+    });
+
+    it(`should render 'accepted' banner with link to ${COOKIES}`, () => {
+      cy.checkLink(
+        partials.cookieBanner.cookiesLink(),
+        COOKIES,
+        COOKIES_CONSENT.COOKIES_LINK,
+      );
+    });
+
+    it(`should redirect to ${COOKIES} when clicking cookies link`, () => {
+      partials.cookieBanner.cookiesLink().click();
+
+      const expectedUrl = `${baseUrl}${COOKIES}`;
+
+      cy.assertUrl(expectedUrl);
+    });
+  });
+
+  describe('when clicking `reject cookies` button', () => {
+    beforeEach(() => {
+      cy.clearCookies();
+      cy.navigateToUrl(rootUrl);
+
+      partials.cookieBanner.question.rejectButton().click();
+    });
+
+    it(`should render 'rejected' banner with link to ${COOKIES}`, () => {
+      cy.checkLink(
+        partials.cookieBanner.cookiesLink(),
+        COOKIES,
+        COOKIES_CONSENT.COOKIES_LINK,
+      );
+    });
+
+    it(`should redirect to ${COOKIES} when clicking cookies link`, () => {
+      partials.cookieBanner.cookiesLink().click();
+
+      const expectedUrl = `${baseUrl}${COOKIES}`;
+
+      cy.assertUrl(expectedUrl);
+    });
+  });
+});
diff --git a/e2e-tests/quote/cypress/e2e/journeys/cookies-consent/banner/cookies-consent.spec.js b/e2e-tests/quote/cypress/e2e/journeys/cookies-consent/banner/cookies-consent.spec.js
@@ -62,7 +62,7 @@ context('Cookies consent - initial/default', () => {
       );
     });
 
-    it('should redirect to cookies page when clicking cookies link', () => {
+    it(`should redirect to ${COOKIES} when clicking cookies link`, () => {
       partials.cookieBanner.cookiesLink().click();
 
       const expectedUrl = `${baseUrl}${COOKIES}`;

diff --git a/src/ui/server/helpers/page-variables/core/index.test.ts b/src/ui/server/helpers/page-variables/core/index.test.ts
@@ -41,19 +41,20 @@ describe('server/helpers/page-variables/core', () => {
           BUTTONS,
           COOKIES_CONSENT,
           ERROR_MESSAGES: { THERE_IS_A_PROBLEM },
-          HEADER,
           FOOTER: INSURANCE_FOOTER,
+          HEADER,
           LINKS,
           PHASE_BANNER,
           PRODUCT: { DESCRIPTION: PRODUCT_CONTENT_STRING.DESCRIPTION.APPLICATION },
         },
         BACK_LINK: mock.BACK_LINK,
-        START_ROUTE: insuranceStart,
+        COOKIES_ROUTE: ROUTES.INSURANCE.COOKIES,
         FEEDBACK_ROUTE: ROUTES.INSURANCE.FEEDBACK,
         DATA_CY: {
           HEADING: 'heading',
           BACK_LINK: 'back-link',
         },
+        START_ROUTE: insuranceStart,
       };
 
       expect(result).toEqual(expected);
@@ -75,26 +76,27 @@ describe('server/helpers/page-variables/core', () => {
           BUTTONS,
           COOKIES_CONSENT,
           ERROR_MESSAGES: { THERE_IS_A_PROBLEM },
-          HEADER,
           FOOTER: INSURANCE_FOOTER,
+          HEADER,
           LINKS,
           PHASE_BANNER,
           PRODUCT: { DESCRIPTION: PRODUCT_CONTENT_STRING.DESCRIPTION.APPLICATION },
         },
         BACK_LINK: mock.BACK_LINK,
-        START_ROUTE: insuranceStart,
-        FEEDBACK_ROUTE: ROUTES.INSURANCE.FEEDBACK,
+        COOKIES_ROUTE: ROUTES.INSURANCE.COOKIES,
         DATA_CY: {
           HEADING: 'heading',
           BACK_LINK: 'back-link',
         },
+        FEEDBACK_ROUTE: ROUTES.INSURANCE.FEEDBACK,
+        START_ROUTE: insuranceStart,
       };
 
       expect(result).toEqual(expected);
     });
   });
 
-  describe('when ORIGINAL_URL does not contain "insurance"', () => {
+  describe('when ORIGINAL_URL does NOT contain "insurance"', () => {
     it('should return an object with provided data and additional content strings, footer, startRoute and product for quote', () => {
       const quoteMock = {
         ...mock,
@@ -109,19 +111,20 @@ describe('server/helpers/page-variables/core', () => {
           BUTTONS,
           COOKIES_CONSENT,
           ERROR_MESSAGES: { THERE_IS_A_PROBLEM },
-          HEADER,
           FOOTER: QUOTE_FOOTER,
+          HEADER,
           LINKS,
           PHASE_BANNER,
           PRODUCT: { DESCRIPTION: PRODUCT_CONTENT_STRING.DESCRIPTION.QUOTE },
         },
         BACK_LINK: mock.BACK_LINK,
-        START_ROUTE: quoteStart,
-        FEEDBACK_ROUTE: LINKS.EXTERNAL.FEEDBACK,
+        COOKIES_ROUTE: ROUTES.COOKIES,
         DATA_CY: {
           HEADING: 'heading',
           BACK_LINK: 'back-link',
         },
+        FEEDBACK_ROUTE: LINKS.EXTERNAL.FEEDBACK,
+        START_ROUTE: quoteStart,
       };
 
       expect(result).toEqual(expected);
@@ -144,19 +147,20 @@ describe('server/helpers/page-variables/core', () => {
           BUTTONS,
           COOKIES_CONSENT,
           ERROR_MESSAGES: { THERE_IS_A_PROBLEM },
-          HEADER,
           FOOTER: QUOTE_FOOTER,
+          HEADER,
           LINKS,
           PHASE_BANNER,
           PRODUCT: { DESCRIPTION: PRODUCT_CONTENT_STRING.DESCRIPTION.GENERIC },
         },
         BACK_LINK: mock.BACK_LINK,
-        START_ROUTE: quoteStart,
-        FEEDBACK_ROUTE: LINKS.EXTERNAL.FEEDBACK,
+        COOKIES_ROUTE: ROUTES.COOKIES,
         DATA_CY: {
           HEADING: 'heading',
           BACK_LINK: 'back-link',
         },
+        FEEDBACK_ROUTE: LINKS.EXTERNAL.FEEDBACK,
+        START_ROUTE: quoteStart,
       };
 
       expect(result).toEqual(expected);

diff --git a/src/ui/server/helpers/page-variables/core/index.ts b/src/ui/server/helpers/page-variables/core/index.ts
@@ -9,9 +9,9 @@ import {
   LINKS,
   PRODUCT as PRODUCT_CONTENT_STRINGS,
 } from '../../../content-strings';
-import { CorePageVariablesInput, CorePageVariables } from '../../../../types';
 import { ROUTES } from '../../../constants';
 import isInsuranceRoute from '../../is-insurance-route';
+import { CorePageVariablesInput, CorePageVariables } from '../../../../types';
 
 const { THERE_IS_A_PROBLEM } = ERROR_MESSAGES;
 
@@ -26,16 +26,17 @@ const { THERE_IS_A_PROBLEM } = ERROR_MESSAGES;
  */
 const corePageVariables = ({ PAGE_CONTENT_STRINGS, BACK_LINK, ORIGINAL_URL, USE_GENERIC_HEADER }: CorePageVariablesInput): CorePageVariables => {
   /**
-   * checks if rhe ORIGINAL_URL is an insurance route or not
-   * if insurance - either contains insurance or is undefined
-   * if is not undefined and does not contain insurance, then is a quote route
+   * Check if the ORIGINAL_URL is an insurance route or not.
+   * If insurance - ORIGINAL_URL contains "insurance".
+   * Otherwise, ORIGINAL_URL is a "quote" route.
    */
   const insuranceRoute = isInsuranceRoute(ORIGINAL_URL);
 
+  let COOKIES_ROUTE = ROUTES.COOKIES;
+  let FEEDBACK_ROUTE = LINKS.EXTERNAL.FEEDBACK;
   let FOOTER = QUOTE_FOOTER;
   let PRODUCT = { DESCRIPTION: PRODUCT_CONTENT_STRINGS.DESCRIPTION.QUOTE };
   let START_ROUTE = ROUTES.QUOTE.START;
-  let FEEDBACK_ROUTE = LINKS.EXTERNAL.FEEDBACK;
 
   if (USE_GENERIC_HEADER) {
     PRODUCT = { DESCRIPTION: PRODUCT_CONTENT_STRINGS.DESCRIPTION.GENERIC };
@@ -46,10 +47,11 @@ const corePageVariables = ({ PAGE_CONTENT_STRINGS, BACK_LINK, ORIGINAL_URL, USE_
    * this sets the footer, product and start route to be insurance ones
    */
   if (insuranceRoute) {
+    COOKIES_ROUTE = ROUTES.INSURANCE.COOKIES;
+    FEEDBACK_ROUTE = ROUTES.INSURANCE.FEEDBACK;
     FOOTER = INSURANCE_FOOTER;
     PRODUCT = { DESCRIPTION: PRODUCT_CONTENT_STRINGS.DESCRIPTION.APPLICATION };
     START_ROUTE = ROUTES.INSURANCE.START;
-    FEEDBACK_ROUTE = ROUTES.INSURANCE.FEEDBACK;
   }
 
   return {
@@ -58,15 +60,16 @@ const corePageVariables = ({ PAGE_CONTENT_STRINGS, BACK_LINK, ORIGINAL_URL, USE_
       BUTTONS,
       COOKIES_CONSENT,
       ERROR_MESSAGES: { THERE_IS_A_PROBLEM },
-      HEADER,
       FOOTER,
+      HEADER,
       LINKS,
       PHASE_BANNER,
       PRODUCT,
     },
     BACK_LINK,
-    START_ROUTE,
+    COOKIES_ROUTE,
     FEEDBACK_ROUTE,
+    START_ROUTE,
     DATA_CY: {
       HEADING: 'heading',
       BACK_LINK: 'back-link',

diff --git a/src/ui/templates/partials/cookies-banner.njk b/src/ui/templates/partials/cookies-banner.njk
@@ -10,7 +10,7 @@
 {% endset %}
 
 {% set acceptHtml %}
-  <p class="govuk-body" data-cy="cookies-accepted-banner-copy">{{ CONTENT_STRINGS.COOKIES_CONSENT.ACCEPTED.COPY_1 }} <a class="govuk-link" href="/cookies" role="button" data-cy="cookies-banner-cookies-link">{{ CONTENT_STRINGS.COOKIES_CONSENT.COOKIES_LINK }}</a> {{ CONTENT_STRINGS.COOKIES_CONSENT.ACCEPTED.COPY_2 }}</p>
+  <p class="govuk-body" data-cy="cookies-accepted-banner-copy">{{ CONTENT_STRINGS.COOKIES_CONSENT.ACCEPTED.COPY_1 }} <a class="govuk-link" href="{{ COOKIES_ROUTE }}" role="button" data-cy="cookies-banner-cookies-link">{{ CONTENT_STRINGS.COOKIES_CONSENT.COOKIES_LINK }}</a> {{ CONTENT_STRINGS.COOKIES_CONSENT.ACCEPTED.COPY_2 }}</p>
 
   {{ govukButton({
     text: CONTENT_STRINGS.COOKIES_CONSENT.HIDE_BUTTON,
@@ -22,7 +22,7 @@
 {% endset %}
 
 {% set rejectHtml %}
-  <p class="govuk-body" data-cy="cookies-rejected-banner-copy">{{ CONTENT_STRINGS.COOKIES_CONSENT.REJECTED.COPY_1 }} <a class="govuk-link" href="/cookies" role="button" data-cy="cookies-banner-cookies-link">{{ CONTENT_STRINGS.COOKIES_CONSENT.COOKIES_LINK }}</a> {{ CONTENT_STRINGS.COOKIES_CONSENT.REJECTED.COPY_2 }}</p>
+  <p class="govuk-body" data-cy="cookies-rejected-banner-copy">{{ CONTENT_STRINGS.COOKIES_CONSENT.REJECTED.COPY_1 }} <a class="govuk-link" href="{{ COOKIES_ROUTE }}" role="button" data-cy="cookies-banner-cookies-link">{{ CONTENT_STRINGS.COOKIES_CONSENT.COOKIES_LINK }}</a> {{ CONTENT_STRINGS.COOKIES_CONSENT.REJECTED.COPY_2 }}</p>
 
   {{ govukButton({
     text: CONTENT_STRINGS.COOKIES_CONSENT.HIDE_BUTTON,
@@ -95,7 +95,7 @@
             },
             {
               "text": CONTENT_STRINGS.COOKIES_CONSENT.QUESTION.VIEW_COOKIES,
-              "href": "/cookies",
+              "href": COOKIES_ROUTE,
               attributes: {
                 "data-cy": "cookies-banner-cookies-link"
               }

diff --git a/src/ui/types/page-variables.d.ts b/src/ui/types/page-variables.d.ts
@@ -33,11 +33,12 @@ interface CorePageVariablesInput extends CorePageVariablesInitialInput {
 }
 
 interface CorePageVariables {
-  CONTENT_STRINGS: PageVariablesContentStrings;
   BACK_LINK?: string;
+  CONTENT_STRINGS: PageVariablesContentStrings;
+  COOKIES_ROUTE?: string;
+  DATA_CY: PageVariablesDataCy;
   START_ROUTE?: string;
   FEEDBACK_ROUTE?: string;
-  DATA_CY: PageVariablesDataCy;
 }
 
 interface SingleInputPageVariablesInitialInput {