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

Author: prushforth

.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