Fix excess execution of fetch (#938)

* Fix excess execution of fetch on invalid url derived from tile
coordinates that are out of bounds

Fix malformed layer- element in index.html

Add test TemplatedMapMLTileLayer.test.js.
Closes #936

* Separate popupTabNavigation.test.js and layerContextMenuKeyboard.test.js
from the rest of the tests, to see if they will deflake this way

.github/workflows/ci-testing.yml

@@ -18,7 +18,8 @@ jobs:
     - run: npx playwright install  --with-deps
     - run: npm install -g grunt-cli
     - run: grunt default
-    - run: xvfb-run --auto-servernum -- npx playwright test layerContextMenuKeyboard popup --workers=1 --retries=3
+    - run: xvfb-run --auto-servernum -- npx playwright test --grep-invert="popupTabNavigation\.test\.js|layerContextMenuKeyboard\.test\.js"  --workers=1 --retries=3
+    - run: xvfb-run --auto-servernum -- npx playwright test --grep="popupTabNavigation\.test\.js|layerContextMenuKeyboard\.test\.js" --workers=1 --retries=3
 #    - run: xvfb-run --auto-servernum -- npm run jest
       env:
         CI: true

index.html

@@ -83,7 +83,6 @@
           <map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
         </map-extent>
       </layer->
-      </layer->
     </mapml-viewer>
   </body>
 </html>

src/mapml/layers/TemplatedTileLayer.js

@@ -138,31 +138,34 @@ export var TemplatedTileLayer = L.TileLayer.extend({
     return this.options.pane;
   },
   _fetchTile: function (coords, tile) {
-    fetch(this.getTileUrl(coords), { redirect: 'follow' })
-      .then(function (response) {
-        if (response.status >= 200 && response.status < 300) {
-          return Promise.resolve(response);
-        } else {
-          console.log(
-            'Looks like there was a problem. Status Code: ' + response.status
-          );
-          return Promise.reject(response);
-        }
-      })
-      .then(function (response) {
-        return response.text();
-      })
-      .then((text) => {
-        var parser = new DOMParser();
-        return parser.parseFromString(text, 'application/xml');
-      })
-      .then((mapml) => {
-        this._createFeatures(mapml, coords, tile);
-        this._mapmlTileReady(tile);
-      })
-      .catch((err) => {
-        console.log('Error Creating Tile');
-      });
+    let url = this.getTileUrl(coords);
+    if (url) {
+      fetch(url, { redirect: 'follow' })
+        .then(function (response) {
+          if (response.status >= 200 && response.status < 300) {
+            return Promise.resolve(response);
+          } else {
+            console.log(
+              'Looks like there was a problem. Status Code: ' + response.status
+            );
+            return Promise.reject(response);
+          }
+        })
+        .then(function (response) {
+          return response.text();
+        })
+        .then((text) => {
+          var parser = new DOMParser();
+          return parser.parseFromString(text, 'application/xml');
+        })
+        .then((mapml) => {
+          this._createFeatures(mapml, coords, tile);
+          this._mapmlTileReady(tile);
+        })
+        .catch((err) => {
+          console.log('Error Creating Tile');
+        });
+    }
   },
 
   // TO DO: get rid of this function altogether; see TO DO below re: map-link

test/e2e/data/tiles/osmtile/2/2/0.mapml

@@ -0,0 +1,37 @@
+<mapml- xmlns="http://www.w3.org/1999/xhtml">
+    <map-head>
+        <map-title>ne_10m_admin_0_countries</map-title>
+        <map-meta charset="utf-8"/>
+        <map-meta content="text/mapml" http-equiv="Content-Type"/>
+      <map-meta name="projection" content="OSMTILE"></map-meta>
+      <map-meta name="cs" content="pcrs"></map-meta>
+    </map-head>
+    <map-body>
+        <map-feature id="fclass.5" class="fclass">
+            <map-geometry>
+                <map-polygon>
+                    <map-coordinates>
+                        -10107579.41972 -100601.44026 -10134945.54615 -40667.25671 -10158336.70449 0 
+                        <map-span class="noline">-10158573.51798 400.7613 -10196629.74432 400.7613</map-span>
+                         -10197321.96838 0 -10174848.11037 -24614.28654 -10142436.83215 -63600.54332 -10190289.33254 -99684.02686 -10107579.41972 -100601.44026
+                    </map-coordinates>
+                </map-polygon>
+            </map-geometry>
+        </map-feature>
+        <map-feature id="fclass.6" class="fclass">
+            <map-geometry>
+                <map-multipolygon>
+                    <map-polygon>
+                        <map-coordinates>-20037508.34279 -1916626.22114 -20010142.21637 -1880532.43377 -20037508.34279 -1896016.78349 -20037508.34279 -1916626.22114</map-coordinates>
+                    </map-polygon>
+                    <map-polygon>
+                        <map-coordinates>-20037508.34279 -1867450.97229 -20028946.87307 -1863623.69866 -20032463.19099 -1856449.31803 -20037508.34279 -1861550.86463 -20037508.34279 -1867450.97229</map-coordinates>
+                    </map-polygon>
+                    <map-polygon>
+                        <map-coordinates>-20037508.34279 -1824431.49843 -20032616.07438 -1822521.40936 -20031087.2405 -1818701.70843 -20037508.34279 -1822043.91196 -20037508.34279 -1824431.49843</map-coordinates>
+                    </map-polygon>
+                </map-multipolygon>
+            </map-geometry>
+        </map-feature>
+    </map-body>
+</mapml->