From b1a2b8c15a73c652a524c3f156dd96789da17091 Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Thu, 9 May 2024 12:12:25 +0200 Subject: [PATCH 1/3] always enable switch pages link --- .../components/DrawBoundary/Public/index.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) 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 d28e8b9cc2..3b3c228f8f 100644 --- a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx +++ b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx @@ -43,7 +43,7 @@ export default function Component(props: Props) { passport.data?.["property.boundary.title.area"]; const [boundary, setBoundary] = useState(previousBoundary); const [area, setArea] = useState(previousArea); - + // Buffer applied to the address point to clip this map extent // and applied to the site boundary and written to the passport to later clip the map extent in overview documents const bufferInMeters = area && area > 15000 ? 300 : 120; @@ -100,7 +100,7 @@ export default function Component(props: Props) { const newPassportData: Store.userData["data"] = {}; // Used the map - if (boundary && props.dataFieldBoundary) { + if (page === "draw" && boundary && props.dataFieldBoundary) { newPassportData[props.dataFieldBoundary] = boundary; newPassportData[`${props.dataFieldBoundary}.buffered`] = buffer( boundary, @@ -131,7 +131,7 @@ export default function Component(props: Props) { } // Uploaded a file - if (slots.length) { + if (page === "upload" && slots.length) { newPassportData[PASSPORT_UPLOAD_KEY] = slots; newPassportData[PASSPORT_COMPONENT_ACTION_KEY] = DrawBoundaryUserAction.Upload; @@ -150,7 +150,14 @@ export default function Component(props: Props) { props.handleSubmit?.({ data: { ...newPassportData } }); }} - isValid={props.hideFileUpload ? true : Boolean(boundary || slots[0]?.url)} + isValid={ + props.hideFileUpload + ? true + : Boolean( + (page === "draw" && boundary) || + (page === "upload" && slots[0]?.url), + ) + } > {getBody(bufferInMeters)} @@ -229,7 +236,6 @@ export default function Component(props: Props) { setPage("upload")} - disabled={Boolean(boundary)} data-testid="upload-file-button" > @@ -254,11 +260,7 @@ export default function Component(props: Props) { /> - setPage("draw")} - disabled={Boolean(slots[0]?.url)} - > + setPage("draw")}> Draw the boundary on a map instead From 02dbfe8d5bf911e4fd20a5458bb33c1c68685643 Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Thu, 9 May 2024 12:43:49 +0200 Subject: [PATCH 2/3] add test --- .../DrawBoundary/Public/Public.test.tsx | 83 +++++++++++++++++++ .../components/DrawBoundary/Public/index.tsx | 6 +- 2 files changed, 88 insertions(+), 1 deletion(-) diff --git a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/Public.test.tsx b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/Public.test.tsx index 6bb2c55aba..7d39c9f59f 100644 --- a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/Public.test.tsx +++ b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/Public.test.tsx @@ -370,3 +370,86 @@ test("appends to existing '_requestedFiles' value", async () => { expect(recommended).toEqual(["elevations.existing"]); expect(optional).toHaveLength(0); }); + +test("submits data based on the page you continue onwards from", async () => { + // Context - Planning Officers don't want to receive both geojson and an uploaded locationPlan, only one or the other + // But accessibility auditing says a user should always be able to toggle between draw & upload pages with their previous inputs retained + + const handleSubmit = jest.fn(); + + // Setup file mock + const mockFileName = "test.png"; + const mockFileURL = + "https://api.editor.planx.dev/file/private/gws7l5d1/test.png"; + + const file = new File(["test"], mockFileName, { type: "image/png" }); + + const mockedPost = mockedAxios.post.mockResolvedValueOnce({ + data: { + fileType: "image/png", + fileUrl: mockFileURL, + }, + }); + + // Previously submitted data is a good proxy for having previously fetched a title boundary and arriving to Draw with geojson in passport ! + const previouslySubmittedData = { + "property.boundary.site": { + type: "Feature", + properties: {}, + geometry: { + type: "Polygon", + coordinates: [ + [ + [-0.07643975531307334, 51.485847769536015], + [-0.0764006164494183, 51.4855918619739], + [-0.07587615567891393, 51.48561867140494], + [-0.0759899845402056, 51.48584045791162], + [-0.07643975531307334, 51.485847769536015], + ], + ], + }, + }, + }; + + const { user } = setup( + , + ); + + // Toggle to file upload mode + await user.click(screen.getByTestId("upload-file-button")); + + // Upload file + const input = screen.getByTestId("upload-input"); + await user.upload(input, file); + expect(mockedPost).toHaveBeenCalled(); + + // Toggle back to map view after uploading + await user.click(screen.getByTestId("use-map-button")); + + // Click "continue" from map page + await user.click(screen.getByTestId("continue-button")); + expect(handleSubmit).toHaveBeenCalledTimes(1); + + // Confirm that file is NOT saved to passport, but geojson is + const submitted = handleSubmit.mock.calls[0][0]; + expect(submitted.data).not.toHaveProperty(PASSPORT_UPLOAD_KEY); + expect(submitted.data["property.boundary.site"]).toEqual( + previouslySubmittedData["property.boundary.site"], + ); + + // DrawBoundary action captured correctly based on page + expect(submitted.data[PASSPORT_COMPONENT_ACTION_KEY]).toEqual( + DrawBoundaryUserAction.Draw, + ); +}); 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 3b3c228f8f..930a5eea0b 100644 --- a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx +++ b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx @@ -260,7 +260,11 @@ export default function Component(props: Props) { /> - setPage("draw")}> + setPage("draw")} + data-testid="use-map-button" + > Draw the boundary on a map instead From fb7a0e9c6ae9df31c74461e832e06029debfc75d Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Thu, 9 May 2024 12:58:51 +0200 Subject: [PATCH 3/3] update visually hidden text --- .../src/@planx/components/DrawBoundary/Public/index.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) 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 930a5eea0b..69697144be 100644 --- a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx +++ b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx @@ -187,11 +187,9 @@ export default function Component(props: Props) {

{!props.hideFileUpload && (

- If you prefer to upload a location plan file instead of using - the map, please reset the map view first to erase the - pre-populated boundary. Then click the "Upload a location plan - instead" link below. A location plan can only be submitted as - a digital boundary or file, not both. + If you prefer to upload a file instead of using the + interactive map, please click "Upload a location plan instead" + below to navigate to the file upload.

)} {/* @ts-ignore */}