fix: CanvasOverlay mock

src/canvas-overlay.ts

@@ -48,6 +48,14 @@ export class CanvasOverlay extends Layer {
   _leaflet_id?: number;
   options: LayerOptions;
 
+  get map(): Map {
+    return this._map;
+  }
+
+  set map(map: Map) {
+    this._map = map;
+  }
+
   constructor(userDrawFunc: IUserDrawFunc, pane: string) {
     super();
     this._userDrawFunc = userDrawFunc;
@@ -78,11 +86,11 @@ export class CanvasOverlay extends Layer {
   }
 
   isAnimated(): boolean {
-    return Boolean(this._map.options.zoomAnimation && Browser.any3d);
+    return Boolean(this.map.options.zoomAnimation && Browser.any3d);
   }
 
   onAdd(map: Map): this {
-    this._map = map;
+    this.map = map;
     const canvas = (this.canvas =
       this.canvas ?? document.createElement("canvas"));
 
@@ -136,18 +144,14 @@ export class CanvasOverlay extends Layer {
   }
 
   addTo(map: Map): this {
+    if (!this.canvas) {
+      //Resolves an issue where the canvas is not added to the map, discovered in a jsdom testing environment
+      this.canvas = document.createElement("canvas");
+    }
     map.addLayer(this);
     return this;
   }
 
-  get map(): Map {
-    return this._map;
-  }
-
-  set map(map: Map) {
-    this._map = map;
-  }
-
   _resize(resizeEvent: ResizeEvent): void {
     if (this.canvas) {
       this.canvas.width = resizeEvent.newSize.x;
@@ -157,19 +161,19 @@ export class CanvasOverlay extends Layer {
 
   _reset(): void {
     if (this.canvas) {
-      const topLeft = this._map.containerPointToLayerPoint([0, 0]);
+      const topLeft = this.map.containerPointToLayerPoint([0, 0]);
       DomUtil.setPosition(this.canvas, topLeft);
     }
     this._redraw();
   }
 
   _redraw(): void {
-    const { _map, canvas } = this;
-    const size = _map.getSize();
-    const bounds = _map.getBounds();
+    const { map, canvas } = this;
+    const size = map.getSize();
+    const bounds = map.getBounds();
     const zoomScale =
       (size.x * 180) / (20037508.34 * (bounds.getEast() - bounds.getWest())); // resolution = 1/zoomScale
-    const zoom = _map.getZoom();
+    const zoom = map.getZoom();
     const topLeft = new LatLng(bounds.getNorth(), bounds.getWest());
     const offset = this._unclampedProject(topLeft, 0);
     if (canvas) {
@@ -195,10 +199,10 @@ export class CanvasOverlay extends Layer {
   }
 
   _animateZoom(e: ZoomAnimEvent): void {
-    const { _map, canvas } = this;
-    const scale = _map.getZoomScale(e.zoom, _map.getZoom());
+    const { map, canvas } = this;
+    const scale = map.getZoomScale(e.zoom, map.getZoom());
     const offset = this._unclampedLatLngBoundsToNewLayerBounds(
-      _map.getBounds(),
+      map.getBounds(),
       e.zoom,
       e.center
     ).min;
@@ -208,23 +212,23 @@ export class CanvasOverlay extends Layer {
   }
 
   _animateZoomNoLayer(e: ZoomAnimEvent): void {
-    const { _map, canvas } = this;
+    const { map, canvas } = this;
     if (canvas) {
-      const scale = _map.getZoomScale(e.zoom, _map.getZoom());
-      const offset = _map
+      const scale = map.getZoomScale(e.zoom, map.getZoom());
+      const offset = map
         // @ts-expect-error experimental
         ._getCenterOffset(e.center)
         ._multiplyBy(-scale)
         // @ts-expect-error  experimental
-        .subtract(_map._getMapPanePos());
+        .subtract(map._getMapPanePos());
       DomUtil.setTransform(canvas, offset, scale);
     }
   }
 
   _unclampedProject(latlng: LatLng, zoom: number): Point {
     // imported partly from https://github.com/Leaflet/Leaflet/blob/1ae785b73092fdb4b97e30f8789345e9f7c7c912/src/geo/projection/Projection.SphericalMercator.js#L21
     // used because they clamp the latitude
-    const { crs } = this._map.options;
+    const { crs } = this.map.options;
     // @ts-expect-error experimental
     const { R } = crs.projection;
     const d = Math.PI / 180;
@@ -247,7 +251,7 @@ export class CanvasOverlay extends Layer {
     // imported party from https://github.com/Leaflet/Leaflet/blob/84bc05bbb6e4acc41e6f89ff7421dd7c6520d256/src/map/Map.js#L1500
     // used because it uses crs.projection.project, which clamp the latitude
     // @ts-expect-error experimental
-    const topLeft = this._map._getNewPixelOrigin(center, zoom);
+    const topLeft = this.map._getNewPixelOrigin(center, zoom);
     return new Bounds([
       this._unclampedProject(latLngBounds.getSouthWest(), zoom).subtract(
         topLeft

src/tests/base-gl-layer.test.ts

@@ -8,8 +8,6 @@ import {
 import { ICanvasOverlayDrawEvent } from "../canvas-overlay";
 import { LatLng, LatLngBounds, LeafletMouseEvent, Map, Point } from "leaflet";
 
-jest.mock("../canvas-overlay");
-
 describe("BaseGlLayer", () => {
   interface ITestLayerSettings extends IBaseGlLayerSettings {}
   class TestLayer extends BaseGlLayer<ITestLayerSettings> {

src/tests/index.test.ts

@@ -5,7 +5,6 @@ import { IShapesSettings, Shapes } from "../shapes";
 import { LatLng, LeafletMouseEvent, Map, Point } from "leaflet";
 import { FeatureCollection, LineString, MultiPolygon } from "geojson";
 
-jest.mock("../canvas-overlay");
 type mouseEventFunction = (e: LeafletMouseEvent) => void;
 jest.mock("../utils", () => {
   return {

src/tests/lines.test.ts

@@ -4,7 +4,6 @@ import { MapMatrix } from "../map-matrix";
 import { ICanvasOverlayDrawEvent } from "../canvas-overlay";
 import { ILinesSettings, Lines, WeightCallback } from "../lines";
 
-jest.mock("../canvas-overlay");
 jest.mock("../utils", () => {
   return {
     inBounds: () => true,
@@ -279,50 +278,10 @@ describe("Lines", () => {
       jest.spyOn(lines.map, "project").mockReturnValue(new Point(1, 2));
       lines.resetVertices();
       const expected = [
-        1,
-        2,
-        3,
-        4,
-        5,
-        6,
-        1,
-        2,
-        3,
-        4,
-        5,
-        6,
-        1,
-        2,
-        3,
-        4,
-        5,
-        6,
-        1,
-        2,
-        3,
-        4,
-        5,
-        6,
+        1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6,
       ];
       const expectedVerticesArray = [
-        1,
-        2,
-        3,
-        4,
-        5,
-        6,
-        1,
-        2,
-        3,
-        4,
-        5,
-        6,
-        1,
-        2,
-        3,
-        4,
-        5,
-        6,
+        1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6,
       ];
       expect(lines.vertices.length).toBe(1);
       expect(lines.vertices[0].array).toEqual(expectedVerticesArray);

src/tests/points.test.ts

@@ -3,8 +3,6 @@ import { FeatureCollection, Point as GeoPoint } from "geojson";
 import { IPointVertex, IPointsSettings, Points } from "../points";
 import { ICanvasOverlayDrawEvent } from "../canvas-overlay";
 
-jest.mock("../canvas-overlay");
-
 function getPoints(settings?: Partial<IPointsSettings>): Points {
   const element = document.createElement("div");
   const map = new Map(element);

src/tests/shapes.test.ts

@@ -7,11 +7,9 @@ import earcut from "earcut";
 import { IShapesSettings, Shapes } from "../shapes";
 import { notProperlyDefined } from "../errors";
 
-jest.mock("../canvas-overlay");
 jest.mock("geojson-flatten", () => {
-  const realGeojsonFlatten = jest.requireActual<typeof geojsonFlatten>(
-    "geojson-flatten"
-  );
+  const realGeojsonFlatten =
+    jest.requireActual<typeof geojsonFlatten>("geojson-flatten");
   return {
     __esModule: true,
     default: jest.fn((v) => realGeojsonFlatten(v)),