Skip to content

Commit

Permalink
refine geospatial mocks and add map interaction
Browse files Browse the repository at this point in the history
  • Loading branch information
RODO94 committed Dec 10, 2024
1 parent a1f47b7 commit ee1355b
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 25 deletions.
31 changes: 29 additions & 2 deletions e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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
});
Expand Down
42 changes: 36 additions & 6 deletions e2e/tests/ui-driven/src/helpers/geospatialChecks.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,47 @@
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",
geoJson: Feature,
) => {
// 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",
Expand All @@ -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) => {
Expand All @@ -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();

Expand Down
58 changes: 42 additions & 16 deletions e2e/tests/ui-driven/src/mocks/geospatialMocks.ts
Original file line number Diff line number Diff line change
@@ -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<Polygon, ChangeHandlerProperties>;

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",
Expand All @@ -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,
},
};
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down

0 comments on commit ee1355b

Please sign in to comment.