fix: label bug when copy - continue - back

move test files to test folder tidy test expects fix: remove unused imports
theopensystemslab · Oct 21, 2024 · 407e57e · 407e57e
1 parent 3ab268c
commit 407e57e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 30 deletions.
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
@@ -99,11 +99,14 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
   });
 
   const [activeIndex, setActiveIndex] = useState<number>(
-    previousFormData?.length > 1 ? previousFormData?.length - 1 : 0,
+    previousFormData ? previousFormData?.length - 1 : 0,
   );
 
   const [minError, setMinError] = useState<boolean>(false);
   const [maxError, setMaxError] = useState<boolean>(false);
+  const [loadPreviousValues, setLoadPreviousValues] = useState<boolean>(
+    Boolean(previouslySubmittedData),
+  );
 
   const handleGeoJSONChange = (event: GeoJSONChangeEvent) => {
     // If the user clicks 'reset' on the map, geojson will be empty object
@@ -147,7 +150,9 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     formik.setErrors({});
   };
 
-  const removeAllFeaturesFromMap = () => setFeatures(undefined);
+  const removeAllFeaturesFromMap = () => {
+    setFeatures(undefined);
+  };
 
   const removeAllFeaturesFromForm = () => {
     formik.setFieldValue("schemaData", []);
@@ -180,8 +185,9 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
   };
 
   const addInitialFeaturesToMap = (initialFeatures: Feature[]) => {
-    if (!features?.length) {
+    if (loadPreviousValues) {
       setFeatures(initialFeatures);
+      setLoadPreviousValues(false);
     }
   };
 
@@ -200,7 +206,10 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
 
   const copyFeature = (sourceIndex: number, destinationIndex: number) => {
     const sourceFeature = formik.values.schemaData[sourceIndex];
-    formik.setFieldValue(`schemaData[${destinationIndex}]`, sourceFeature);
+    formik.setFieldValue(`schemaData[${destinationIndex}]`, {
+      ...sourceFeature,
+      label: `${destinationIndex + 1}`,
+    });
   };
 
   const removeFeatureFromForm = (index: number) => {
@@ -238,7 +247,6 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     // Set active index as highest tab after removal, so that when you "add" a new feature the tabs increment correctly
     setActiveIndex((features && features.length - 2) || 0);
   };
-
   return (
     <MapAndLabelContext.Provider
       value={{

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -11,10 +11,9 @@ import { SiteAddress } from "@planx/components/FindProperty/model";
 import { SchemaFields } from "@planx/components/shared/Schema/SchemaFields";
 import { GraphError } from "components/Error/GraphError";
 import { GeoJsonObject } from "geojson";
-import { Feature } from "geojson";
 import sortBy from "lodash/sortBy";
 import { useStore } from "pages/FlowEditor/lib/store";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import FullWidthWrapper from "ui/public/FullWidthWrapper";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
@@ -231,7 +230,7 @@ const Root = () => {
   const passport = useStore((state) => state.computePassport().data);
 
   // If coming "back" or "changing", load initial features & tabs onto the map
-  //   Pre-populating form fields within tabs is handled via formik.initialValues in Context.tsx
+  // Pre-populating form fields within tabs is handled via formik.initialValues in Context.tsx
   if (previouslySubmittedData?.data?.[fn]?.features?.length > 0) {
     addInitialFeaturesToMap(previouslySubmittedData?.data?.[fn]?.features);
   }

diff --git a/...MapAndLabel/Public/index.bugTest.test.tsx → ...Label/test/public.backNavigation.test.tsx b/...MapAndLabel/Public/index.bugTest.test.tsx → ...Label/test/public.backNavigation.test.tsx
@@ -3,13 +3,13 @@ import React from "react";
 import { setup } from "testUtils";
 import { it, vi } from "vitest";
 
-import { point1, point2, point3 } from "../test/mocks/geojson";
+import { Presentational as MapAndLabel } from "../Public";
+import { point1, point2, point3 } from "./mocks/geojson";
 import {
   previousDoubleDataProps,
   previousSingleDataProps,
-} from "../test/mocks/Trees";
-import { addFeaturesToMap, addMultipleFeatures } from "../test/utils";
-import { Presentational as MapAndLabel } from ".";
+} from "./mocks/Trees";
+import { addMultipleFeatures } from "./utils";
 
 beforeAll(() => {
   if (!window.customElements.get("my-map")) {
@@ -27,33 +27,30 @@ beforeAll(() => {
 
 describe("navigating back after adding single feature", () => {
   it("shows previously submitted features", async () => {
-    const { getByTestId, queryByRole, user } = setup(
+    const { getByTestId, queryByRole } = setup(
       <MapAndLabel {...previousSingleDataProps} />,
     );
     const map = getByTestId("map-and-label-map");
 
     expect(map).toBeInTheDocument();
 
     const firstTab = queryByRole("tab", { name: /Tree 1/ });
-    expect(firstTab).toBeInTheDocument();
     expect(firstTab).toBeVisible();
 
     const firstTabPanel = getByTestId("vertical-tabpanel-0");
-    expect(firstTabPanel).toBeInTheDocument();
     expect(firstTabPanel).toBeVisible();
 
     // point1 here needs to be reflected in the props you pass in at the start so labels match
     addMultipleFeatures([point1, point2]);
 
     const secondTab = queryByRole("tab", { name: /Tree 2/ });
-    expect(secondTab).toBeInTheDocument();
     expect(secondTab).toBeVisible();
   });
 });
 
 describe("navigating back after adding two features", () => {
   it("shows previously submitted features", async () => {
-    const { getByTestId, queryByRole, user } = setup(
+    const { getByTestId, queryByRole } = setup(
       <MapAndLabel {...previousDoubleDataProps} />,
     );
     const map = getByTestId("map-and-label-map");
@@ -65,16 +62,12 @@ describe("navigating back after adding two features", () => {
     expect(firstTab).toBeInTheDocument();
     expect(secondTab).toBeInTheDocument();
 
-    const firstTabPanel = getByTestId("vertical-tabpanel-0");
     const secondTabPanel = getByTestId("vertical-tabpanel-1");
-    expect(firstTabPanel).toBeInTheDocument();
-    expect(secondTabPanel).toBeInTheDocument();
     expect(secondTabPanel).toBeVisible();
 
     addMultipleFeatures([point1, point2, point3]);
 
     const thirdTab = queryByRole("tab", { name: /Tree 3/ });
-    expect(thirdTab).toBeInTheDocument();
     expect(thirdTab).toBeVisible();
   });
 });
diff --git a/...ponents/MapAndLabel/Public/index.test.tsx → ...mponents/MapAndLabel/test/public.test.tsx b/...ponents/MapAndLabel/Public/index.test.tsx → ...mponents/MapAndLabel/test/public.test.tsx
@@ -6,14 +6,9 @@ import { setup } from "testUtils";
 import { vi } from "vitest";
 import { axe } from "vitest-axe";
 
-import { mockTreeData } from "../test/mocks/GenericValues";
-import {
-  mockFeaturePointObj,
-  point1,
-  point2,
-  point3,
-} from "../test/mocks/geojson";
-import { props } from "../test/mocks/Trees";
+import { mockTreeData } from "./mocks/GenericValues";
+import { mockFeaturePointObj, point1, point2, point3 } from "./mocks/geojson";
+import { props } from "./mocks/Trees";
 import {
   addFeaturesToMap,
   addMultipleFeatures,
@@ -23,7 +18,7 @@ import {
   fillOutFirstHalfOfForm,
   fillOutForm,
   fillOutSecondHalfOfForm,
-} from "../test/utils";
+} from "./utils";
 
 beforeAll(() => {
   if (!window.customElements.get("my-map")) {