diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.test.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.test.tsx
index 5addd9b4c3..57b134f2a7 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.test.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.test.tsx
@@ -5,7 +5,6 @@ import React from "react";
import { setup } from "testUtils";
import { vi } from "vitest";
import { axe } from "vitest-axe";
-
import {
mockFeaturePointObj,
point1,
@@ -23,7 +22,11 @@ import {
fillOutForm,
fillOutSecondHalfOfForm,
} from "../test/utils";
-import { mockTreeData } from "../test/mocks/GenericValues";
+import { mockTreeData, TreeData } from "../test/mocks/GenericValues";
+import {
+ MockPayload,
+ mockSingleFeaturePayload,
+} from "../test/mocks/mockPayload";
beforeAll(() => {
if (!window.customElements.get("my-map")) {
@@ -60,14 +63,14 @@ describe("Basic UI", () => {
await waitFor(() =>
expect(
- queryByText("Plot a feature on the map to begin"),
- ).not.toBeInTheDocument(),
+ queryByText("Plot a feature on the map to begin")
+ ).not.toBeInTheDocument()
);
});
it("renders the schema name as the tab title", async () => {
const { queryByText, getByRole, getByTestId } = setup(
- ,
+
);
expect(queryByText(/Tree 1/)).not.toBeInTheDocument();
@@ -81,7 +84,7 @@ describe("Basic UI", () => {
it("should not have any accessibility violations", async () => {
const { queryByText, getByTestId, container } = setup(
- ,
+
);
expect(queryByText(/Tree 1/)).not.toBeInTheDocument();
@@ -98,7 +101,7 @@ describe("Basic UI", () => {
describe("validation and error handling", () => {
it("shows all fields are required", async () => {
const { getByTestId, user, queryByRole, getAllByTestId } = setup(
- ,
+
);
const map = getByTestId("map-and-label-map");
@@ -123,8 +126,6 @@ describe("validation and error handling", () => {
expect(message).not.toBeEmptyDOMElement();
});
});
-
- // it shows all fields are required in a tab
it("should show all fields are required, for all feature tabs", async () => {
const { getByTestId, getByRole, user } = setup();
@@ -157,8 +158,6 @@ describe("validation and error handling", () => {
// error messages persist
await checkErrorMessagesPopulated();
});
-
- // it shows all fields are required across different tabs
it("should show an error if the minimum number of items is not met", async () => {
const { getByTestId, user } = setup();
@@ -169,10 +168,9 @@ describe("validation and error handling", () => {
const errorMessage = within(errorWrapper).getByText(/You must plot /);
expect(errorMessage).toBeVisible();
});
- // ??
it("an error state is applied to a tabpanel button, when it's associated feature is invalid", async () => {
const { getByTestId, user, queryByRole } = setup(
- ,
+
);
const map = getByTestId("map-and-label-map");
@@ -188,13 +186,12 @@ describe("validation and error handling", () => {
expect(tabOne).toHaveStyle("border-left: 5px solid #D4351C");
});
- // shows the error state on a tab when it's invalid
});
it("does not trigger handleSubmit when errors exist", async () => {
const handleSubmit = vi.fn();
const { getByTestId, user } = setup(
- ,
+
);
const map = getByTestId("map-and-label-map");
@@ -407,7 +404,9 @@ describe("copy feature select", () => {
await user.click(listItemTwo);
const urgencyDiv = getByTitle("Urgency");
- const urgencySelect = within(urgencyDiv).getByRole("combobox");
+ const urgencyInput = within(urgencyDiv).getByRole("textbox", {
+ hidden: true,
+ });
expect(getByLabelText("Species")).toHaveDisplayValue(mockTreeData.species);
expect(getByLabelText("Proposed work")).toHaveDisplayValue(
@@ -416,7 +415,7 @@ describe("copy feature select", () => {
expect(getByLabelText("Justification")).toHaveDisplayValue(
mockTreeData.justification
);
- expect(urgencySelect).toHaveTextContent(mockTreeData.urgency);
+ expect(urgencyInput).toHaveDisplayValue(mockTreeData.urgency);
});
it("should not have any accessibility violations", async () => {
@@ -489,19 +488,85 @@ describe("remove feature button", () => {
`{"type":"FeatureCollection","features":[]}`
);
});
- // click remove - feature is removed
- // no map icon
});
describe("payload generation", () => {
- test.todo("a submitted payload contains a GeoJSON feature collection");
- // check payload contains GeoJSON feature collection
- test.todo(
- "the feature collection contains all geospatial data inputted by the user",
- );
- // feature collection matches the mocked data
- test.todo(
- "each feature's properties correspond with the details entered for that feature",
- );
- // feature properties contain the answers to inputs
+ it("a submitted payload contains a GeoJSON feature collection", async () => {
+ const handleSubmit = vi.fn();
+ const { getByTestId, user } = setup(
+
+ );
+
+ const map = getByTestId("map-and-label-map");
+
+ addFeaturesToMap(map, [point1]);
+
+ const firstTabPanel = getByTestId("vertical-tabpanel-0");
+
+ expect(firstTabPanel).toBeVisible();
+
+ await fillOutForm(user);
+
+ await clickContinue(user);
+
+ await checkErrorMessagesEmpty();
+ expect(handleSubmit).toHaveBeenCalled();
+ const output = handleSubmit.mock.calls[0][0].data.MockFn.type;
+
+ expect(output).toEqual("FeatureCollection");
+ });
+
+ it("the feature collection contains all geospatial data inputted by the user", async () => {
+ const handleSubmit = vi.fn();
+ const { getByTestId, user } = setup(
+
+ );
+
+ const map = getByTestId("map-and-label-map");
+
+ addFeaturesToMap(map, [point1]);
+
+ const firstTabPanel = getByTestId("vertical-tabpanel-0");
+
+ expect(firstTabPanel).toBeVisible();
+
+ await fillOutForm(user);
+
+ await clickContinue(user);
+
+ await checkErrorMessagesEmpty();
+ expect(handleSubmit).toHaveBeenCalled();
+ const output =
+ handleSubmit.mock.calls[0][0].data.MockFn.features[0].geometry
+ .coordinates;
+
+ expect(output[0]).toEqual(point1.geometry.coordinates[0]);
+ expect(output[1]).toEqual(point1.geometry.coordinates[1]);
+ });
+
+ it("each feature's properties correspond with the details entered for that feature", async () => {
+ const handleSubmit = vi.fn();
+ const { getByTestId, user } = setup(
+
+ );
+
+ const map = getByTestId("map-and-label-map");
+
+ addFeaturesToMap(map, [point1]);
+
+ const firstTabPanel = getByTestId("vertical-tabpanel-0");
+
+ expect(firstTabPanel).toBeVisible();
+
+ await fillOutForm(user);
+
+ await clickContinue(user);
+
+ await checkErrorMessagesEmpty();
+ expect(handleSubmit).toHaveBeenCalled();
+ const output =
+ handleSubmit.mock.calls[0][0].data.MockFn.features[0].properties;
+
+ expect(output).toEqual(mockTreeData);
+ });
});
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/test/mocks/GenericValues.ts b/editor.planx.uk/src/@planx/components/MapAndLabel/test/mocks/GenericValues.ts
index a67af1c009..16c3737b3c 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/test/mocks/GenericValues.ts
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/test/mocks/GenericValues.ts
@@ -1,6 +1,15 @@
-export const mockTreeData = {
+export type TreeData = {
+ species: string;
+ work: string;
+ justification: string;
+ urgency: "low" | "moderate" | "high" | "urgenct";
+ label: string;
+};
+
+export const mockTreeData: TreeData = {
species: "Larch",
work: "Chopping it down",
justification: "Cause I can",
- urgency: "Low",
+ urgency: "low",
+ label: "1",
};
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/test/mocks/mockPayload.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/test/mocks/mockPayload.tsx
new file mode 100644
index 0000000000..6395d5453b
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/test/mocks/mockPayload.tsx
@@ -0,0 +1,21 @@
+import { FeatureCollection } from "geojson";
+import { mockTreeData } from "./GenericValues";
+export type MockPayload = { data: { MockFn: FeatureCollection } };
+
+export const mockSingleFeaturePayload: MockPayload = {
+ data: {
+ MockFn: {
+ features: [
+ {
+ geometry: {
+ coordinates: [-3.685929607119201, 57.15301433687542],
+ type: "Point",
+ },
+ properties: { mockTreeData },
+ type: "Feature",
+ },
+ ],
+ type: "FeatureCollection",
+ },
+ },
+};