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 63ef582427..39a9b7dd87 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
@@ -54,14 +54,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();
@@ -75,7 +75,7 @@ describe("Basic UI", () => {
it("should not have any accessibility violations", async () => {
const { queryByText, getByTestId, container } = setup(
- ,
+
);
expect(queryByText(/Tree 1/)).not.toBeInTheDocument();
@@ -92,7 +92,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");
@@ -168,7 +168,7 @@ describe("validation and error handling", () => {
// ??
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");
@@ -186,6 +186,22 @@ describe("validation and error handling", () => {
});
// 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");
+
+ addFeaturesToMap(map, [point1]);
+
+ await clickContinue(user);
+
+ await checkErrorMessagesPopulated();
+
+ expect(handleSubmit).not.toBeCalled();
+});
test.todo("an error displays if the maximum number of items is exceeded");
describe("basic interactions - happy path", () => {
@@ -236,16 +252,14 @@ describe("basic interactions - happy path", () => {
expect(thirdTab).toBeInTheDocument();
expect(fourthTab).not.toBeInTheDocument();
- expect(thirdTab).toHaveAttribute("aria-selected", "true");
- expect(secondTab).toHaveAttribute("aria-selected", "false");
expect(firstTab).toHaveAttribute("aria-selected", "false");
+ expect(secondTab).toHaveAttribute("aria-selected", "false");
+ expect(thirdTab).toHaveAttribute("aria-selected", "true");
});
it("a user can input details on multiple features and submit", async () => {
- const { getByTestId, getByRole, user, getAllByTestId } = setup(
- ,
- );
- const map = getByTestId("map-and-label-map");
+ const { getByTestId, getByRole, user } = setup();
+ getByTestId("map-and-label-map");
addMultipleFeatures([point1, point2]);
@@ -272,7 +286,6 @@ describe("basic interactions - happy path", () => {
await checkErrorMessagesEmpty();
});
- // add details to more than one tab, submit
it("a user can input details on feature tabs in any order", async () => {
const { getByTestId, getByRole, user } = setup();
const map = getByTestId("map-and-label-map");
@@ -328,7 +341,7 @@ describe("copy feature select", () => {
it.todo("is enabled once multiple features are present");
// copy select enabled once you add more features
it.todo(
- "lists all other features as options (the current feature is not listed)",
+ "lists all other features as options (the current feature is not listed)"
);
// current tree is not an option in the copy select
it.todo("copies all data from one feature to another");
@@ -350,11 +363,11 @@ 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",
+ "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",
+ "each feature's properties correspond with the details entered for that feature"
);
// feature properties contain the answers to inputs
});
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/test/utils.ts b/editor.planx.uk/src/@planx/components/MapAndLabel/test/utils.ts
index 1a8586d85c..1873246808 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/test/utils.ts
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/test/utils.ts
@@ -11,7 +11,7 @@ import { mockTreeData } from "./mocks/GenericValues";
*/
export const addFeaturesToMap = async (
map: HTMLElement,
- features: Feature[],
+ features: Feature[]
) => {
const mockEvent = new CustomEvent("geojsonChange", {
detail: {
@@ -22,7 +22,7 @@ export const addFeaturesToMap = async (
};
export const addMultipleFeatures = (
- featureArray: Feature[],
+ featureArray: Feature[]
) => {
const map = screen.getByTestId("map-and-label-map");
const pointsAddedArray: Feature[] = [];
@@ -32,19 +32,6 @@ export const addMultipleFeatures = (
});
};
-export const fillOutForm = async (user: UserEvent) => {
- const speciesInput = screen.getByLabelText("Species");
- await user.type(speciesInput, mockTreeData.species);
- const workInput = screen.getByLabelText("Proposed work");
- await user.type(workInput, mockTreeData.work);
- const justificationInput = screen.getByLabelText("Justification");
- await user.type(justificationInput, mockTreeData.justification);
- const urgencyDiv = screen.getByTitle("Urgency");
- const urgencySelect = within(urgencyDiv).getByRole("combobox");
- await user.click(urgencySelect);
- await user.click(screen.getByRole("option", { name: /low/i }));
-};
-
export const fillOutFirstHalfOfForm = async (user: UserEvent) => {
const speciesInput = screen.getByLabelText("Species");
await user.type(speciesInput, mockTreeData.species);
@@ -61,6 +48,11 @@ export const fillOutSecondHalfOfForm = async (user: UserEvent) => {
await user.click(screen.getByRole("option", { name: /low/i }));
};
+export const fillOutForm = async (user: UserEvent) => {
+ await fillOutFirstHalfOfForm(user);
+ await fillOutSecondHalfOfForm(user);
+};
+
export const clickContinue = async (user: UserEvent) => {
const continueButton = screen.getByRole("button", { name: /Continue/ });
await user.click(continueButton);