Fixed a bug with the cookie consent flash message

when it only appeared on the cookie page.
uktrade · Aug 7, 2024 · b97d314 · b97d314
1 parent 3ed9121
commit b97d314
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 118 deletions.
diff --git a/src/client/modules/ExportWins/Review/CookiePage/index.jsx b/src/client/modules/ExportWins/Review/CookiePage/index.jsx
@@ -1,29 +1,11 @@
 import React from 'react'
 import { H2 } from 'govuk-react'
 
-import { GREEN } from '../../../../utils/colours'
 import { FieldRadios, Form } from '../../../../components'
-import RecentTaskResult from '../../../../components/Task/RecentResult'
-
 import Layout from '../Layout'
-import { StyledStatusMessage } from '../ThankYou'
 
 const CookiePage = () => (
-  <Layout
-    title="Export Wins cookie policy"
-    headingContent={
-      <RecentTaskResult name="save cookie preference" id="cookieConsent">
-        {(consent) =>
-          consent && (
-            <StyledStatusMessage colour={GREEN}>
-              Yo've {consent === 'granted' ? 'accepted' : 'rejected'} additional
-              cookies. You can change your cookie settings at any time.
-            </StyledStatusMessage>
-          )
-        }
-      </RecentTaskResult>
-    }
-  >
+  <Layout title="Export Wins cookie policy">
     <H2>How cookies are used in Export Wins</H2>
     <p>Export wins puts small files (known as 'cookies') onto your computer.</p>
     <p>

diff --git a/src/client/modules/ExportWins/Review/Layout.jsx b/src/client/modules/ExportWins/Review/Layout.jsx
@@ -3,12 +3,13 @@ import styled from 'styled-components'
 import { Button, H1, H2, Link } from 'govuk-react'
 import { FONT_SIZE, FONT_WEIGHTS, SPACING } from '@govuk-react/constants'
 
+import RecentTaskResult from '../../../components/Task/RecentResult'
+import { StyledStatusMessage } from './ThankYou'
 import { FormActions } from '../../../components'
 import Footer from '../../../components/Footer'
 import Task from '../../../components/Task'
 import Resource from '../../../components/Resource/Resource'
-import { BLACK, WHITE, LIGHT_GREY } from '../../../utils/colours'
-import RecentTaskResult from '../../../components/Task/RecentResult'
+import { BLACK, WHITE, LIGHT_GREY, GREEN } from '../../../utils/colours'
 
 const Grid = styled.div({
   minHeight: '100vh',
@@ -78,6 +79,19 @@ const CookieBanner = styled.div({
   paddingTop: SPACING.SCALE_3,
 })
 
+const CookieConsentConfirmation = () => (
+  <RecentTaskResult name="save cookie preference" id="cookieConsent">
+    {(consent) =>
+      consent && (
+        <StyledStatusMessage colour={GREEN}>
+          Yo've {consent === 'granted' ? 'accepted' : 'rejected'} additional
+          cookies. You can change your cookie settings at any time.
+        </StyledStatusMessage>
+      )
+    }
+  </RecentTaskResult>
+)
+
 const Layout = ({ children, title, supertitle, headingContent }) => (
   <Grid>
     <CookieBannerBackground />
@@ -120,9 +134,7 @@ const Layout = ({ children, title, supertitle, headingContent }) => (
                       )
                     }}
                   </Task>
-                  <Link href="/exportwins/review/cookie-page">
-                    View cookies
-                  </Link>
+                  <Link href="/exportwins/review/cookies">View cookies</Link>
                 </FormActions>
               </CookieBanner>
             )
@@ -136,6 +148,7 @@ const Layout = ({ children, title, supertitle, headingContent }) => (
     <Header>
       <p>{supertitle}</p>
       <Title>{title}</Title>
+      <CookieConsentConfirmation />
       {headingContent}
     </Header>
     <Main>{children}</Main>

diff --git a/test/functional/cypress/specs/export-win/review-spec.js b/test/functional/cypress/specs/export-win/review-spec.js
@@ -8,6 +8,18 @@ import {
 
 const getBannerButton = (action) => cy.contains(`${action} analytics cookies`)
 
+const assertFlashMessage = (verb) => {
+  if (verb === false) {
+    cy.contains(
+      'additional cookies. You can change your cookie settings at any time.'
+    ).should('not.exist')
+  } else {
+    cy.contains(
+      `Yo've ${verb} additional cookies. You can change your cookie settings at any time.`
+    )
+  }
+}
+
 const assertCookieBanner = (shouldExist) => {
   const asertion = shouldExist ? 'exist' : 'not.exist'
   cy.contains('h2', 'Cookies').should(asertion)
@@ -21,11 +33,6 @@ const assertCookieBanner = (shouldExist) => {
   getBannerButton('Reject').should(asertion)
 }
 
-const assertFlashMessage = (verb) =>
-  cy.contains(
-    `Yo've ${verb} additional cookies. You can change your cookie settings at any time.`
-  )
-
 describe('Export wins review', () => {
   ;[
     '/exportwins/review/dummy-token',
@@ -59,61 +66,46 @@ describe('Export wins review', () => {
           '/exportwins/review/cookies'
         )
       })
-    })
-  })
 
-  context('Cookie page', () => {
-    const test = ({ accept, how, action }) =>
-      it(`${accept ? 'Grant' : 'Deny'} through ${how}`, () => {
-        action()
-
-        assertCookieBanner(false)
-        assertFlashMessage(accept ? 'accepted' : 'rejected')
-        assertFieldRadiosStrict({
-          inputName: 'cookieConsent',
-          options: ['Yes', 'No'],
-          selectedIndex: accept ? 0 : 1,
+      context('Cookie consent', () => {
+        context('No existing preference', () => {
+          it('Should display cookie banner', () => {
+            assertCookieBanner(true)
+            assertFlashMessage(false)
+          })
+          ;[true, false].forEach((accept) =>
+            it(`${accept ? 'Grant' : 'Deny'} through cookie banner`, () => {
+              getBannerButton(accept ? 'Accept' : 'Reject').click()
+              assertCookieBanner(false)
+              assertFlashMessage(accept ? 'accepted' : 'rejected')
+            })
+          )
         })
-      })
 
-    ;[true, false].forEach((existingPreference) =>
-      it(`Should not show cookie banner if existing preference was "${existingPreference}"`, () => {
-        cy.visit('/exportwins/review/cookies', {
-          onBeforeLoad: (win) => {
-            win.localStorage.setItem(
-              COOKIE_CONSENT_COOKIE_NAME,
-              existingPreference ? GRANTED : DENIED
-            )
-          },
-        })
-        assertCookieBanner(false)
-        assertFieldRadiosStrict({
-          inputName: 'cookieConsent',
-          options: ['Yes', 'No'],
-          selectedIndex: existingPreference ? 0 : 1,
+        context('Existing preference', () => {
+          ;[true, false].forEach((existingPreference) => {
+            context(existingPreference ? 'Yes' : 'No', () => {
+              it('Should not display cookie banner', () => {
+                cy.visit(url, {
+                  onBeforeLoad: (win) => {
+                    win.localStorage.setItem(
+                      COOKIE_CONSENT_COOKIE_NAME,
+                      existingPreference ? GRANTED : DENIED
+                    )
+                  },
+                })
+                assertCookieBanner(false)
+                assertFlashMessage(false)
+              })
+            })
+          })
         })
       })
-    )
-    ;[
-      {
-        existingPreference: false,
-        accept: true,
-        how: 'form',
-        action: () => {
-          cy.contains('label', 'Yes').click()
-          cy.contains('button', 'Save cookie settings').click()
-        },
-      },
-      {
-        existingPreference: true,
-        accept: false,
-        how: 'form',
-        action: () => {
-          cy.contains('label', 'No').click()
-          cy.contains('button', 'Save cookie settings').click()
-        },
-      },
-    ].forEach(({ existingPreference, ...rest }) => {
+    })
+  })
+
+  context('Cookie page', () => {
+    ;[true, false].forEach((existingPreference) => {
       context(
         `Existing preference "${existingPreference ? 'Yes' : 'No'}"`,
         () => {
@@ -128,58 +120,53 @@ describe('Export wins review', () => {
             })
           )
 
-          it(`Should not show cookie banner if existing preference was "${existingPreference}"`, () => {
+          it(`The "${existingPreference ? 'Yes' : 'No'}" radio should be checked`, () => {
             assertCookieBanner(false)
+            assertFlashMessage(false)
             assertFieldRadiosStrict({
               inputName: 'cookieConsent',
               options: ['Yes', 'No'],
               selectedIndex: existingPreference ? 0 : 1,
             })
           })
-          test(rest)
+          ;[true, false].forEach((accept) => {
+            it(`${accept ? 'Grant' : 'Deny'} through form`, () => {
+              cy.contains('label', accept ? 'Yes' : 'No').click()
+              cy.contains('button', 'Save cookie settings').click()
+
+              assertCookieBanner(false)
+              assertFlashMessage(accept ? 'accepted' : 'rejected')
+
+              assertFieldRadiosStrict({
+                inputName: 'cookieConsent',
+                options: ['Yes', 'No'],
+                selectedIndex: accept ? 0 : 1,
+              })
+            })
+          })
         }
       )
-    })
 
-    context('No existing preference', () => {
-      beforeEach(() => cy.visit('/exportwins/review/cookies'))
+      context('No existing preferrence', () => {
+        beforeEach(() => cy.visit('/exportwins/review/cookies'))
+        ;[true, false].forEach((accept) => {
+          it(`${accept ? 'Grant' : 'Deny'} through cookie banner`, () => {
+            assertCookieBanner(true)
+            assertFlashMessage(false)
 
-      it('Displays banner and form with no selected prefference', () => {
-        assertCookieBanner(true)
-        assertFieldRadiosStrict({
-          inputName: 'cookieConsent',
-          options: ['Yes', 'No'],
-          selectedIndex: null,
+            getBannerButton(accept ? 'Accept' : 'Reject').click()
+
+            assertCookieBanner(false)
+            assertFlashMessage(accept ? 'accepted' : 'rejected')
+
+            assertFieldRadiosStrict({
+              inputName: 'cookieConsent',
+              options: ['Yes', 'No'],
+              selectedIndex: accept ? 0 : 1,
+            })
+          })
         })
       })
-      ;[
-        {
-          accept: true,
-          how: 'banner',
-          action: () => getBannerButton('Accept').click(),
-        },
-        {
-          accept: false,
-          how: 'banner',
-          action: () => getBannerButton('Reject').click(),
-        },
-        {
-          accept: true,
-          how: 'form',
-          action: () => {
-            cy.contains('label', 'Yes').click()
-            cy.contains('button', 'Save cookie settings').click()
-          },
-        },
-        {
-          accept: false,
-          how: 'form',
-          action: () => {
-            cy.contains('label', 'No').click()
-            cy.contains('button', 'Save cookie settings').click()
-          },
-        },
-      ].forEach(test)
     })
   })
 })