-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: E2E coverage for Draw Boundary (#4035)
- Loading branch information
Showing
5 changed files
with
221 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,87 @@ | ||
| import { expect, Page } from "@playwright/test"; | ||
| import { Feature } from "geojson"; | ||
|
|
||
| export const checkGeoJsonContent = async (page: Page, geoJson: Feature) => { | ||
| 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", | ||
| ).toBeVisible(); | ||
|
|
||
| // Get the geojsonData attribute | ||
| const geojsonData = await mapComponent.getAttribute("geojsondata"); | ||
| const geojsonData = await mapComponent.getAttribute(attribute); | ||
|
|
||
| expect( | ||
| JSON.parse(geojsonData!), | ||
| "map attribute matches expected mock attribute", | ||
| ).toEqual(geoJson); | ||
| }; | ||
|
|
||
| export const checkUploadFileAltRoute = async (page: Page) => { | ||
| const uploadButton = page.getByTestId("upload-file-button"); | ||
|
|
||
| await expect( | ||
| uploadButton, | ||
| "We can see a button to upload a file instead", | ||
| ).toBeVisible(); | ||
|
|
||
| await uploadButton.click(); | ||
|
|
||
| await expect( | ||
| page.getByRole("heading", { name: "Upload a location plan" }), | ||
| "Should be in a page for uploading a file", | ||
| ).toBeVisible(); | ||
|
|
||
| await expect( | ||
| page.getByRole("button", { name: "Drop file here or choose" }), | ||
| "A button for uploading files is visible", | ||
| ).toBeVisible(); | ||
|
|
||
| await page.getByTestId("continue-button").click(); | ||
|
|
||
| await page.getByTestId("error-message-upload-location-plan").isVisible(); | ||
|
|
||
| const useMapButton = page.getByTestId("use-map-button"); | ||
|
|
||
| expect(JSON.parse(geojsonData!)).toEqual(geoJson); | ||
| await useMapButton.click(); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| export const osMapsStylesResponse = { | ||
| version: 8, | ||
| sprite: | ||
| "https://api.os.uk/maps/vector/v1/vts/resources/sprites/sprite?key=YOUR_KEY&srs=3857", | ||
| glyphs: | ||
| "https://api.os.uk/maps/vector/v1/vts/resources/fonts/{fontstack}/{range}.pbf?key=YOUR_KEY&srs=3857", | ||
| sources: { | ||
| esri: { | ||
| type: "vector", | ||
| url: "https://api.os.uk/maps/vector/v1/vts?key=YOUR_KEY&srs=3857", | ||
| }, | ||
| }, | ||
| layers: [ | ||
| { | ||
| id: "background", | ||
| type: "background", | ||
| paint: { | ||
| "background-color": "#0437F2", | ||
| }, | ||
| }, | ||
| ], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { Page } from "@playwright/test"; | ||
| import { osMapsStylesResponse } from "./osMapsMockData"; | ||
|
|
||
| export async function setupOSMapsStyles(page: Page) { | ||
| const ordnanceSurveyMapsStyles = new RegExp( | ||
| /\/proxy\/ordnance-survey\/maps\/vector\/v1\/vts\/resources\/styles.*/, | ||
| ); | ||
| await page.route(ordnanceSurveyMapsStyles, async (route) => { | ||
| await route.fulfill({ | ||
| status: 200, | ||
| body: JSON.stringify(osMapsStylesResponse), | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| export async function setupOSMapsVectorTiles(page: Page) { | ||
| const ordnanceSurveyVectorTiles = new RegExp( | ||
| /\/proxy\/ordnance-survey\/maps\/vector\/v1\/vts\/tile/, | ||
| ); | ||
|
|
||
| await page.route(ordnanceSurveyVectorTiles, async (route) => { | ||
| await route.fulfill({ | ||
| status: 200, | ||
| body: Buffer.from([]), | ||
| }); | ||
| }); | ||
| } |