fix: Ensure snap points always load

.github/workflows/pnpm-test.yml

@@ -26,3 +26,4 @@ jobs:
       - run: pnpm test
         env:
           VITE_APP_OS_PLACES_API_KEY: ${{ secrets.OS_API_KEY }}
+          VITE_APP_OS_VECTOR_TILES_API_KEY: ${{ secrets.OS_API_KEY }}

package.json

@@ -51,7 +51,8 @@
     "sass": "^1.44.0",
     "typescript": "^4.3.5",
     "vite": "^3.0.4",
-    "vitest": "0.20.3"
+    "vitest": "0.20.3",
+    "wait-for-expect": "^3.0.2"
   },
   "engines": {
     "node": "^16",

src/components/my-map/index.ts

@@ -222,6 +222,9 @@ export class MyMap extends LitElement {
 
     this.map = map;
 
+    // Append to global window for reference in tests
+    window.olMap = import.meta.env.VITEST ? this.map : undefined;
+
     // make configurable interactions available
     const draw = configureDraw(this.drawPointer);
     const modify = configureModify(this.drawPointer);
@@ -396,26 +399,24 @@ export class MyMap extends LitElement {
       drawingLayer.setZIndex(1001);
 
       // extract snap-able points from the basemap, and display them as points on the map if initial render within zoom
-      if (this.zoom < snapsZoom) {
+      const addSnapPoints = (): void => {
         pointsSource.clear();
-        const extent = map.getView().calculateExtent(map.getSize());
-        getSnapPointsFromVectorTiles(osVectorTileBaseMap, extent);
-      }
-
-      // continue to fetch & update snaps as map moves
-      map.on("moveend", () => {
         const currentZoom: number | undefined = map.getView().getZoom();
-        if (currentZoom && currentZoom < snapsZoom) {
-          pointsSource.clear();
-          return;
-        }
-
-        // timeout minimizes snap updates mid-pan/drag
-        setTimeout(() => {
-          pointsSource.clear();
+        if (currentZoom && currentZoom >= snapsZoom) {
           const extent = map.getView().calculateExtent(map.getSize());
           getSnapPointsFromVectorTiles(osVectorTileBaseMap, extent);
-        }, 200);
+        }
+      };
+
+      // Wait for all vector tiles to finish loading before extracting points from them
+      map.on("loadend", addSnapPoints);
+
+      // Update snap points when appropriate
+      // Timeout minimizes updates mid-pan/drag
+      map.on("moveend", () => {
+        const isSourceLoaded =
+          osVectorTileBaseMap.getSource()?.getState() === "ready";
+        if (isSourceLoaded) setTimeout(addSnapPoints, 200);
       });
     }
 
@@ -535,6 +536,9 @@ export class MyMap extends LitElement {
 }
 
 declare global {
+  interface Window {
+    olMap: Map | undefined;
+  }
   interface HTMLElementTagNameMap {
     "my-map": MyMap;
   }

src/components/my-map/main.test.ts

@@ -1,20 +1,36 @@
 import type { IWindow } from "happy-dom";
-import { beforeEach, describe, it, expect } from "vitest";
+import { beforeEach, describe, it, expect, MockInstance } from "vitest";
+import Map from "ol/Map";
+import { Feature } from "ol";
+import Point from "ol/geom/Point";
+import VectorSource from "ol/source/Vector";
+import waitForExpect from "wait-for-expect";
 
 import { getShadowRoot } from "../../test-utils";
-
+import * as snapping from "./snapping";
 import "./index";
 
 declare global {
   interface Window extends IWindow {}
 }
 
-describe("MyMap on initial render with OSM basemap", async () => {
-  beforeEach(async () => {
-    document.body.innerHTML = '<my-map id="map-vitest" disableVectorTiles />';
+const setupMap = async (mapElement: any) => {
+  document.body.innerHTML = mapElement;
+  await window.happyDOM.whenAsyncComplete();
+  window.olMap?.dispatchEvent("loadend");
+};
 
-    await window.happyDOM.whenAsyncComplete();
-  }, 2500);
+test("olMap is added to the global window for tests", async () => {
+  await setupMap(`<my-map id="map-vitest" disableVectorTiles />`);
+  expect(window.olMap).toBeTruthy();
+  expect(window.olMap).toBeInstanceOf(Map);
+});
+
+describe("MyMap on initial render with OSM basemap", async () => {
+  beforeEach(
+    () => setupMap('<my-map id="map-vitest" disableVectorTiles />'),
+    2500
+  );
 
   it("should render a custom element with a shadow root", () => {
     const map = document.body.querySelector("my-map");
@@ -30,3 +46,89 @@ describe("MyMap on initial render with OSM basemap", async () => {
     expect(map?.getAttribute("tabindex")).toEqual("0");
   });
 });
+
+describe("Snap points loading behaviour", () => {
+  const ZOOM_WITHIN_RANGE = 25;
+  const ZOOM_OUTWITH_RANGE = 15;
+
+  const getSnapSpy: MockInstance = vi.spyOn(
+    snapping,
+    "getSnapPointsFromVectorTiles"
+  );
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("should not load snap points if the initial zoom is not within range", async () => {
+    await setupMap(`<my-map 
+      id="map-vitest" 
+      zoom=${ZOOM_OUTWITH_RANGE} 
+      drawMode 
+      osVectorTileApiKey=${process.env.VITE_APP_OS_VECTOR_TILES_API_KEY}
+    />`);
+    const pointsLayer = window.olMap
+      ?.getAllLayers()
+      .find((layer) => layer.get("name") === "pointsLayer");
+    expect(pointsLayer).toBeDefined();
+    const source = pointsLayer?.getSource() as VectorSource;
+    expect(source.getFeatures()?.length).toEqual(0);
+    expect(getSnapSpy).not.toHaveBeenCalled();
+  });
+
+  it("should load snap points if the initial zoom is within range", async () => {
+    await setupMap(`<my-map 
+      id="map-vitest" 
+      zoom=${ZOOM_WITHIN_RANGE} 
+      drawMode 
+      osVectorTileApiKey=${process.env.VITE_APP_OS_VECTOR_TILES_API_KEY}
+    />`);
+    expect(getSnapSpy).toHaveBeenCalledOnce();
+  });
+
+  it("should load snap points on zoom into correct range", async () => {
+    await setupMap(`<my-map 
+      id="map-vitest" 
+      zoom=${ZOOM_OUTWITH_RANGE} 
+      drawMode 
+      osVectorTileApiKey=${process.env.VITE_APP_OS_VECTOR_TILES_API_KEY}
+    />`);
+    window.olMap?.getView().setZoom(ZOOM_WITHIN_RANGE);
+    window.olMap?.dispatchEvent("loadend");
+    expect(getSnapSpy).toHaveBeenCalledOnce();
+  });
+
+  it("should clear snap points on zoom out of range", async () => {
+    // Setup map and add a mock snap point
+    await setupMap(`<my-map 
+      id="map-vitest" 
+      zoom=${ZOOM_WITHIN_RANGE}
+      drawMode 
+      osVectorTileApiKey=${process.env.VITE_APP_OS_VECTOR_TILES_API_KEY}
+    />`);
+    const pointsLayer = window.olMap
+      ?.getAllLayers()
+      .find((layer) => layer.get("name") === "pointsLayer");
+    const source = pointsLayer?.getSource() as VectorSource;
+    const mockSnapPoint = new Feature(new Point([1, 1]));
+    source?.addFeature(mockSnapPoint);
+    expect(source.getFeatures()?.length).toEqual(1);
+
+    // Zoom out to clear the point layer
+    window.olMap?.getView().setZoom(ZOOM_OUTWITH_RANGE);
+    window.olMap?.dispatchEvent("loadend");
+    expect(getSnapSpy).toHaveBeenCalledOnce();
+    expect(source.getFeatures()?.length).toEqual(0);
+  });
+
+  it("refetches snap points on a pan", async () => {
+    await setupMap(`<my-map 
+      id="map-vitest" 
+      zoom=${ZOOM_WITHIN_RANGE}
+      drawMode 
+      osVectorTileApiKey=${process.env.VITE_APP_OS_VECTOR_TILES_API_KEY}
+    />`);
+    expect(getSnapSpy).toHaveBeenCalledTimes(1);
+    window.olMap?.dispatchEvent("moveend");
+    await waitForExpect(() => expect(getSnapSpy).toHaveBeenCalledTimes(2));
+  });
+});

src/components/my-map/snapping.ts

@@ -14,6 +14,9 @@ export const pointsSource = new VectorSource({
 
 export const pointsLayer = new VectorLayer({
   source: pointsSource,
+  properties: {
+    name: "pointsLayer",
+  },
   style: new Style({
     image: new CircleStyle({
       radius: 3,