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);