Get tests running on firefox

jest-playwright.config.js

@@ -11,5 +11,5 @@ module.exports = {
     connectOptions: {
         slowMo: 250,
     },
-    browsers: ["chromium"],
+    browsers: ["chromium","firefox"],
 }

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-//  testTimeout: 300000, // 5 min for debugging
+  // testTimeout: 300000, // 5 min for debugging
   projects: [
     {
       displayName: "UNIT Testing",

package.json

@@ -52,7 +52,7 @@
     "jest-playwright-preset": "^1.7.0",
     "leaflet": "^1.7.1",
     "path": "^0.12.7",
-    "playwright": "^1.16.3",
+    "playwright": "^1.17.0",
     "proj4": "^2.6.2",
     "proj4leaflet": "^1.0.2",
     "rollup": "^2.23.1"

src/mapml/handlers/ContextMenu.js

@@ -103,7 +103,6 @@ export var ContextMenu = L.Handler.extend({
       },
     ];
     this._mapMenuVisible = false;
-    this._keyboardEvent = false;
 
     this._container = L.DomUtil.create("div", "mapml-contextmenu", map._container);
 
@@ -418,13 +417,14 @@ export var ContextMenu = L.Handler.extend({
       if(!elem.layer.validProjection) return;
       this._layerClicked = elem;
       this._showAtPoint(e.containerPoint, e, this._layerMenu);
+      this._layerMenu.firstChild.focus();
     } else if(elem.classList.contains("leaflet-container") || elem.classList.contains("mapml-debug-extent") ||
       elem.tagName === "path") {
       this._layerClicked = undefined;
       this._showAtPoint(e.containerPoint, e, this._container);
+      this._container.firstChild.focus();
     }
     if(e.originalEvent.button === 0 || e.originalEvent.button === -1){
-      this._keyboardEvent = true;
       if(this._layerClicked){
         let activeEl = document.activeElement;
         this._elementInFocus = activeEl.shadowRoot.activeElement;
@@ -439,8 +439,6 @@ export var ContextMenu = L.Handler.extend({
 
   _showAtPoint: function (pt, data, container) {
       if (this._items.length) {
-          let event = L.extend(data || {}, {contextmenu: this});
-
           this._showLocation = {
               containerPoint: pt
           };
@@ -455,8 +453,6 @@ export var ContextMenu = L.Handler.extend({
             container.style.display = 'block';
               this._mapMenuVisible = true;
           }
-
-          this._map.fire('contextmenu.show', event);
       }
   },
 
@@ -625,7 +621,7 @@ export var ContextMenu = L.Handler.extend({
       menu.style.top = 100 + 'px';
       menu.style.bottom = 'auto';
     }
-    if(this._keyboardEvent)menu.firstChild.focus();
+    menu.firstChild.focus();
   },
 
   _hideCoordMenu: function(e){

test/e2e/core/axisInferring.test.js

@@ -37,11 +37,18 @@ describe("UI Drag&Drop Test", () => {
   });
 
   test("GCRS inferring", async () => {
+    const EPSILON = 0.0000001;
+    const expectedTopLeftLongitude = -92.0;
+    const expectedTopLeftLatitude = 52.999999999993484;
+    const expectedBottomRightLongitude = -62.0;
+    const expectedBottomRightLatitude = 33.99999999999964;
     const layerExtent = await page.$eval(
       "body > map > layer-:nth-child(4)",
       (layer) => layer.extent
     );
-    await expect(layerExtent.topLeft.gcrs).toEqual({ horizontal: -92, vertical: 52.999999999993484 });
-    await expect(layerExtent.bottomRight.gcrs).toEqual({ horizontal: -62, vertical: 33.99999999999964 });
+    await expect(Math.abs(layerExtent.topLeft.gcrs.horizontal - expectedTopLeftLongitude) < EPSILON);
+    await expect(Math.abs(layerExtent.topLeft.gcrs.vertical - expectedTopLeftLatitude) < EPSILON);
+    await expect(Math.abs(layerExtent.bottomRight.gcrs.horizontal - expectedBottomRightLongitude) < EPSILON);
+    await expect(Math.abs(layerExtent.bottomRight.gcrs.vertical - expectedBottomRightLatitude) < EPSILON);
   });
 });

test/e2e/core/featureLinks.html

@@ -41,25 +41,25 @@
         }
     </map-style>
     <map-link id="forth" rel="stylesheet" type="text/css" href="forth.css"></map-link>
-    <map-feature zoom="2" class="refDiff">
+    <map-feature id="tabstop-one" zoom="2" class="refDiff">
       <map-featurecaption>Accessible Square</map-featurecaption>
       <map-properties>
         <h1>Test</h1>
         <a href="www.example.com">test</a>
       </map-properties>
       <map-geometry cs="tilematrix">
         <map-polygon>
-          <map-coordinates>11 11 12 11 12 12 11 12 <map-a href="cbmtgeom.mapml" target="_blank">11 11</map-a></map-coordinates>
+          <map-coordinates>11 11 12 11 12 12 11 12 <map-a id="tabstop-two" href="cbmtgeom.mapml" target="_blank">11 11</map-a></map-coordinates>
         </map-polygon>
       </map-geometry>
     </map-feature>
 
-    <map-feature zoom="2" class="refDiff">
+    <map-feature  zoom="2" class="refDiff">
       <map-properties>
         <h1>Test</h1>
       </map-properties>
       <map-geometry cs="pcrs">
-        <map-a href="cbmtgeom.mapml" target="_blank">
+        <map-a id="tabstop-three" href="cbmtgeom.mapml" target="_blank">
           <map-polygon>
             <map-coordinates>257421 -3567196 -271745 1221771 -3896544 242811 -3183549 -2613313</map-coordinates>
           </map-polygon>
@@ -73,7 +73,7 @@ <h1>Test</h1>
         <h1>Test</h1>
       </map-properties>
       <map-geometry cs="tcrs">
-        <map-a href="cbmtgeom.mapml" target="_blank">
+        <map-a  id="tabstop-four" href="cbmtgeom.mapml" target="_blank">
           <map-geometrycollection>
             <map-polygon>
               <map-coordinates>2771 3106 2946 3113 2954 3210 2815 3192</map-coordinates>
@@ -92,12 +92,12 @@ <h1>Test</h1>
         <h1>Test</h1>
       </map-properties>
       <map-geometry cs="tilematrix">
-        <map-a href="http://geogratis.gc.ca/mapml/en/cbmtile/cbmtgeom/" target="_self" type="text/html">
+        <map-a id="tabstop-five" href="http://geogratis.gc.ca/mapml/en/cbmtile/cbmtgeom/" target="_self" type="text/html">
           <map-geometrycollection>
             <map-polygon>
               <map-coordinates>9 10 10 10 10 11 9 11 9 10</map-coordinates>
             </map-polygon>
-            <map-a href="http://geogratis.gc.ca/mapml/en/cbmtile/fdi/" target="_top" type="text/html">
+            <map-a id="tabstop-six" href="http://geogratis.gc.ca/mapml/en/cbmtile/fdi/" target="_top" type="text/html">
               <map-point>
                 <map-coordinates>10.5 11</map-coordinates>
               </map-point>
@@ -111,12 +111,12 @@ <h1>Test</h1>
         <h1>Test</h1>
       </map-properties>
       <map-geometry cs="tilematrix">
-        <map-a href="http://geogratis.gc.ca/mapml/en/cbmtile/cbmtgeom/" target="_parent" type="text/html">
+        <map-a id="tabstop-seven" href="http://geogratis.gc.ca/mapml/en/cbmtile/cbmtgeom/" target="_parent" type="text/html">
           <map-geometrycollection>
             <map-polygon>
               <map-coordinates>9 10 10 10 10 11 9 11 9 10</map-coordinates>
             </map-polygon>
-            <map-a href="http://geogratis.gc.ca/mapml/en/cbmtile/fdi/" target="_blank" type="text/html">
+            <map-a id="tabstop-eight" href="http://geogratis.gc.ca/mapml/en/cbmtile/fdi/" target="_blank" type="text/html">
               <map-point>
                 <map-coordinates>10.5 11</map-coordinates>
               </map-point>
@@ -130,7 +130,7 @@ <h1>Test</h1>
         <h1>Test</h1>
       </map-properties>
       <map-geometry cs="tilematrix">
-        <map-a href="data/vector-tile-test.mapml#2,-98,37" target="_blank">
+        <map-a id="tabstop-nine" href="data/vector-tile-test.mapml#2,-98,37" target="_blank">
           <map-polygon>
             <map-coordinates>10.5 11 10.75 11 10.75 11.25 10.5 11.25 10.5 11</map-coordinates>
           </map-polygon>

test/e2e/core/featureLinks.test.js

@@ -14,77 +14,56 @@ describe("Playwright Feature Links Tests", () => {
           await page.waitForTimeout(200);
         }
         await page.keyboard.press("Enter");
-        await page.waitForTimeout(1000);
-        const layers = await page.$eval(
-          "body > map",
-          (map) => map.childElementCount
-        );
-        await expect(layers).toEqual(4);
+        const layers = await page.evaluate(`document.querySelectorAll('layer-').length`);
+        await expect(layers).toEqual(2);
       });
 
       test("Sub-point inplace link adds new layer, parent feature has separate link", async () => {
-        await page.hover(".leaflet-top.leaflet-right");
-        await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > div:nth-child(1) > div > button:nth-child(1)");
-        await page.waitForTimeout(850);
+        await page.goto(PATH + "featureLinks.html");
+        const initialLayerCount = await page.evaluate(`document.querySelectorAll('layer-').length`);
+        await expect(initialLayerCount).toEqual(1);
         await page.click("body > map");
         for(let i = 0; i < 6; i++) {
-          await page.keyboard.press("Tab");
+          await page.keyboard.press("Tab"); 
           await page.waitForTimeout(200);
         }
         const extentBeforeLink = await page.$eval(
           "body > map",
           (map) => map.extent
         );
+        // activate link from id="tabstop-six", is supposed to be added to top of map
         await page.keyboard.press("Enter");
-        const layers = await page.$eval(
-          "body > map",
-          (map) => map.childElementCount
-        );
-        await page.waitForTimeout(1000);
-        const layerName = await page.$eval(
-          "//html/body/map/layer-[2]",
-          (layer) => layer.label
-        )
+        const layerName = await page.evaluate(`document.querySelectorAll('layer-')[1].label`);
+        const layers = await page.evaluate(`document.querySelectorAll('layer-').length`);
+        await expect(layers).toEqual(2);
+        await expect(layerName).toEqual("Fire Danger (forecast)");
         const extentAfterLink = await page.$eval(
           "body > map",
           (map) => map.extent
         );
-
         await expect(extentAfterLink.topLeft.gcrs).toEqual(extentBeforeLink.topLeft.gcrs);
         await expect(extentAfterLink.bottomRight.gcrs).toEqual(extentBeforeLink.bottomRight.gcrs);
-        await expect(layers).toEqual(4);
-        await expect(layerName).toEqual("Fire Danger (forecast)");
       });
     });
     describe("Main Part Link Tests", () => {
       test("Main part adds new layer", async () => {
-        await page.hover(".leaflet-top.leaflet-right");
-        await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > div:nth-child(1) > div > button:nth-child(1)");
-        await page.waitForTimeout(850);
+        await page.goto(PATH + "featureLinks.html");
         await page.click("body > map");
         for(let i = 0; i < 5; i++) {
           await page.keyboard.press("Tab");
           await page.waitForTimeout(200);
         }
         await page.keyboard.press("Enter");
-        const layers = await page.$eval(
-          "body > map",
-          (map) => map.childElementCount
-        );
-        await page.waitForTimeout(1000);
-        const layerName = await page.$eval(
-          "//html/body/map/layer-[2]",
-          (layer) => layer.label
-        )
+        const layers = await page.evaluate(`document.querySelectorAll('layer-').length`);
+        await expect(layers).toEqual(2);
+        const layerName = await page.evaluate(`document.querySelectorAll('layer-')[1].label`);
+        await expect(layerName).toEqual("Canada Base Map - Geometry");
         const extent = await page.$eval(
           "body > map",
           (map) => map.extent
         );
-
         await expect(extent.topLeft.gcrs).toEqual({horizontal:-129.071567338887, vertical:36.4112695268206});
         await expect(extent.bottomRight.gcrs).toEqual({horizontal:26.18468754289824, vertical:2.850936151427951});
-        await expect(layers).toEqual(4);
-        await expect(layerName).toEqual("Canada Base Map - Geometry");
       });
     });
   });