Updated Results Page object and Spec file

e2e/pages/results.page.js

@@ -1,13 +1,37 @@
 import { definePage } from './.utils/page.js'
-import { link } from './.utils/form-controls.js'
+import { button, link, textInput, selectInput } from './.utils/form-controls.js'
 
 export const titleForZone = (floodZone) => `This location is in flood zone ${floodZone}`
 export const pageWithZone = (floodZone) => definePage({
   slug: '/results',
   title: titleForZone(floodZone)
 })
 
+// P1 Map Controls
+export const addReferenceToFloodMapDetails = button('Add a reference to the flood map and set the scale')
+export const addReferenceInput = textInput('Add a reference')
+export const scaleSelect = selectInput('Scale')
+export const downloadFloodMapButton = button('Download flood map for this location (PDF)')
 export const orderFloodRiskDataButton = link('Order flood risk data')
 
-export const backToSearchLink = link('Back to search')
-export const floodZoneResultsExplainedLink = link('Flood zone results explained')
+// Only shown for areas over 300ha results pages
+export const editBoundaryLink = link('Edit boundary')
+
+// Internal links
+// export const backToSearchLink = link('Back to search')//remove
+export const findOutMoreAboutFloodZonesLink = link('Find out more about flood zones and what they mean.')
+export const redrawBoundaryLink = link('Redraw the boundary of your site')
+export const searchForDifferentLocationLink = link('Search for a different location')
+export const termsAndConditionsLink = link('terms and conditions')
+export const iNeedHelpDecidingWhatToIncludeInMyPlanningAppLink = link('I need help deciding what to include in my planning application')
+export const seeThisRiskOnTheMapLink = link('See this risk on the map')
+// only shown for flood zone 2 and 3 results
+export const findOutMoreAboutThisDataLink = link('Find out more about this data and how it should be used')
+
+// External links
+// vulnerability classification link only shows for Flood Zone 1 under 1ha results
+export const vulnerabilityClassificationLink = link('vulnerability classification')
+export const residualRiskLink = link('residual risk')
+// Climate change allowances link will only be shown when SW goes into the app
+export const findOutMoreAboutClimateChangeAllowancesLink = link('Find out more about climate change allowances')
+export const findOutWhatProductsAreAvailableLink = link('Find out what products are available')

e2e/test-runner-api/form-driver.js

@@ -62,6 +62,12 @@ export class FormDriver {
     await locator.first().click()
   }
 
+  async clickLinkContainingText (element) {
+    const locator = this.#getLinkLocator(element, false)
+    await expect(locator.first()).toBeVisible()
+    await locator.first().click()
+  }
+
   async switchToNewWindow () {
     const context = this.page.context()
     const allPages = context.pages()
@@ -127,15 +133,15 @@ export class FormDriver {
 
   // ---- Private ---- //
 
-  #getLinkLocator (link) {
+  #getLinkLocator (link, exact = true) {
     if (link.type === 'footerLink') {
-      return this.page.locator('footer').getByRole('link', { name: link.text, exact: true })
+      return this.page.locator('footer').getByRole('link', { name: link.text, exact })
     }
     if (link.type === 'headerLink') {
-      return this.page.locator('header, .govuk-service-navigation, .govuk-phase-banner').getByRole('link', { name: link.text, exact: true })
+      return this.page.locator('header, .govuk-service-navigation, .govuk-phase-banner').getByRole('link', { name: link.text, exact })
     }
     if (link.type === 'mainLink' || link.type === 'link') {
-      return this.page.getByRole('main').getByRole('link', { name: link.text, exact: true })
+      return this.page.getByRole('main').getByRole('link', { name: link.text, exact })
     }
     throw new Error(`Unsupported link type '${link.type}'`)
   }

e2e/tests/pages/results-page.spec.js

@@ -1,10 +1,11 @@
 import { test } from '../../fixtures.js'
 import { pages } from '../../pages/index.js'
-import { areaData } from '../../data/location-data.js'
+import { areaData, floodZonedata } from '../../data/location-data.js'
 
 test.describe('Results page', () => {
   const slug = (polygon) => `/results?encodedPolygon=${encodeURIComponent(polygon)}`
 
+  // Flood zone rendering
   for (const [index, { polygon, floodZone }] of Object.values(areaData).entries()) {
     test(`displays correct flood zone information for area ${index + 1}`, async ({ steps }) => {
       await steps.open({
@@ -15,32 +16,119 @@ test.describe('Results page', () => {
     })
   }
 
-  test('has link to order flood risk data when in an opted-in area', async ({ steps }) => {
-    const polygon = areaData.Yorkshire.polygon
-    await steps.open({
-      ...pages.results.pageWithZone(areaData.Yorkshire.floodZone),
-      slug: slug(polygon)
+  test.describe('Link and content tests', () => {
+    const { polygon, floodZone } = areaData.Yorkshire
+
+    test.beforeEach(async ({ steps }) => {
+      await steps.open({
+        ...pages.results.pageWithZone(floodZone),
+        slug: slug(polygon)
+      })
     })
-    await steps.expectLinkExists(pages.results.orderFloodRiskDataButton)
-  })
 
-  test('does not show order flood risk data link when in an opted-out area', async ({ steps }) => {
-    const polygon = areaData.HertfordshireAndNorthLondon.polygon
-    await steps.open({
-      ...pages.results.pageWithZone(areaData.HertfordshireAndNorthLondon.floodZone),
-      slug: slug(polygon)
+    test('navigates to the Flood zones and what they mean page when clicking the link', async ({ steps }) => {
+      await steps.clickLink(pages.results.findOutMoreAboutFloodZonesLink)
+      await steps.expectOn(pages.floodZoneResultsExplained.page)
+    })
+
+    test('navigates to the how to use flood data page when clicking the find out more about this data and how it should be used link', async ({ steps }) => {
+      await steps.clickLink(pages.results.findOutMoreAboutThisDataLink)
+      await steps.expectOn(pages.howToUseFloodMapForPlanningData.page)
+    })
+
+    test('navigates to map page when clicking the see risk on map link', async ({ steps }) => {
+      await steps.clickLinkContainingText(pages.results.seeThisRiskOnTheMapLink)
+      await steps.expectOn(pages.map.page)
+    })
+
+    test('navigates to map page when clicking the redraw boundary link', async ({ steps }) => {
+      await steps.clickLink(pages.results.redrawBoundaryLink)
+      await steps.expectOn(pages.map.page)
+    })
+
+    test('navigates to the next steps page when clicking the link', async ({ steps }) => {
+      await steps.clickLink(pages.results.iNeedHelpDecidingWhatToIncludeInMyPlanningAppLink)
+      await steps.expectOn(pages.nextSteps.page)
+    })
+
+    test('navigates to location page when clicking the link', async ({ steps }) => {
+      await steps.clickLink(pages.results.searchForDifferentLocationLink)
+      await steps.expectOn(pages.location.page)
+    })
+
+    test('navigates to terms and conditions page when clicking the link', async ({ steps }) => {
+      await steps.clickLink(pages.results.termsAndConditionsLink)
+      await steps.expectOn(pages.termsAndConditions.page)
+    })
+
+    // The following tests validate that external links can be reached.
+    test('navigates to Addressing residual risk page when when clicking the link', { tag: '@urlCheck' }, async ({ steps }) => {
+      await steps.clickLink(pages.results.residualRiskLink)
+      await steps.expectUrlContains('flood-risk-and-coastal-change#para41')
+    })
+
+    /* Climate change allowances link is shown only when SW goes into the app.
+    test('navigates to climate change allowances page when clicking the link', { tag: '@urlCheck' }, async ({ steps }) => {
+      await steps.clickLink(pages.results.findOutMoreAboutClimateChangeAllowancesLink)
+      await steps.expectUrlContains('flood-risk-assessments-climate-change-allowances')
+    })
+    */
+
+    test('navigates to products page when clicking the link', { tag: '@urlCheck' }, async ({ steps }) => {
+      await steps.clickLink(pages.results.findOutWhatProductsAreAvailableLink)
+      await steps.expectUrlContains('get-information-about-flood-risk-from-rivers-and-the-sea-to-help-you-to-complete-afra')
     })
-    await steps.expectOn(pages.results.pageWithZone(areaData.HertfordshireAndNorthLondon.floodZone))
-    await steps.expectLinkNotExists(pages.results.orderFloodRiskDataButton)
   })
 
-  test('has link to order flood risk data link when in an opted-out area', { tag: '@internal' }, async ({ steps }) => {
-    const polygon = areaData.HertfordshireAndNorthLondon.polygon
-    await steps.open({
-      ...pages.results.pageWithZone(areaData.HertfordshireAndNorthLondon.floodZone),
-      slug: slug(polygon)
+  test.describe('Conditional content checks', () => {
+    // The following tests validate the presence of the order flood risk data link based size of polygon and whether the area is opted-in or opted-out.
+    test('has link to order flood risk data when in an opted-in area under 300 hectares', async ({ steps }) => {
+      const polygon = floodZonedata.polygon300
+      await steps.open({
+        ...pages.results.pageWithZone('3'),
+        slug: slug(polygon)
+      })
+      await steps.expectLinkExists(pages.results.orderFloodRiskDataButton)
+    })
+
+    test('does not show order flood risk data link when in an opted-in area over 300 hectares', async ({ steps }) => {
+      const polygon = floodZonedata.polygon300_01
+      await steps.open({
+        ...pages.results.pageWithZone('3'),
+        slug: slug(polygon)
+      })
+      await steps.expectLinkNotExists(pages.results.orderFloodRiskDataButton)
+    })
+
+    test('shows an Edit boundary button which can be clicked to navigate back to the map page when in an opted-in area over 300 hectares', async ({ steps }) => {
+      const polygon = floodZonedata.polygon300_01
+      await steps.open({
+        ...pages.results.pageWithZone('3'),
+        slug: slug(polygon)
+      })
+      await steps.expectLinkExists(pages.results.editBoundaryLink)
+      await steps.clickLink(pages.results.editBoundaryLink)
+      await steps.expectOn(pages.map.page)
+    })
+
+    test('does not show order flood risk data link when in an opted-out area', async ({ steps }) => {
+      const { polygon } = areaData.HertfordshireAndNorthLondon
+      await steps.open({
+        ...pages.results.pageWithZone('1'),
+        slug: slug(polygon)
+      })
+      await steps.expectOn(pages.results.pageWithZone('1'))
+      await steps.expectLinkNotExists(pages.results.orderFloodRiskDataButton)
+    })
+
+    test('has link to order flood risk data button when in an opted-out area when using internal URL', { tag: '@internal' }, async ({ steps }) => {
+      const { polygon } = areaData.HertfordshireAndNorthLondon
+      await steps.open({
+        ...pages.results.pageWithZone('1'),
+        slug: slug(polygon)
+      })
+      await steps.expectOn(pages.results.pageWithZone('1'))
+      await steps.expectLinkExists(pages.results.orderFloodRiskDataButton)
     })
-    await steps.expectOn(pages.results.pageWithZone(areaData.HertfordshireAndNorthLondon.floodZone))
-    await steps.expectLinkExists(pages.results.orderFloodRiskDataButton)
   })
 })