@elabs-ai/components-maps 4.1.0 → 5.0.0

package/src/test-utils/locator-fixture.ts

@@ -0,0 +1,75 @@
+/**
+ * A hand-simplified Lake Ontario locator fixture (≈ 20 vertices a shape, WGS 84
+ * lon / lat) for the locator-furniture stories and tests — two area markers
+ * and a few places. Offline and tiny on purpose; not survey-accurate.
+ */
+
+export const LAKE_ONTARIO: GeoJSON.Feature<GeoJSON.Polygon, { name: string }> = {
+  type: "Feature",
+  properties: { name: "Lake Ontario" },
+  geometry: {
+    type: "Polygon",
+    coordinates: [
+      [
+        [-79.8, 43.28],
+        [-79.55, 43.47],
+        [-79.38, 43.63],
+        [-79.05, 43.78],
+        [-78.86, 43.87],
+        [-78.17, 43.95],
+        [-77.55, 43.99],
+        [-77.15, 43.86],
+        [-76.82, 43.95],
+        [-76.48, 44.21],
+        [-76.24, 44.19],
+        [-76.2, 43.95],
+        [-76.46, 43.52],
+        [-76.95, 43.28],
+        [-77.6, 43.26],
+        [-78.3, 43.37],
+        [-78.9, 43.33],
+        [-79.06, 43.26],
+        [-79.56, 43.2],
+        [-79.8, 43.28],
+      ],
+    ],
+  },
+};
+
+export const GREATER_TORONTO: GeoJSON.Feature<GeoJSON.Polygon, { name: string }> = {
+  type: "Feature",
+  properties: { name: "Greater Toronto Area" },
+  geometry: {
+    type: "Polygon",
+    coordinates: [
+      [
+        [-79.8, 43.3],
+        [-79.55, 43.47],
+        [-79.38, 43.63],
+        [-79.05, 43.78],
+        [-78.86, 43.87],
+        [-78.8, 44.15],
+        [-79.3, 44.28],
+        [-79.85, 44.08],
+        [-80.05, 43.72],
+        [-79.8, 43.3],
+      ],
+    ],
+  },
+};
+
+/** West, south, east, north of both areas — the locator's data extent. */
+export const LOCATOR_BOUNDS: [[number, number], [number, number]] = [
+  [-80.05, 43.2],
+  [-76.2, 44.28],
+];
+
+/** Places the locator labels, west → east. */
+export const LOCATOR_PLACES = {
+  toronto: { longitude: -79.38, latitude: 43.65 },
+  hamilton: { longitude: -79.87, latitude: 43.25 },
+  rochester: { longitude: -77.61, latitude: 43.16 },
+  kingston: { longitude: -76.48, latitude: 44.23 },
+  lakeLabel: { longitude: -77.9, latitude: 43.62 },
+  gtaLabel: { longitude: -79.45, latitude: 43.93 },
+} as const;

package/src/test-utils/maplibre-mock.ts

@@ -13,16 +13,112 @@
 
 type Handler = (...args: any[]) => void;
 
+export class MockHandler {
+  enabled = true;
+  enable() {
+    this.enabled = true;
+  }
+  disable() {
+    this.enabled = false;
+  }
+  isEnabled() {
+    return this.enabled;
+  }
+}
+
+/**
+ * One persistent instance per source id, so a component that subscribes to its
+ * own source (`source.on("error", …)`) or updates it in place
+ * (`setCoordinates`/`updateImage`) can be asserted against. The spec fields are
+ * spread onto the instance, so reads like `source.type` still work.
+ */
+export class MockSource {
+  static instances: MockSource[] = [];
+
+  id: string;
+  spec: Record<string, any>;
+  handlers = new Map<string, Set<Handler>>();
+  setDataCalls: unknown[] = [];
+  coordinatesCalls: unknown[] = [];
+  updateImageCalls: unknown[] = [];
+
+  constructor(id: string, spec: Record<string, any>) {
+    this.id = id;
+    this.spec = spec;
+    Object.assign(this, spec);
+    MockSource.instances.push(this);
+  }
+
+  setData(data: unknown) {
+    this.setDataCalls.push(data);
+    return this;
+  }
+  setCoordinates(coordinates: unknown) {
+    this.coordinatesCalls.push(coordinates);
+    return this;
+  }
+  updateImage(options: unknown) {
+    this.updateImageCalls.push(options);
+    return this;
+  }
+  async getClusterExpansionZoom() {
+    return 2;
+  }
+  on(event: string, handler: Handler) {
+    if (!this.handlers.has(event)) this.handlers.set(event, new Set());
+    this.handlers.get(event)!.add(handler);
+    return this;
+  }
+  off(event: string, handler: Handler) {
+    this.handlers.get(event)?.delete(handler);
+    return this;
+  }
+  /** Fire an event on this source — e.g. a failed image fetch. */
+  emit(event: string, ...args: unknown[]) {
+    this.handlers.get(event)?.forEach((handler) => {
+      handler(...args);
+    });
+  }
+}
+
 export class MockMap {
   static instances: MockMap[] = [];
 
   handlers = new Map<string, Set<Handler>>();
   container: HTMLElement;
   removed = false;
-  sources = new Map<string, any>();
+  sources = new Map<string, MockSource>();
   layers = new Map<string, any>();
   canvas = document.createElement("canvas");
+  /** Starts with MapLibre's interactive class, as a real interactive map's does. */
+  canvasContainer = Object.assign(document.createElement("div"), {
+    className: "maplibregl-canvas-container maplibregl-interactive",
+  });
   zoomToCalls: unknown[] = [];
+  images = new Map<string, unknown>();
+  center = { lng: 0, lat: 0 };
+  zoom = 1;
+  bearing = 0;
+
+  /** Gesture handlers, each with an `enabled` flag static mode flips. */
+  scrollZoom = new MockHandler();
+  boxZoom = new MockHandler();
+  dragRotate = new MockHandler();
+  dragPan = new MockHandler();
+  keyboard = new MockHandler();
+  doubleClickZoom = new MockHandler();
+  touchZoomRotate = new MockHandler();
+  touchPitch = new MockHandler();
+  addLayerCalls: unknown[] = [];
+  paint = new Map<string, unknown>();
+  layout = new Map<string, unknown>();
+  featureStateCalls: unknown[] = [];
+  /** `[id, image, options]` per `addImage` — the pattern registration asserts `pixelRatio`. */
+  addImageCalls: [string, unknown, unknown][] = [];
+  updateImageCalls: [string, unknown][] = [];
+  minZoom: number | undefined;
+  maxZoom: number | undefined;
+  maxBounds: unknown;
 
   /** The full options object the component constructed the map with. */
   options: Record<string, any>;
@@ -30,6 +126,10 @@ export class MockMap {
   constructor(options: { container: HTMLElement } & Record<string, any>) {
     this.container = options.container;
     this.options = options;
+    // What MapLibre would measure: the box's height rule at construction time,
+    // and whether that rule could still be mid-transition when it measured.
+    this.aspectAtConstruction = options.container.style.aspectRatio;
+    this.transitionAtConstruction = options.container.style.transitionProperty;
     MockMap.instances.push(this);
   }
 
@@ -55,18 +155,47 @@ export class MockMap {
     return this;
   }
 
+  /** Manually re-fire an event's handlers — e.g. a second `styledata` after a style reload. */
+  emit(event: string, layerId?: string, ...args: unknown[]) {
+    this.handlers.get(this.key(event, layerId))?.forEach((handler) => {
+      handler(...args);
+    });
+  }
+
   remove() {
     this.removed = true;
   }
 
   getCenter() {
-    return { lng: 0, lat: 0 };
+    return this.center;
   }
   getZoom() {
-    return 1;
+    return this.zoom;
   }
   getBearing() {
-    return 0;
+    return this.bearing;
+  }
+  /**
+   * A flat equirectangular stand-in: 1° = 10 px from the container's top-left.
+   * Accepts both shapes MapLibre's own `project` does — a `[lng, lat]` pair
+   * and a `LngLat`.
+   */
+  project(lngLat: [number, number] | { lng: number; lat: number }) {
+    const [lng, lat] = Array.isArray(lngLat) ? lngLat : [lngLat.lng, lngLat.lat];
+    return { x: (lng + 180) * 10, y: (90 - lat) * 10 };
+  }
+  /** Inverse of {@link project} — the same flat equirectangular stand-in. */
+  unproject(point: [number, number] | { x: number; y: number }) {
+    const [x, y] = Array.isArray(point) ? point : [point.x, point.y];
+    return { lng: x / 10 - 180, lat: 90 - y / 10 };
+  }
+  getBounds() {
+    return {
+      getWest: () => -10,
+      getSouth: () => -10,
+      getEast: () => 10,
+      getNorth: () => 10,
+    };
   }
   getPitch() {
     return 0;
@@ -74,9 +203,19 @@ export class MockMap {
   isMoving() {
     return false;
   }
-  jumpTo() {}
+  /** Every `jumpTo(options)` the wrapper asked for, in order. */
+  jumpToCalls: any[] = [];
+  jumpTo(options?: any) {
+    this.jumpToCalls.push(options);
+  }
   easeTo() {}
   flyTo() {}
+  /** Every `fitBounds(bounds, options)` the wrapper asked for, in order. */
+  fitBoundsCalls: { bounds: unknown; options: unknown }[] = [];
+  fitBounds(bounds: unknown, options?: unknown) {
+    this.fitBoundsCalls.push({ bounds, options });
+    return this;
+  }
   zoomTo(zoom: number, options?: unknown) {
     this.zoomToCalls.push([zoom, options]);
   }
@@ -89,19 +228,39 @@ export class MockMap {
   getCanvas() {
     return this.canvas;
   }
+  aspectAtConstruction = "";
+  transitionAtConstruction = "";
+  resizeCount = 0;
+  resize() {
+    this.resizeCount += 1;
+    return this;
+  }
+  getCanvasContainer() {
+    return this.canvasContainer;
+  }
+  /** `[id, image, options]` per call — the pattern registration asserts `pixelRatio`. */
+  addImage(id: string, image: unknown, options?: unknown) {
+    this.addImageCalls.push([id, image, options]);
+    this.images.set(id, image);
+  }
+  hasImage(id: string) {
+    return this.images.has(id);
+  }
+  removeImage(id: string) {
+    this.images.delete(id);
+  }
   addSource(id: string, source: any) {
-    this.sources.set(id, source);
+    this.sources.set(id, new MockSource(id, source));
   }
   getSource(id: string) {
-    const source = this.sources.get(id);
-    if (!source) return undefined;
-    return { ...source, setData: () => {}, getClusterExpansionZoom: async () => 2 };
+    return this.sources.get(id);
   }
   removeSource(id: string) {
     this.sources.delete(id);
   }
-  addLayer(layer: { id: string }) {
+  addLayer(layer: { id: string } & Record<string, any>, beforeId?: string) {
     this.layers.set(layer.id, layer);
+    this.addLayerCalls.push([layer, beforeId]);
   }
   getLayer(id: string) {
     return this.layers.get(id);
@@ -109,11 +268,55 @@ export class MockMap {
   removeLayer(id: string) {
     this.layers.delete(id);
   }
-  setPaintProperty() {}
-  setLayoutProperty() {}
-  setFeatureState() {}
-  queryRenderedFeatures() {
-    return [];
+  setPaintProperty(layerId: string, name: string, value: unknown) {
+    this.paint.set(`${layerId}:${name}`, value);
+  }
+  /** Layout properties the wrapper set, keyed `<layerId>:<property>`. */
+  layoutProperties = new Map<string, unknown>();
+  setLayoutProperty(layerId: string, property: string, value: unknown) {
+    this.layoutProperties.set(`${layerId}:${property}`, value);
+    this.layout.set(`${layerId}:${property}`, value);
+  }
+  getLayoutProperty(layerId: string, property: string) {
+    return this.layoutProperties.get(`${layerId}:${property}`);
+  }
+  /**
+   * The style the map is showing. Like MapLibre's own, it lists every layer
+   * the map holds — a test describes a basemap's symbol layers by adding them
+   * with `addLayer`.
+   */
+  getStyle() {
+    return { layers: [...this.layers.values()] };
+  }
+  /** Observable feature-state, keyed by feature id — the hover highlight. */
+  featureStates = new Map<string | number, Record<string, unknown>>();
+  setFeatureState(target: { source: string; id: string | number }, state: Record<string, unknown>) {
+    this.featureStateCalls.push([target, state]);
+    this.featureStates.set(target.id, { ...this.featureStates.get(target.id), ...state });
+  }
+  /** What the next `queryRenderedFeatures` should return; set it per test. */
+  queryRenderedFeaturesResult: any[] = [];
+  queryRenderedFeaturesCalls: unknown[] = [];
+  queryRenderedFeatures(geometry?: unknown, options?: unknown) {
+    this.queryRenderedFeaturesCalls.push([geometry, options]);
+    return this.queryRenderedFeaturesResult;
+  }
+
+  // Camera limits — a plan map clamps pan and zoom to its extent.
+  setMinZoom(zoom: number) {
+    this.minZoom = zoom;
+  }
+  setMaxZoom(zoom: number) {
+    this.maxZoom = zoom;
+  }
+  setMaxBounds(bounds: unknown) {
+    this.maxBounds = bounds;
+  }
+
+  /** A canvas-generated tile re-registered in place, `[id, image]` per call. */
+  updateImage(id: string, image: unknown) {
+    this.updateImageCalls.push([id, image]);
+    this.images.set(id, image);
   }
 }
 
@@ -124,14 +327,20 @@ export class MockMarker {
   addedTo: MockMap | null = null;
   popup: unknown = null;
   lngLat = { lng: 0, lat: 0 };
+  /** The full options object the component constructed the marker with. */
+  options: Record<string, any>;
 
-  constructor(options: { element?: HTMLElement } = {}) {
+  constructor(options: { element?: HTMLElement } & Record<string, any> = {}) {
     this.element = options.element ?? document.createElement("div");
+    this.options = options;
     MockMarker.instances.push(this);
   }
 
-  setLngLat(lngLat: [number, number]) {
-    this.lngLat = { lng: lngLat[0], lat: lngLat[1] };
+  /** Accepts both shapes MapLibre does: a `[lng, lat]` pair and a `LngLat`. */
+  setLngLat(lngLat: [number, number] | { lng: number; lat: number }) {
+    this.lngLat = Array.isArray(lngLat)
+      ? { lng: lngLat[0], lat: lngLat[1] }
+      : { lng: lngLat.lng, lat: lngLat.lat };
     return this;
   }
   getLngLat() {
@@ -193,6 +402,8 @@ export class MockPopup {
   static instances: MockPopup[] = [];
 
   content: HTMLElement | null = null;
+  /** Whether the popup is currently on a map — what `addTo`/`remove` toggle. */
+  open = false;
 
   constructor() {
     MockPopup.instances.push(this);
@@ -215,13 +426,15 @@ export class MockPopup {
     return this;
   }
   addTo() {
+    this.open = true;
     return this;
   }
   remove() {
+    this.open = false;
     return this;
   }
   isOpen() {
-    return false;
+    return this.open;
   }
   on() {
     return this;
@@ -231,19 +444,53 @@ export class MockPopup {
   }
 }
 
+/**
+ * The real Web Mercator transform, so a plan coordinate system behaves under
+ * test exactly as it does in a browser.
+ */
+export class MockMercatorCoordinate {
+  constructor(
+    public x: number,
+    public y: number,
+    public z = 0,
+  ) {}
+
+  static fromLngLat(lngLat: { lng: number; lat: number } | [number, number], altitude = 0) {
+    const [lng, lat] = Array.isArray(lngLat) ? lngLat : [lngLat.lng, lngLat.lat];
+    const x = (180 + lng) / 360;
+    const y =
+      (180 - (180 / Math.PI) * Math.log(Math.tan(Math.PI / 4 + (lat * Math.PI) / 360))) / 360;
+    return new MockMercatorCoordinate(x, y, altitude);
+  }
+
+  toLngLat() {
+    const lng = this.x * 360 - 180;
+    const y2 = 180 - this.y * 360;
+    const lat = (360 / Math.PI) * (Math.atan(Math.exp((y2 * Math.PI) / 180)) - Math.PI / 4);
+    return { lng, lat };
+  }
+}
+
 /** Reset the per-class instance registries between tests. */
 export function resetMaplibreMock() {
   MockMap.instances = [];
   MockMarker.instances = [];
   MockPopup.instances = [];
+  MockSource.instances = [];
 }
 
 /** The module shape to return from `vi.mock("maplibre-gl", ...)`. */
 export function createMaplibreMock() {
   return {
-    default: { Map: MockMap, Marker: MockMarker, Popup: MockPopup },
+    default: {
+      Map: MockMap,
+      Marker: MockMarker,
+      Popup: MockPopup,
+      MercatorCoordinate: MockMercatorCoordinate,
+    },
     Map: MockMap,
     Marker: MockMarker,
     Popup: MockPopup,
+    MercatorCoordinate: MockMercatorCoordinate,
   };
 }