diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx index a26e98c991..b0086728d1 100644 --- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx +++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx @@ -99,7 +99,7 @@ export const MapAndLabelProvider: React.FC = ( }); const [activeIndex, setActiveIndex] = useState( - previousFormData?.length - 1 || -1, + previousFormData?.length > 1 ? previousFormData?.length - 1 : 0, ); const [minError, setMinError] = useState(false); @@ -179,8 +179,10 @@ export const MapAndLabelProvider: React.FC = ( setActiveIndex(newFeatures.length - 1); }; - const addInitialFeaturesToMap = (features: Feature[]) => { - setFeatures(features); + const addInitialFeaturesToMap = (initialFeatures: Feature[]) => { + if (!features?.length) { + setFeatures(initialFeatures); + } }; const addFeatureToForm = () => { diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.bugTest.test.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.bugTest.test.tsx new file mode 100644 index 0000000000..133a86acd6 --- /dev/null +++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.bugTest.test.tsx @@ -0,0 +1,80 @@ +import { MyMap } from "@opensystemslab/map"; +import React from "react"; +import { setup } from "testUtils"; +import { it, vi } from "vitest"; + +import { point1, point2, point3 } from "../test/mocks/geojson"; +import { + previousDoubleDataProps, + previousSingleDataProps, +} from "../test/mocks/Trees"; +import { addFeaturesToMap, addMultipleFeatures } from "../test/utils"; +import { Presentational as MapAndLabel } from "."; + +beforeAll(() => { + if (!window.customElements.get("my-map")) { + window.customElements.define("my-map", MyMap); + } + + const ResizeObserverMock = vi.fn(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), + })); + + vi.stubGlobal("ResizeObserver", ResizeObserverMock); +}); + +describe("navigating back after adding single feature", () => { + it("shows previously submitted features", async () => { + const { getByTestId, queryByRole, user } = setup( + , + ); + 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 map = getByTestId("map-and-label-map"); + + expect(map).toBeInTheDocument(); + + const firstTab = queryByRole("tab", { name: /Tree 1/ }); + const secondTab = queryByRole("tab", { name: /Tree 2/ }); + 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/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx index f582ad3ec2..766d19ff0c 100644 --- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx +++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx @@ -11,9 +11,10 @@ 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 from "react"; +import React, { useEffect, useState } from "react"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; import FullWidthWrapper from "ui/public/FullWidthWrapper"; import ErrorWrapper from "ui/shared/ErrorWrapper"; diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/test/mocks/Trees.ts b/editor.planx.uk/src/@planx/components/MapAndLabel/test/mocks/Trees.ts index db502de886..8d79b1ad1f 100644 --- a/editor.planx.uk/src/@planx/components/MapAndLabel/test/mocks/Trees.ts +++ b/editor.planx.uk/src/@planx/components/MapAndLabel/test/mocks/Trees.ts @@ -2,6 +2,10 @@ import { Schema } from "@planx/components/shared/Schema/model"; import { PresentationalProps } from "../../Public"; import { Trees } from "../../schemas/Trees"; +import { + previouslySubmittedDoubleData, + previouslySubmittedSingleData, +} from "./mockPayload"; const mockTreeSchema: Schema = { ...Trees, @@ -20,3 +24,13 @@ export const props: PresentationalProps = { longitude: -0.1629784, latitude: 51.5230919, }; + +export const previousSingleDataProps: PresentationalProps = { + ...props, + previouslySubmittedData: previouslySubmittedSingleData, +}; + +export const previousDoubleDataProps: PresentationalProps = { + ...props, + previouslySubmittedData: previouslySubmittedDoubleData, +}; 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 index 6395d5453b..fa12d5dc6f 100644 --- a/editor.planx.uk/src/@planx/components/MapAndLabel/test/mocks/mockPayload.tsx +++ b/editor.planx.uk/src/@planx/components/MapAndLabel/test/mocks/mockPayload.tsx @@ -1,6 +1,13 @@ import { FeatureCollection } from "geojson"; + import { mockTreeData } from "./GenericValues"; -export type MockPayload = { data: { MockFn: FeatureCollection } }; +export interface MockPayload { + data: { MockFn: FeatureCollection }; +} + +interface PreviousData extends MockPayload { + auto: boolean; +} export const mockSingleFeaturePayload: MockPayload = { data: { @@ -11,11 +18,47 @@ export const mockSingleFeaturePayload: MockPayload = { coordinates: [-3.685929607119201, 57.15301433687542], type: "Point", }, - properties: { mockTreeData }, + properties: { mockTreeData, label: "1" }, + type: "Feature", + }, + ], + type: "FeatureCollection", + }, + }, +}; + +export const previousMockDoubleFeatureData: MockPayload = { + data: { + MockFn: { + features: [ + { + geometry: { + coordinates: [-3.685929607119201, 57.15301433687542], + type: "Point", + }, + properties: { mockTreeData, label: "1" }, + type: "Feature", + }, + { type: "Feature", + properties: { ...mockTreeData, label: "2" }, + geometry: { + type: "Point", + coordinates: [-3.686529607119201, 57.15310433687542], + }, }, ], type: "FeatureCollection", }, }, }; + +export const previouslySubmittedSingleData: PreviousData = { + auto: false, + ...mockSingleFeaturePayload, +}; + +export const previouslySubmittedDoubleData: PreviousData = { + auto: false, + ...previousMockDoubleFeatureData, +};