diff --git a/e2e/pages/results.page.js b/e2e/pages/results.page.js index 5cc8362b..d9f8f4b7 100644 --- a/e2e/pages/results.page.js +++ b/e2e/pages/results.page.js @@ -1,5 +1,5 @@ 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({ @@ -7,7 +7,31 @@ export const pageWithZone = (floodZone) => definePage({ 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') diff --git a/e2e/test-runner-api/form-driver.js b/e2e/test-runner-api/form-driver.js index d4482777..afd60c00 100644 --- a/e2e/test-runner-api/form-driver.js +++ b/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}'`) } diff --git a/e2e/tests/pages/results-page.spec.js b/e2e/tests/pages/results-page.spec.js index 0e898199..488f203e 100644 --- a/e2e/tests/pages/results-page.spec.js +++ b/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) }) })