@geospatial-sdk/openlayers 0.0.5-dev.55 → 0.0.5-dev.56

package/lib/map/create-map.test.ts

@@ -7,9 +7,9 @@ import {
 import {
   MAP_CTX_EXTENT_FIXTURE,
   MAP_CTX_FIXTURE,
-  MAP_CTX_LAYER_GEOTIFF_FIXTURE,
   MAP_CTX_LAYER_GEOJSON_FIXTURE,
   MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE,
+  MAP_CTX_LAYER_GEOTIFF_FIXTURE,
   MAP_CTX_LAYER_MAPBLIBRE_STYLE_FIXTURE,
   MAP_CTX_LAYER_MVT_FIXTURE,
   MAP_CTX_LAYER_OGCAPI_FIXTURE,
@@ -44,10 +44,8 @@ import {
   createView,
   resetMapFromContext,
 } from "./create-map.js";
-import {
-  handleEndpointError,
-  tileLoadErrorCatchFunction,
-} from "./handle-errors.js";
+import { tileLoadErrorCatchFunction } from "./handle-errors.js";
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
 
 vi.mock("./handle-errors", async (importOriginal) => {
   const actual =
@@ -59,18 +57,22 @@ vi.mock("./handle-errors", async (importOriginal) => {
   };
 });
 
-afterEach(() => {
+beforeEach(() => {
+  vi.useFakeTimers();
   vi.clearAllMocks();
 });
 
 describe("MapContextService", () => {
   describe("#createLayer", () => {
     let layerModel: MapContextLayer, layer: Layer;
+    const eventCallback = vi.fn();
 
     describe("XYZ", () => {
       beforeEach(async () => {
         layerModel = MAP_CTX_LAYER_XYZ_FIXTURE;
         layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
       it("create a tile layer", () => {
         expect(layer).toBeTruthy();
@@ -108,13 +110,25 @@ describe("MapContextService", () => {
         tileLoadFunction(tile, "http://example.com/tile");
         expect(tileLoadErrorCatchFunction).toHaveBeenCalled();
       });
+      it("emits a loaded event initially", async () => {
+        await vi.runAllTimersAsync();
+        expect(eventCallback).toHaveBeenCalledWith({
+          layerState: {
+            loaded: true,
+          },
+          target: layer,
+          type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        });
+      });
     });
-    describe("OGCAPI", () => {
+    describe("OGCAPI (as geojson items)", () => {
       beforeEach(async () => {
         layerModel = MAP_CTX_LAYER_OGCAPI_FIXTURE;
         layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
-      it("create a vector tile layer", () => {
+      it("create a vector layer", () => {
         expect(layer).toBeTruthy();
         expect(layer).toBeInstanceOf(VectorLayer);
       });
@@ -124,7 +138,7 @@ describe("MapContextService", () => {
         expect(layer.get("label")).toBeUndefined();
         expect(layer.getSource()?.getAttributions()).toBeNull();
       });
-      it("create a OGCVectorTile source", () => {
+      it("create a vector source", () => {
         const source = layer.getSource();
         expect(source).toBeInstanceOf(VectorSource);
       });
@@ -135,11 +149,23 @@ describe("MapContextService", () => {
           "https://demo.ldproxy.net/zoomstack/collections/airports/items?f=json",
         );
       });
+      it("emits a loaded event initially", async () => {
+        await vi.runAllTimersAsync();
+        expect(eventCallback).toHaveBeenCalledWith({
+          layerState: {
+            loaded: true,
+          },
+          target: layer,
+          type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        });
+      });
     });
     describe("WMS", () => {
       beforeEach(async () => {
-        (layerModel = MAP_CTX_LAYER_WMS_FIXTURE),
-          (layer = await createLayer(layerModel));
+        layerModel = MAP_CTX_LAYER_WMS_FIXTURE;
+        layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
       it("create a tile layer", () => {
         expect(layer).toBeTruthy();
@@ -189,12 +215,24 @@ describe("MapContextService", () => {
         tileLoadFunction(tile, "http://example.com/tile");
         expect(tileLoadErrorCatchFunction).toHaveBeenCalled();
       });
+      it("emits a loaded event initially", async () => {
+        await vi.runAllTimersAsync();
+        expect(eventCallback).toHaveBeenCalledWith({
+          layerState: {
+            loaded: true,
+          },
+          target: layer,
+          type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        });
+      });
     });
 
     describe("WFS", () => {
       beforeEach(async () => {
-        (layerModel = MAP_CTX_LAYER_WFS_FIXTURE),
-          (layer = await createLayer(layerModel));
+        layerModel = MAP_CTX_LAYER_WFS_FIXTURE;
+        layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
       it("create a vector layer", () => {
         expect(layer).toBeTruthy();
@@ -224,17 +262,15 @@ describe("MapContextService", () => {
           "https://www.datagrandest.fr/geoserver/region-grand-est/ows?service=WFS&version=1.1.0&request=GetFeature&outputFormat=application%2Fjson&typename=ms%3Acommune_actuelle_3857&srsname=EPSG%3A3857&bbox=10%2C20%2C30%2C40%2CEPSG%3A3857&maxFeatures=10000",
         );
       });
-      it("should NOT call handleEndpointError", () => {
-        expect(handleEndpointError).not.toHaveBeenCalled();
-      });
-    });
-    describe("WFS error", () => {
-      beforeEach(async () => {
-        layerModel = { ...MAP_CTX_LAYER_WFS_FIXTURE, url: "https://wfs/error" };
-        layer = await createLayer(layerModel);
-      });
-      it("should call handleEndpointError", () => {
-        expect(handleEndpointError).toHaveBeenCalled();
+      it("emits a loaded event initially", async () => {
+        await vi.runAllTimersAsync();
+        expect(eventCallback).toHaveBeenCalledWith({
+          layerState: {
+            loaded: true,
+          },
+          target: layer,
+          type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        });
       });
     });
 
@@ -243,6 +279,11 @@ describe("MapContextService", () => {
         beforeEach(async () => {
           layerModel = MAP_CTX_LAYER_GEOJSON_FIXTURE;
           layer = await createLayer(layerModel);
+          layer.on(
+            `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+            eventCallback,
+          );
+          layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
         });
         it("create a VectorLayer", () => {
           expect(layer).toBeTruthy();
@@ -264,6 +305,16 @@ describe("MapContextService", () => {
             .data as FeatureCollection;
           expect(features.length).toBe(data.features.length);
         });
+        it("emits a loaded event", async () => {
+          await vi.runAllTimersAsync();
+          expect(eventCallback).toHaveBeenCalledWith({
+            layerState: {
+              loaded: true,
+            },
+            target: layer,
+            type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+          });
+        });
       });
       describe("with inline data as string", () => {
         beforeEach(async () => {
@@ -316,6 +367,11 @@ describe("MapContextService", () => {
         beforeEach(async () => {
           layerModel = MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE;
           layer = await createLayer(layerModel);
+          layer.on(
+            `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+            eventCallback,
+          );
+          layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
         });
         it("create a VectorLayer", () => {
           expect(layer).toBeTruthy();
@@ -335,6 +391,16 @@ describe("MapContextService", () => {
             (layerModel as MapContextLayerGeojson).url,
           );
         });
+        it("emits a loaded event as well as data info eventually", async () => {
+          await vi.runAllTimersAsync();
+          expect(eventCallback).toHaveBeenCalledWith({
+            layerState: {
+              loaded: true,
+            },
+            target: layer,
+            type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+          });
+        });
       });
     });
 
@@ -342,6 +408,8 @@ describe("MapContextService", () => {
       beforeEach(async () => {
         layerModel = MAP_CTX_LAYER_WMTS_FIXTURE;
         layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
       it("create a tile layer", () => {
         expect(layer).toBeTruthy();
@@ -366,20 +434,15 @@ describe("MapContextService", () => {
           "https://services.geo.sg.ch/wss/service/SG00066_WMTS/guest/tile/1.0.0/SG00066/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}",
         ]);
       });
-      it("should NOT call handleEndpointError", () => {
-        expect(handleEndpointError).not.toHaveBeenCalled();
-      });
-    });
-    describe("WMTS error", () => {
-      beforeEach(async () => {
-        layerModel = {
-          ...MAP_CTX_LAYER_WMTS_FIXTURE,
-          url: "https://wmts/error",
-        };
-        layer = await createLayer(layerModel);
-      });
-      it("should call handleEndpointError", () => {
-        expect(handleEndpointError).toHaveBeenCalled();
+      it("emits a loaded event initially", async () => {
+        await vi.runAllTimersAsync();
+        expect(eventCallback).toHaveBeenCalledWith({
+          layerState: {
+            loaded: true,
+          },
+          target: layer,
+          type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        });
       });
     });
     describe("WMTS without default style given", () => {
@@ -389,6 +452,8 @@ describe("MapContextService", () => {
           url: "https://wmts/no-default-style",
         };
         layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
       it("uses the first style as default", async () => {
         const source = layer.getSource() as WMTS;
@@ -400,6 +465,8 @@ describe("MapContextService", () => {
       beforeEach(async () => {
         layerModel = MAP_CTX_LAYER_MAPBLIBRE_STYLE_FIXTURE;
         layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
       it("create a tile layer", () => {
         expect(layer).toBeTruthy();
@@ -414,12 +481,24 @@ describe("MapContextService", () => {
         const source = layer.getSource();
         expect(source).toBeInstanceOf(VectorTile);
       });
+      it("emits a loaded event initially", async () => {
+        await vi.runAllTimersAsync();
+        expect(eventCallback).toHaveBeenCalledWith({
+          layerState: {
+            loaded: true,
+          },
+          target: layer,
+          type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        });
+      });
     });
 
     describe("MVT", () => {
       beforeEach(async () => {
         layerModel = MAP_CTX_LAYER_MVT_FIXTURE;
         layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
       it("create a VectorTileLayer", () => {
         expect(layer).toBeTruthy();
@@ -434,6 +513,16 @@ describe("MapContextService", () => {
         expect(layer.getOpacity()).toBe(1);
         expect(layer.get("label")).toBeUndefined();
       });
+      it("emits a loaded event initially", async () => {
+        await vi.runAllTimersAsync();
+        expect(eventCallback).toHaveBeenCalledWith({
+          layerState: {
+            loaded: true,
+          },
+          target: layer,
+          type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        });
+      });
     });
 
     describe("GeoTIFF", () => {

package/lib/map/create-map.ts

@@ -25,16 +25,14 @@ import OGCVectorTile from "ol/source/OGCVectorTile.js";
 import WMTS from "ol/source/WMTS.js";
 import MVT from "ol/format/MVT.js";
 import {
+  EndpointError,
   OgcApiEndpoint,
   WfsEndpoint,
   WmtsEndpoint,
 } from "@camptocamp/ogc-client";
 import { MapboxVectorLayer } from "ol-mapbox-style";
 import { Tile } from "ol";
-import {
-  handleEndpointError,
-  tileLoadErrorCatchFunction,
-} from "./handle-errors.js";
+import { tileLoadErrorCatchFunction } from "./handle-errors.js";
 import VectorTile from "ol/source/VectorTile.js";
 import GeoTIFF from "ol/source/GeoTIFF.js";
 import WebGLTileLayer from "ol/layer/WebGLTile.js";
@@ -45,6 +43,13 @@ import {
   updateLayerProperties,
 } from "./layer-update.js";
 import { initHoverLayer } from "./feature-hover.js";
+import {
+  emitLayerCreationError,
+  emitLayerLoadingError,
+  emitLayerLoadingStatusSuccess,
+  propagateLayerStateChangeEventToMap,
+} from "./register-events.js";
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
 
 // Register proj4 with OpenLayers so that arbitrary EPSG codes
 // (e.g., UTM zones from GeoTIFF metadata) can be reprojected to the map projection
@@ -53,9 +58,15 @@ register(proj4);
 const GEOJSON = new GeoJSON();
 const WFS_MAX_FEATURES = 10000;
 
+// We need to defer some events being dispatched to make sure they are caught by the map
+// where the layers sit
+// FIXME: this should be better handled in a separate module!
+const defer = () => new Promise((resolve) => setTimeout(resolve, 0));
+
 export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
   const { type } = layerModel;
-  let layer: Layer | undefined;
+  let layer: Layer;
+
   switch (type) {
     case "xyz":
       {
@@ -82,8 +93,10 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
           });
           layer.setSource(source);
         }
+        defer().then(() => emitLayerLoadingStatusSuccess(layer));
       }
       break;
+
     case "wms":
       {
         layer = new TileLayer({});
@@ -104,9 +117,10 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
           );
         });
         layer.setSource(source);
+        defer().then(() => emitLayerLoadingStatusSuccess(layer));
       }
-
       break;
+
     case "wmts": {
       const olLayer = new TileLayer({});
       const endpoint = new WmtsEndpoint(layerModel.url);
@@ -138,11 +152,16 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
             }),
           );
         })
+        .then(() => emitLayerLoadingStatusSuccess(olLayer))
         .catch((e) => {
-          handleEndpointError(olLayer, e);
+          const httpStatus =
+            e instanceof EndpointError ? e.httpStatus : undefined;
+          emitLayerLoadingError(olLayer, e, httpStatus);
         });
-      return olLayer;
+      layer = olLayer;
+      break;
     }
+
     case "wfs": {
       const olLayer = new VectorLayer({
         style: layerModel.style ?? defaultStyle,
@@ -169,28 +188,35 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
             }),
           );
         })
+        .then(() => emitLayerLoadingStatusSuccess(olLayer))
         .catch((e) => {
-          handleEndpointError(olLayer, e);
+          const httpStatus =
+            e instanceof EndpointError ? e.httpStatus : undefined;
+          emitLayerLoadingError(olLayer, e, httpStatus);
         });
       layer = olLayer;
       break;
     }
+
     case "maplibre-style": {
       layer = new MapboxVectorLayer({
         styleUrl: layerModel.styleUrl,
         accessToken: layerModel.accessToken,
       }) as unknown as Layer;
+      defer().then(() => emitLayerLoadingStatusSuccess(layer));
       break;
     }
+
     case "geojson": {
+      layer = new VectorLayer({
+        style: layerModel.style ?? defaultStyle,
+      });
+      let source: VectorSource;
       if (layerModel.url !== undefined) {
-        layer = new VectorLayer({
-          source: new VectorSource({
-            format: new GeoJSON(),
-            url: layerModel.url,
-            attributions: layerModel.attributions,
-          }),
-          style: layerModel.style ?? defaultStyle,
+        source = new VectorSource({
+          format: new GeoJSON(),
+          url: layerModel.url,
+          attributions: layerModel.attributions,
         });
       } else {
         let geojson = layerModel.data;
@@ -206,16 +232,17 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
           featureProjection: "EPSG:3857",
           dataProjection: "EPSG:4326",
         }) as Feature<Geometry>[];
-        layer = new VectorLayer({
-          source: new VectorSource({
-            features,
-            attributions: layerModel.attributions,
-          }),
-          style: layerModel.style ?? defaultStyle,
+        source = new VectorSource({
+          features,
+          attributions: layerModel.attributions,
         });
       }
+      layer.setSource(source);
+      // FIXME: actually track layer loading and data info
+      defer().then(() => emitLayerLoadingStatusSuccess(layer));
       break;
     }
+
     case "ogcapi": {
       const ogcEndpoint = new OgcApiEndpoint(layerModel.url);
       let layerUrl: string;
@@ -249,17 +276,21 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
           layerModel.collection,
           layerModel.options,
         );
+        const source = new VectorSource({
+          format: new GeoJSON(),
+          url: layerUrl,
+          attributions: layerModel.attributions,
+        });
         layer = new VectorLayer({
-          source: new VectorSource({
-            format: new GeoJSON(),
-            url: layerUrl,
-            attributions: layerModel.attributions,
-          }),
+          source,
           style: layerModel.style ?? defaultStyle,
         });
       }
+      // FIXME: actually track layer loading
+      defer().then(() => emitLayerLoadingStatusSuccess(layer));
       break;
     }
+
     case "geotiff": {
       const geoTiffSource = new GeoTIFF({
         sources: [{ url: layerModel.url }],
@@ -268,26 +299,38 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
       layer = new WebGLTileLayer({
         source: geoTiffSource,
       });
+      // FIXME: actually track tile loading
+      defer().then(() => emitLayerLoadingStatusSuccess(layer));
       break;
     }
-    default:
-      throw new Error(`Unrecognized layer type: ${JSON.stringify(layerModel)}`);
-  }
-  if (!layer) {
-    throw new Error(`Layer could not be created for type: ${layerModel.type}`);
+
+    default: {
+      // we create an empty placeholder layer so that we still have a corresponding layer in OL
+      layer = new VectorLayer({
+        properties: {
+          [`${GEOSPATIAL_SDK_PREFIX}layer-with-error`]: true,
+        },
+      });
+      defer().then(() =>
+        emitLayerCreationError(
+          layer,
+          new Error(`Unrecognized layer type: ${JSON.stringify(layerModel)}`),
+        ),
+      );
+    }
   }
 
-  updateLayerProperties(layerModel, layer);
+  updateLayerProperties(layerModel, layer!);
 
-  return layer;
+  return layer!;
 }
 
-export function updateLayerInMap(
+export async function updateLayerInMap(
   map: Map,
   layerModel: MapContextLayer,
   layerPosition: number,
   previousLayerModel: MapContextLayer,
-) {
+): Promise<void> {
   const layers = map.getLayers();
   const updatedLayer = layers.item(layerPosition) as Layer;
 
@@ -299,8 +342,9 @@ export function updateLayerInMap(
 
   // dispose and recreate layer
   updatedLayer.dispose();
-  createLayer(layerModel).then((layer) => {
+  await createLayer(layerModel).then((layer) => {
     layers.setAt(layerPosition, layer);
+    propagateLayerStateChangeEventToMap(map, layer);
   });
 }
 
@@ -369,6 +413,7 @@ export async function resetMapFromContext(
   for (const layerModel of context.layers) {
     const layer = await createLayer(layerModel);
     map.addLayer(layer);
+    propagateLayerStateChangeEventToMap(map, layer);
   }
   initHoverLayer(map);
   return map;

package/lib/map/feature-hover.ts

@@ -108,7 +108,7 @@ export function initHoverLayer(map: OlMap) {
         );
         const features = Array.from(featuresByLayer.values()).flat();
         map.dispatchEvent({
-          type: FeaturesHoverEventType,
+          type: `${GEOSPATIAL_SDK_PREFIX}${FeaturesHoverEventType}`,
           features,
           featuresByLayer,
         } as unknown as BaseEvent);

package/lib/map/handle-errors.test.ts

@@ -1,13 +1,6 @@
-import { ImageTile, Tile } from "ol";
-import TileState from "ol/TileState.js";
-import { SourceLoadErrorEvent } from "@geospatial-sdk/core";
-import {
-  handleTileError,
-  tileLoadErrorCatchFunction,
-} from "./handle-errors.js";
 import TileLayer from "ol/layer/Tile.js";
 import VectorLayer from "ol/layer/Vector.js";
-import { EndpointError } from "@camptocamp/ogc-client";
+import { emitLayerLoadingError } from "./register-events.js";
 
 globalThis.URL.createObjectURL = vi.fn(() => "blob:http://example.com/blob");
 
@@ -26,45 +19,29 @@ globalThis.fetch = vi.fn().mockImplementation((url: string) => {
 });
 
 describe("handle-errors", () => {
-  let tile: Tile;
-
-  beforeEach(() => {
-    tile = new ImageTile(
-      [0, 0, 0],
-      TileState.IDLE,
-      "",
-      null,
-      () => tileLoadErrorCatchFunction,
-    );
-  });
-
   describe("handleEndpointError", () => {
     it("should dispatch SourceLoadErrorEvent", () => {
-      const endpointErrorMock: EndpointError = {
-        name: "Error",
-        message: "FORBIDDEN",
-        httpStatus: 403,
-      };
       const layer = new VectorLayer({});
       const dispatchEventSpy = vi.spyOn(layer, "dispatchEvent");
-      handleTileError(endpointErrorMock, tile, layer);
-      expect(dispatchEventSpy).toHaveBeenCalledWith(
-        new SourceLoadErrorEvent(endpointErrorMock),
-      );
+      emitLayerLoadingError(layer, new Error("FORBIDDEN"), 403);
+      expect(dispatchEventSpy).toHaveBeenCalledWith({
+        type: "--geospatial-sdk-layer-loading-error",
+        error: new Error("FORBIDDEN"),
+        httpStatus: 403,
+      });
     });
   });
 
   describe("handleTileError", () => {
     it("should set tile state to ERROR and dispatch SourceLoadErrorEvent", () => {
-      const response = new Response("Forbidden", { status: 403 });
       const layer = new TileLayer({});
       const dispatchEventSpy = vi.spyOn(layer, "dispatchEvent");
-      const setStateEventSpy = vi.spyOn(tile, "setState");
-      handleTileError(response, tile, layer);
-      expect(setStateEventSpy).toHaveBeenCalledWith(TileState.ERROR);
-      expect(dispatchEventSpy).toHaveBeenCalledWith(
-        new SourceLoadErrorEvent(response),
-      );
+      emitLayerLoadingError(layer, new Error("Forbidden"), 403);
+      expect(dispatchEventSpy).toHaveBeenCalledWith({
+        type: "--geospatial-sdk-layer-loading-error",
+        error: new Error("Forbidden"),
+        httpStatus: 403,
+      });
     });
   });
 });