rebase plus store tests

api.planx.uk/modules/analytics/metabase/collection/collection.test.ts

@@ -1 +1,92 @@
-test.todo("should test collection check and creation");
+import { $api } from "../../../../client/index.js";
+import { updateMetabaseId } from "./updateMetabaseId.js";
+import { getTeamIdAndMetabaseId } from "./getTeamIdAndMetabaseId.js";
+
+describe("getTeamIdAndMetabaseId", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("successfully gets team and existing metabase id", async () => {
+    vi.spyOn($api.client, "request").mockResolvedValue({
+      teams: [
+        {
+          id: 26,
+          slug: "barnet",
+          metabaseId: 20,
+        },
+      ],
+    });
+
+    const teamAndMetabaseId = await getTeamIdAndMetabaseId("barnet");
+
+    expect(teamAndMetabaseId.id).toEqual(26);
+    expect(teamAndMetabaseId.metabaseId).toEqual(20);
+  });
+
+  test("handles team with null metabase id", async () => {
+    vi.spyOn($api.client, "request").mockResolvedValue({
+      teams: [
+        {
+          id: 26,
+          slug: "barnet",
+          metabaseId: null,
+        },
+      ],
+    });
+
+    const teamAndMetabaseId = await getTeamIdAndMetabaseId("Barnet");
+
+    expect(teamAndMetabaseId.id).toEqual(26);
+    expect(teamAndMetabaseId.metabaseId).toBeNull();
+  });
+});
+
+describe("updateMetabaseId", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("successfully updates metabase ID", async () => {
+    // Mock the GraphQL request
+    vi.spyOn($api.client, "request").mockResolvedValue({
+      update_teams: {
+        returning: [
+          {
+            id: 1,
+            slug: "testteam",
+            metabase_id: 123,
+          },
+        ],
+      },
+    });
+
+    const result = await updateMetabaseId(1, 123);
+
+    expect(result).toEqual({
+      update_teams: {
+        returning: [
+          {
+            id: 1,
+            slug: "testteam",
+            metabase_id: 123,
+          },
+        ],
+      },
+    });
+
+    expect($api.client.request).toHaveBeenCalledWith(expect.any(String), {
+      id: 1,
+      metabaseId: 123,
+    });
+  });
+
+  test("handles GraphQL error", async () => {
+    // Mock a failed GraphQL request
+    vi.spyOn($api.client, "request").mockRejectedValue(
+      new Error("GraphQL error"),
+    );
+
+    await expect(updateMetabaseId(1, 123)).rejects.toThrow("GraphQL error");
+  });
+});

api.planx.uk/modules/analytics/metabase/collection/getTeamIdAndMetabaseId.ts

@@ -0,0 +1,38 @@
+import { gql } from "graphql-request";
+import { $api } from "../../../../client/index.js";
+
+interface GetMetabaseId {
+  teams: {
+    id: number;
+    slug: string;
+    metabaseId: number | null;
+  }[];
+}
+
+export const getTeamIdAndMetabaseId = async (slug: string) => {
+  try {
+    const response = await $api.client.request<GetMetabaseId>(
+      gql`
+        query GetTeamAndMetabaseId($slug: String!) {
+          teams(where: { slug: { _eq: $slug } }) {
+            id
+            slug
+            metabaseId: metabase_id
+          }
+        }
+      `,
+      {
+        slug: slug,
+      },
+    );
+
+    const result = response.teams[0];
+    return result;
+  } catch (e) {
+    console.error(
+      "Error fetching team's ID / Metabase ID from PlanX DB:",
+      (e as Error).stack,
+    );
+    throw e;
+  }
+};

api.planx.uk/modules/analytics/metabase/collection/updateMetabaseId.ts

@@ -0,0 +1,43 @@
+import { gql } from "graphql-request";
+import { $api } from "../../../../client/index.js";
+
+interface UpdateMetabaseId {
+  teams: {
+    id: number;
+    slug: string;
+    metabaseId: number;
+  };
+}
+
+/** Updates column `metabase_id` in the Planx DB `teams` table */
+export const updateMetabaseId = async (teamId: number, metabaseId: number) => {
+  try {
+    const response = await $api.client.request<UpdateMetabaseId>(
+      gql`
+        mutation UpdateTeamMetabaseId($id: Int!, $metabaseId: Int!) {
+          update_teams(
+            where: { id: { _eq: $id } }
+            _set: { metabase_id: $metabaseId }
+          ) {
+            returning {
+              id
+              slug
+              metabase_id
+            }
+          }
+        }
+      `,
+      {
+        id: teamId,
+        metabaseId: metabaseId,
+      },
+    );
+    return response;
+  } catch (e) {
+    console.error(
+      "There's been an error while updating the Metabase ID for this team",
+      (e as Error).stack,
+    );
+    throw e;
+  }
+};

e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts

@@ -19,11 +19,24 @@ import {
 } from "./helpers/navigateAndPublish";
 import { TestContext } from "./helpers/types";
 import { serviceProps } from "./helpers/serviceData";
-import { checkGeoJsonContent } from "./helpers/geospatialChecks";
 import {
-  mockMapGeoJson,
+  alterDrawGeoJson,
+  checkGeoJsonContent,
+  checkUploadFileAltRoute,
+  getMapProperties,
+  resetMapBoundary,
+  waitForMapComponent,
+} from "./helpers/geospatialChecks";
+import {
+  GeoJsonChangeHandler,
+  mockChangedMapGeoJson,
   mockPropertyTypeOptions,
+  mockTitleBoundaryGeoJson,
 } from "./mocks/geospatialMocks";
+import {
+  setupOSMapsStyles,
+  setupOSMapsVectorTiles,
+} from "./mocks/osMapsResponse";
 
 test.describe("Flow creation, publish and preview", () => {
   let context: TestContext = {
@@ -72,16 +85,14 @@ test.describe("Flow creation, publish and preview", () => {
     await editor.createInternalPortal();
     await editor.populateInternalPortal();
     await page.getByRole("link", { name: "start" }).click(); // return to main flow
-    await editor.createUploadAndLabel();
-    // TODO: editor.createPropertyInfo()
+    // await editor.createUploadAndLabel();
     await editor.createDrawBoundary();
     await editor.createPlanningConstraints();
     // await editor.createFileUpload();
 
     await expect(editor.nodeList).toContainText([
       "Find property",
       "an internal portalEdit Portal",
-      "Upload and label",
       "Confirm your location plan",
       "Planning constraints",
       // "File upload",
@@ -119,6 +130,9 @@ test.describe("Flow creation, publish and preview", () => {
       `/${context.team.slug}/${serviceProps.slug}/published?analytics=false`,
     );
 
+    setupOSMapsStyles(page);
+    setupOSMapsVectorTiles(page);
+
     await expect(
       page.locator("h1", { hasText: "Find the property" }),
     ).toBeVisible();
@@ -130,7 +144,7 @@ test.describe("Flow creation, publish and preview", () => {
     ).toBeVisible();
 
     // Check map component has geoJson content
-    await checkGeoJsonContent(page, mockMapGeoJson);
+    await checkGeoJsonContent(page, "geojsondata", mockTitleBoundaryGeoJson);
 
     // Check property info is being shown
     await expect(page.getByText("Test Street, Testville")).toBeVisible();
@@ -169,7 +183,49 @@ test.describe("Flow creation, publish and preview", () => {
     ).toBeVisible();
     await clickContinue({ page });
 
+    const drawBoundaryTitle = page.getByRole("heading", {
+      name: "Confirm your location plan",
+    });
+    await expect(drawBoundaryTitle).toBeVisible();
+
+    await checkGeoJsonContent(
+      page,
+      "drawgeojsondata",
+      mockTitleBoundaryGeoJson,
+    );
+
+    const area = "The property boundary you have drawn is 490.37";
+
+    await expect(page.getByText(area)).toBeVisible();
+
+    // navigate to upload file page and back
+    await checkUploadFileAltRoute(page);
+
+    await expect(
+      drawBoundaryTitle,
+      "We have navigated back to the map component",
+    ).toBeVisible();
+
+    // ensure map has loaded correctly
+    await waitForMapComponent(page);
+
+    await resetMapBoundary(page);
+
+    await alterDrawGeoJson(page);
+
+    // extract new GeoJSON data
+    const newGeoJson = await getMapProperties(page, "drawgeojsondata");
+    const parsedJson: GeoJsonChangeHandler = JSON.parse(newGeoJson!);
+
+    // check it matches our static mock
+    await checkGeoJsonContent(page, "drawgeojsondata", mockChangedMapGeoJson);
+
+    await expect(
+      page.getByText(`${parsedJson.properties!["area.squareMetres"]}`),
+      "The correct value for area comes from the map properties ",
+    ).toBeVisible();
+
     // TODO: answer uploadAndLabel
-    // TODO: answerPropertyInfo, answerDrawBoundary, answerPlanningConstraints
+    // TODO: answerPropertyInfo, answerPlanningConstraints
   });
 });

e2e/tests/ui-driven/src/helpers/geospatialChecks.ts

@@ -1,12 +1,87 @@
 import { expect, Page } from "@playwright/test";
 import { Feature } from "geojson";
 
-export const checkGeoJsonContent = async (page: Page, geoJson: Feature) => {
+export const waitForMapComponent = async (page: Page) => {
+  await page.waitForFunction(() => {
+    const map = document.getElementById("draw-boundary-map");
+    return map;
+  });
+};
+
+export const getMapProperties = async (
+  page: Page,
+  attribute: "geojsondata" | "drawgeojsondata",
+) => {
+  const mapComponent = await page.waitForSelector("my-map");
+  return await mapComponent.getAttribute(attribute);
+};
+
+export const alterDrawGeoJson = async (page: Page) => {
+  const map = page.getByTestId("map-test-id");
+
+  await map.click({ button: "left", position: { x: 100, y: 200 } });
+  await map.click({ button: "left", position: { x: 150, y: 250 } });
+  await map.click({ button: "left", position: { x: 200, y: 250 } });
+  await map.click({ button: "left", position: { x: 100, y: 200 } });
+};
+
+export const resetMapBoundary = async (page: Page) => {
+  const resetButton = page.getByLabel("Reset map view");
+  await resetButton.click();
+
+  const resetGeoJson = await getMapProperties(page, "drawgeojsondata");
+
+  expect(resetGeoJson, "drawGeoJsonData should be reset").toEqual(null);
+};
+
+export const checkGeoJsonContent = async (
+  page: Page,
+  attribute: "geojsondata" | "drawgeojsondata",
+  geoJson: Feature,
+) => {
   // Wait for the map component to be present
   const mapComponent = await page.waitForSelector("my-map");
 
+  await page.waitForFunction(() => customElements.get("my-map"));
+  await expect(
+    page.getByTestId("map-test-id"),
+    "Check we can see the map",
+  ).toBeVisible();
+
   // Get the geojsonData attribute
-  const geojsonData = await mapComponent.getAttribute("geojsondata");
+  const geojsonData = await mapComponent.getAttribute(attribute);
+
+  expect(
+    JSON.parse(geojsonData!),
+    "map attribute matches expected mock attribute",
+  ).toEqual(geoJson);
+};
+
+export const checkUploadFileAltRoute = async (page: Page) => {
+  const uploadButton = page.getByTestId("upload-file-button");
+
+  await expect(
+    uploadButton,
+    "We can see a button to upload a file instead",
+  ).toBeVisible();
+
+  await uploadButton.click();
+
+  await expect(
+    page.getByRole("heading", { name: "Upload a location plan" }),
+    "Should be in a page for uploading a file",
+  ).toBeVisible();
+
+  await expect(
+    page.getByRole("button", { name: "Drop file here or choose" }),
+    "A button for uploading files is visible",
+  ).toBeVisible();
+
+  await page.getByTestId("continue-button").click();
+
+  await page.getByTestId("error-message-upload-location-plan").isVisible();
+
+  const useMapButton = page.getByTestId("use-map-button");
 
-  expect(JSON.parse(geojsonData!)).toEqual(geoJson);
+  await useMapButton.click();
 };