feat: Map and Label Happy Path Tests

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(
-      <MapAndLabel {...props} />,
+      <MapAndLabel {...props} />
     );
     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(
-      <MapAndLabel {...props} />,
+      <MapAndLabel {...props} />
     );
     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(
-      <MapAndLabel {...props} />,
+      <MapAndLabel {...props} />
     );
     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(
-      <MapAndLabel {...props} />,
+      <MapAndLabel {...props} />
     );
     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(
+    <MapAndLabel {...props} handleSubmit={handleSubmit} />
+  );
+  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(
-      <MapAndLabel {...props} />,
-    );
-    const map = getByTestId("map-and-label-map");
+    const { getByTestId, getByRole, user } = setup(<MapAndLabel {...props} />);
+    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(<MapAndLabel {...props} />);
     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
 });

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<Point | Polygon, { label: string }>[],
+  features: Feature<Point | Polygon, { label: string }>[]
 ) => {
   const mockEvent = new CustomEvent("geojsonChange", {
     detail: {
@@ -22,7 +22,7 @@ export const addFeaturesToMap = async (
 };
 
 export const addMultipleFeatures = (
-  featureArray: Feature<Point, { label: string }>[],
+  featureArray: Feature<Point, { label: string }>[]
 ) => {
   const map = screen.getByTestId("map-and-label-map");
   const pointsAddedArray: Feature<Point, { label: string }>[] = [];
@@ -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);