Merge branch 'master' into fix/issue-392

Author: nemesifier

public/example_templates/netjsonmap-plugins.html

@@ -27,9 +27,9 @@
     <script type="text/javascript" src="../lib/js/leaflet-measure.js"></script>
     <script type="module">
       /*
-          The demo is used to show how to use the leaflet plugins.
-          Mainly the operation of leaflet.
-          See below for details.
+        The demo is used to show how to use the leaflet plugins.
+        Mainly the operation of leaflet.
+        See below for details.
       */
       const graph = new NetJSONGraph("../assets/data/netjsonmap.json", {
         render: "map",
@@ -44,7 +44,6 @@
             },
           },
         },
-
         // Convert to internal json format
         prepareData: (data) => {
           data.nodes.map((node) => {
@@ -54,13 +53,12 @@
             });
           });
         },
-
         // Load related plugins after the map is rendered
         onReady: function () {
           /* 
-              The map has this property only after the map is rendered, 
-              so we have to put the relevant function in `onLoad` life cycle  
-            */
+            The map has this property only after the map is rendered,
+            so we have to put the relevant function in `onLoad` life cycle
+          */
           let map = this.leaflet,
             editableLayers = new L.FeatureGroup(),
             // Plugin related configuration
@@ -101,28 +99,24 @@
                 },
               },
               edit: {
-                featureGroup: editableLayers, //REQUIRED!!
+                featureGroup: editableLayers, // REQUIRED!!
                 remove: true,
               },
             };
-
           map.addLayer(editableLayers);
           map.addControl(new L.Control.Draw(options));
           map.on(L.Draw.Event.CREATED, function (e) {
             var type = e.layerType,
               layer = e.layer;
-
             if (type === "marker") {
               layer.bindPopup("A popup!");
             }
 
             editableLayers.addLayer(layer);
           });
-
           L.control.measure({}).addTo(map);
         },
       });
-
       graph.render();
     </script>
   </body>

test/browser.test.utils.js

@@ -39,6 +39,7 @@ export const urls = {
   geoJson: `${url}/examples/njg-geojson.html`,
   movingNode: `${url}/examples/netjsonmap-moving-node.html`,
   clustering: `${url}/examples/netjson-clustering.html`,
+  leafletPlugins: `${url}/examples/netjsonmap-plugins.html`,
 };
 
 export const getElementByCss = async (driver, css, waitTime = 1000) => {

test/netjsongraph.browser.test.js

@@ -522,4 +522,33 @@ describe("Chart Rendering Test", () => {
     expect(finalNodeCount).toBeGreaterThan(5);
     expect(initialNodeCount).toBeGreaterThan(0);
   });
+
+  test("render geo map with leaflet plugins without console errors", async () => {
+    await driver.get(urls.leafletPlugins);
+    const leafletContainer = await getElementByCss(
+      driver,
+      ".ec-extension-leaflet",
+      2000,
+    );
+    const drawToolbar = await getElementByCss(driver, ".leaflet-draw-toolbar", 2000);
+    const drawSection = await getElementByCss(driver, ".leaflet-draw-section", 2000);
+    const drawPolylineBtn = await getElementByCss(
+      driver,
+      ".leaflet-draw-draw-polyline",
+      2000,
+    );
+    const measureControl = await getElementByCss(
+      driver,
+      ".leaflet-control-measure",
+      2000,
+    );
+    const consoleErrors = await captureConsoleErrors(driver);
+    printConsoleErrors(consoleErrors);
+    expect(consoleErrors.length).toBe(0);
+    expect(leafletContainer).not.toBeNull();
+    expect(drawToolbar).not.toBeNull();
+    expect(drawSection).not.toBeNull();
+    expect(drawPolylineBtn).not.toBeNull();
+    expect(measureControl).not.toBeNull();
+  });
 });