Map map-tile attributes row,col,zoom immutable; add tests for that

Author: Peter Rushforth

src/map-tile.js

@@ -12,61 +12,38 @@ export class HTMLTileElement extends HTMLElement {
   }
   /* jshint ignore:start */
   #hasConnected;
+  #initialRow;
+  #initialCol;
+  #initialZoom;
   /* jshint ignore:end */
   get row() {
-    return +(this.hasAttribute('row') ? this.getAttribute('row') : 0);
+    /* jshint ignore:start */
+    return +this.#initialRow;
+    /* jshint ignore:end */
   }
   set row(val) {
-    if (this.#hasConnected) {
-      return;
-    }
     var parsedVal = parseInt(val, 10);
     if (!isNaN(parsedVal)) {
       this.setAttribute('row', parsedVal);
     }
   }
   get col() {
-    return +(this.hasAttribute('col') ? this.getAttribute('col') : 0);
+    /* jshint ignore:start */
+    return +this.#initialCol;
+    /* jshint ignore:end */
   }
   set col(val) {
-    if (this.#hasConnected) {
-      return;
-    }
     var parsedVal = parseInt(val, 10);
     if (!isNaN(parsedVal)) {
       this.setAttribute('col', parsedVal);
     }
   }
   get zoom() {
-    // for templated or queried features ** native zoom is only used for zoomTo() **
-    let meta = {},
-      metaEl = this.getMeta('zoom');
-    if (metaEl)
-      meta = Util._metaContentToObject(metaEl.getAttribute('content'));
-    if (this._parentElement.nodeName === 'MAP-LINK') {
-      // nativeZoom = zoom attribute || (sd.map-meta zoom 'value'  || 'max') || this._initialZoom
-      return +(this.hasAttribute('zoom')
-        ? this.getAttribute('zoom')
-        : meta.value
-        ? meta.value
-        : meta.max
-        ? meta.max
-        : this._initialZoom);
-    } else {
-      // for "static" features
-      // nativeZoom zoom attribute || this._initialZoom
-      // NOTE we don't use map-meta here, because the map-meta is the minimum
-      // zoom bounds for the layer, and is extended by additional features
-      // if added / removed during layer lifetime
-      return +(this.hasAttribute('zoom')
-        ? this.getAttribute('zoom')
-        : this._initialZoom);
-    }
+    /* jshint ignore:start */
+    return this.#initialZoom;
+    /* jshint ignore:end */
   }
   set zoom(val) {
-    if (this.#hasConnected) {
-      return;
-    }
     var parsedVal = parseInt(val, 10);
     if (!isNaN(parsedVal) && parsedVal >= 0 && parsedVal <= 25) {
       this.setAttribute('zoom', parsedVal);
@@ -93,18 +70,47 @@ export class HTMLTileElement extends HTMLElement {
     // Always call super first in constructor
     super();
   }
+  getAttribute(name) {
+    if (this.#hasConnected /* jshint ignore:line */) {
+      switch (name) {
+        case 'row':
+          return String(this.#initialRow); /* jshint ignore:line */
+          break;
+        case 'col':
+          return String(this.#initialCol); /* jshint ignore:line */
+          break;
+        case 'zoom':
+          return String(this.#initialZoom); /* jshint ignore:line */
+          break;
+      }
+    }
+    return super.getAttribute(name);
+  }
+  setAttribute(name, value) {
+    if (this.#hasConnected /* jshint ignore:line */) {
+      switch (name) {
+        case 'row':
+        case 'col':
+        case 'zoom':
+          return;
+      }
+    }
+    super.setAttribute(name, value);
+  }
   async connectedCallback() {
     // initialization is done in connectedCallback, attribute initialization
     // calls (which happen first) are effectively ignored, so we should be able
     // to rely on them being all correctly set by this time e.g. zoom, row, col
     // all now have a value that together identify this tiled bit of space
+    // row,col,zoom can't / shouldn't change
     /* jshint ignore:start */
+    this.#initialZoom = this.hasAttribute('zoom')
+      ? +this.getAttribute('zoom')
+      : this.getMapEl().zoom;
+    this.#initialRow = this.hasAttribute('row') ? +this.getAttribute('row') : 0;
+    this.#initialCol = this.hasAttribute('col') ? +this.getAttribute('col') : 0;
     this.#hasConnected = true;
     /* jshint ignore:end */
-    // set the initial zoom of the map when features connected
-    // used for fallback zoom getter for static features
-    // ~copied from map-feature.js
-    this._initialZoom = this.getMapEl().zoom;
     // Get parent element to determine how to handle the tile
     // Need to handle shadow DOM correctly like map-feature does
     this._parentElement =
@@ -182,11 +188,6 @@ export class HTMLTileElement extends HTMLElement {
         case 'row':
         case 'col':
         case 'zoom':
-          // Prevent changes to row, col, and zoom after initialization
-          if (oldValue !== newValue) {
-            this.setAttribute(name, oldValue);
-            return;
-          }
           break;
         case 'src':
           if (oldValue !== newValue) {

test/e2e/api/matchMedia/map-bounding-box.test.js

@@ -8,7 +8,6 @@ test.describe('matchMedia map-bounding-box tests', () => {
     page =
       context.pages().find((page) => page.url() === 'about:blank') ||
       (await context.newPage());
-    page = await context.newPage();
     await page.goto('map-bounding-box.html');
   });
 
@@ -35,14 +34,15 @@ test.describe('matchMedia map-bounding-box tests', () => {
 
     // the layer should be shown as we zoom out again
     await zoomOut.click();
-    await page.waitForTimeout(250);
+    await page.waitForTimeout(500);
     await expect(layer).not.toHaveAttribute('hidden');
 
     // move the map so that the layer is out of the map's extent
     await page.evaluate(() => {
       const map = document.querySelector('mapml-viewer');
       map.zoomTo(0, 0, 13);
     });
+    await page.waitForTimeout(500);
     await expect(layer).toHaveAttribute('hidden');
 
     // move the map back so that the layer is within of the map's extent

test/e2e/elements/map-tile/map-tile-dynamic-updates.test.js-snapshots/after-col-change-linux.png

@@ -49,7 +49,7 @@ test.describe('Map Tile Immutable Attributes Tests', () => {
     });
 
     expect(afterSetAttribute.row).toBe('1'); // Should remain unchanged
-    expect(afterSetAttribute.col).toBe('1'); // Should remain unchanged  
+    expect(afterSetAttribute.col).toBe('1'); // Should remain unchanged
     expect(afterSetAttribute.zoom).toBe('2'); // Should remain unchanged
 
     // Try to change via property setters - should also fail
@@ -84,7 +84,8 @@ test.describe('Map Tile Immutable Attributes Tests', () => {
     });
 
     // Change src attribute
-    const newSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mNkYPhfDwAChAGA6ej9MgAAAABJRU5ErkJggg==';
+    const newSrc =
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mNkYPhfDwAChAGA6ej9MgAAAABJRU5ErkJggg==';
     await page.evaluate((src) => {
       const tile = document.getElementById('test-tile');
       tile.setAttribute('src', src);
@@ -102,4 +103,4 @@ test.describe('Map Tile Immutable Attributes Tests', () => {
   test.afterAll(async () => {
     await context.close();
   });
-});
+});