From ee1355bff0c73313906087f15e7b82984279c8ba Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Tue, 10 Dec 2024 16:17:47 +0000 Subject: [PATCH] refine geospatial mocks and add map interaction --- .../src/create-flow-with-geospatial.spec.ts | 31 +++++++++- .../ui-driven/src/helpers/geospatialChecks.ts | 42 ++++++++++++-- .../ui-driven/src/mocks/geospatialMocks.ts | 58 ++++++++++++++----- .../components/DrawBoundary/Public/index.tsx | 2 +- 4 files changed, 108 insertions(+), 25 deletions(-) diff --git a/e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts b/e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts index c6b20ff752..c535231a5e 100644 --- a/e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts +++ b/e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts @@ -20,14 +20,19 @@ import { import { TestContext } from "./helpers/types"; import { serviceProps } from "./helpers/serviceData"; import { + alterDrawGeoJson, checkGeoJsonContent, checkUploadFileAltRoute, + getMapProperties, + resetMapBoundary, + waitForMapComponent, } from "./helpers/geospatialChecks"; import { + GeoJsonChangeHandler, + mockChangedMapGeoJson, mockMapGeoJson, mockPropertyTypeOptions, } from "./mocks/geospatialMocks"; -import exp from "node:constants"; test.describe("Flow creation, publish and preview", () => { let context: TestContext = { @@ -181,15 +186,37 @@ test.describe("Flow creation, publish and preview", () => { await checkGeoJsonContent(page, "drawgeojsondata", mockMapGeoJson); + const area = "490.37"; + + await expect( + page.getByText(area), + "We can see a value for area", + ).toBeVisible(); + // navigate to upload file page await checkUploadFileAltRoute(page); - // ensure we are back on the Draw Boundary component await expect( drawBoundaryTitle, "We have navigated back to the map component", ).toBeVisible(); + await waitForMapComponent(page); + + await resetMapBoundary(page); + await alterDrawGeoJson(page); + + // extra new GeoJSON data + const newGeoJSON = await getMapProperties(page, "drawgeojsondata"); + const parsedJson: GeoJsonChangeHandler = JSON.parse(newGeoJSON!); + + await checkGeoJsonContent(page, "drawgeojsondata", mockChangedMapGeoJson); + + await expect( + page.getByText(`${parsedJson.properties!["area.squareMetres"]}`), + "We can see a new value for area", + ).toBeVisible(); + // TODO: answer uploadAndLabel // TODO: answerPropertyInfo, answerPlanningConstraints }); diff --git a/e2e/tests/ui-driven/src/helpers/geospatialChecks.ts b/e2e/tests/ui-driven/src/helpers/geospatialChecks.ts index c0b2a43a21..26c4408ef8 100644 --- a/e2e/tests/ui-driven/src/helpers/geospatialChecks.ts +++ b/e2e/tests/ui-driven/src/helpers/geospatialChecks.ts @@ -1,6 +1,38 @@ -import { expect, Page } from "@playwright/test"; +import { expect, Page } from "@playwright/test"; import { Feature } from "geojson"; +export const waitForMapComponent = async (page: Page) => { + await page.waitForFunction(() => { + const map = document.getElementById('draw-boundary-map') + return map + }); + +} + +export const getMapProperties = async (page: Page, attribute:"geojsondata" | "drawgeojsondata") => { + const mapComponent = await page.waitForSelector("my-map"); + return await mapComponent.getAttribute(attribute); +} + +export const alterDrawGeoJson = async (page: Page) => { +const map = page.getByTestId('map-test-id') + +await map.click({button:"left", position:{x:100, y:200}}) +await map.click({button:"left", position:{x:150, y:250}}) +await map.click({button:"left", position:{x:200, y:250}}) +await map.click({button:"left", position:{x:100, y:200}}) + + } + + export const resetMapBoundary = async (page: Page)=>{ + const resetButton = page.getByLabel('Reset map view') + await resetButton.click() + + const resetGeoJson = await getMapProperties(page, "drawgeojsondata") + + expect(resetGeoJson, "drawGeoJsonData should be reset").toEqual(null) + } + export const checkGeoJsonContent = async ( page: Page, attribute: "geojsondata" | "drawgeojsondata", @@ -8,6 +40,8 @@ export const checkGeoJsonContent = async ( ) => { // Wait for the map component to be present const mapComponent = await page.waitForSelector("my-map"); + + await page.waitForFunction(() => customElements.get('my-map')); await expect( page.getByTestId("map-test-id"), "Check we can see the map", @@ -16,7 +50,7 @@ export const checkGeoJsonContent = async ( // Get the geojsonData attribute const geojsonData = await mapComponent.getAttribute(attribute); - expect(JSON.parse(geojsonData!)).toEqual(geoJson); + expect(JSON.parse(geojsonData!), "map attribute matches expected mock attribute").toEqual(geoJson); }; export const checkUploadFileAltRoute = async (page: Page) => { @@ -26,10 +60,6 @@ export const checkUploadFileAltRoute = async (page: Page) => { uploadButton, "We can see a button to upload a file instead", ).toBeVisible(); - await expect( - page.getByText("490.37"), - "We can see a value for area", - ).toBeVisible(); await uploadButton.click(); diff --git a/e2e/tests/ui-driven/src/mocks/geospatialMocks.ts b/e2e/tests/ui-driven/src/mocks/geospatialMocks.ts index fb26308b1d..e56646bf73 100644 --- a/e2e/tests/ui-driven/src/mocks/geospatialMocks.ts +++ b/e2e/tests/ui-driven/src/mocks/geospatialMocks.ts @@ -1,29 +1,35 @@ import { OptionWithDataValues } from "../helpers/types"; +import { Feature, Polygon, Position } from "geojson"; + +type ChangeHandlerProperties = { + label: string; + "area.squareMetres": number; + "area.hectares": number; +}; + +export type GeoJsonChangeHandler = Feature; export const mockPropertyTypeOptions: OptionWithDataValues[] = [ { optionText: "Residential", dataValue: "residential" }, { optionText: "Commercial", dataValue: "commercial" }, ]; -import { Feature } from "geojson"; +const mockCoordinates: Position[][][] = [ + [ + [ + [-0.633498, 51.605485], + [-0.633455, 51.605606], + [-0.633788, 51.605643], + [-0.634429, 51.605799], + [-0.634429, 51.605767], + [-0.633498, 51.605485], + ], + ], +]; export const mockMapGeoJson: Feature = { - geometry: { - type: "MultiPolygon", - coordinates: [ - [ - [ - [-0.633498, 51.605485], - [-0.633455, 51.605606], - [-0.633788, 51.605643], - [-0.634429, 51.605799], - [-0.634429, 51.605767], - [-0.633498, 51.605485], - ], - ], - ], - }, type: "Feature", + geometry: { type: "MultiPolygon", coordinates: mockCoordinates }, properties: { "entry-date": "2024-05-06", "start-date": "2010-05-12", @@ -37,3 +43,23 @@ export const mockMapGeoJson: Feature = { "organisation-entity": "13", }, }; + +export const mockChangedMapGeoJson: GeoJsonChangeHandler = { + type: "Feature", + geometry: { + type: "Polygon", + coordinates: [ + [ + [-0.6341888375038146, 51.60562241658701], + [-0.6341217822784424, 51.605580770520504], + [-0.63405472705307, 51.605580770520504], + [-0.6341888375038146, 51.60562241658701], + ], + ], + }, + properties: { + label: "1", + "area.squareMetres": 10.72, + "area.hectares": 0.001072, + }, +}; diff --git a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx index 8c533ae74b..943a7532cb 100644 --- a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx +++ b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx @@ -89,7 +89,7 @@ export default function Component(props: Props) { isMounted.current = true; const geojsonChangeHandler = ({ detail: geojson }: any) => { - if (geojson["EPSG:3857"]?.features) { + if (geojson["EPSG:3857"]?.features) { // only a single polygon can be drawn, so get first feature in geojson "FeatureCollection" setBoundary(geojson["EPSG:3857"].features[0]); setArea(