remove _updateFeature as it is not being used anymore + updated _reRender to add events in map-feature.js

AliyanH · prushforth · commit 3697c3063543 · 2023-09-25T16:12:02.000-04:00
Intentionally set focus on map viewer at test begin

Attempt to remove system dependencies in tests

Prettier format

Change tests to use https when accessing WMS services
diff --git a/playwright.config.js b/playwright.config.js
@@ -1,5 +1,5 @@
 const config = {
-    timeout: 30000,
+    timeout: 10000,
     testDir: './test/e2e',
     webServer: {
         command: 'node test/server.js',
diff --git a/src/map-feature.js b/src/map-feature.js
@@ -146,7 +146,6 @@ export class MapFeature extends HTMLElement {
     if (this._groupEl.isConnected) {
       let native = this._getNativeZoomAndCS(this._layer._content);
       let placeholder = document.createElement('span');
-      let mapmlvectors = this._layer._mapmlvectors;
       this._groupEl.insertAdjacentElement('beforebegin', placeholder);
 
       this._featureGroup._map.removeLayer(this._featureGroup);
@@ -155,9 +154,10 @@ export class MapFeature extends HTMLElement {
         .addData(this, native.cs, native.zoom)
         .addTo(this._map);
       placeholder.replaceWith(this._featureGroup.options.group);
-      // TODO: getBounds() should dynamically update the layerBounds
+      // TODO: getBounds() should dynamically update the layerBounds and zoomBounds
       this._layer._setLayerElExtent();
       delete this._getFeatureExtent;
+      this._setUpEvents();
     }
   }
 
@@ -243,34 +243,6 @@ export class MapFeature extends HTMLElement {
     });
   }
 
-  _updateFeature() {
-    let mapmlvectors = this._layer._mapmlvectors;
-    // if the parent layer has not yet rendered on the map
-    if (!mapmlvectors) return;
-    // if the <layer- > is not removed, then regenerate featureGroup and update the mapmlvectors accordingly
-    let native = this._getNativeZoomAndCS(this._layer._content);
-    this._featureGroup = mapmlvectors.addData(this, native.cs, native.zoom);
-    mapmlvectors._layers[this._featureGroup._leaflet_id] = this._featureGroup;
-    this._groupEl = this._featureGroup.options.group;
-    if (mapmlvectors._staticFeature) {
-      let container = this._layer.shadowRoot || this._layer._layerEl;
-      // update zoom bounds of vector layer
-      mapmlvectors.zoomBounds = M.getZoomBounds(
-        this._layer._content,
-        this._getNativeZoomAndCS(this._layer._content).zoom
-      );
-      // update layer bounds of vector layer
-      mapmlvectors.layerBounds = M.getBounds(this._layer._content);
-      // add feature layers to map
-      // mapmlvectors._resetFeatures();
-      this._layer._setLayerElExtent();
-      // update map's zoom limit
-      this._map._addZoomLimit(mapmlvectors);
-      L.extend(mapmlvectors.options, mapmlvectors.zoomBounds);
-    }
-    this._setUpEvents();
-  }
-
   _setUpEvents() {
     ['click', 'focus', 'blur', 'keyup', 'keydown'].forEach((name) => {
       // when <g> is clicked / focused / blurred
diff --git a/test/e2e/core/featureIndexOverlayFocus.test.js b/test/e2e/core/featureIndexOverlayFocus.test.js
@@ -80,6 +80,7 @@ test.describe('Feature Index Overlay Focus tests', () => {
     ).toBe(false);
   });
   test('Feature index overlay and reticle show on history-based navigation', async () => {
+    await page.locator('#map1').focus();
     await page.keyboard.press('ArrowRight');
     await page.keyboard.press('ArrowUp');
     await page.keyboard.press('ArrowRight');
@@ -88,11 +89,10 @@ test.describe('Feature Index Overlay Focus tests', () => {
     await page.locator('#map1').getByText('Back').click();
     await page.keyboard.press('Shift+F10');
     await page.locator('#map1').getByText('Back').click();
-    const afterHistoryNavReticle = page.locator(
+    const afterHistoryNavReticle = await page.locator(
       '#map1 .mapml-feature-index-box'
     );
     expect(await afterHistoryNavReticle.isHidden()).toBe(false);
-
     const afterHistoryNavOutput = page.locator(
       '#map1 output.mapml-feature-index'
     );
@@ -101,7 +101,7 @@ test.describe('Feature Index Overlay Focus tests', () => {
         o.classList.contains('mapml-screen-reader-output')
       )
     ).toBe(false);
-    await page.locator('#map1').getByTitle('Reload').click();
+    //await page.locator('#map1').getByTitle('Reload').click();
   });
   test('Feature index overlay and reticle show on geolocation activation, deactivation', async () => {
     await page
diff --git a/test/e2e/core/metaDefault.html b/test/e2e/core/metaDefault.html
@@ -31,7 +31,7 @@
         <map-input name="xmax" type="location" units="pcrs" position="top-right" axis="easting" ></map-input>
         <map-input name="ymax" type="location" units="pcrs" position="top-left" axis="northing" ></map-input>
         <map-link rel="image"
-          tref="http://maps.geogratis.gc.ca/wms/toporama_en?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/jpeg&TRANSPARENT=FALSE&STYLES=&VERSION=1.3.0&LAYERS=WMS-Toporama&WIDTH={w}&HEIGHT={h}&CRS=EPSG:3978&BBOX={xmin},{ymin},{xmax},{ymax}&m4h=t" ></map-link>
+          tref="https://maps.geogratis.gc.ca/wms/toporama_en?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/jpeg&TRANSPARENT=FALSE&STYLES=&VERSION=1.3.0&LAYERS=WMS-Toporama&WIDTH={w}&HEIGHT={h}&CRS=EPSG:3978&BBOX={xmin},{ymin},{xmax},{ymax}&m4h=t" ></map-link>
       </map-extent>
     </layer->
     <layer- id="defaultMeta" label="Default meta" checked>
diff --git a/test/e2e/data/tiles/cbmt/templatedImage.mapml b/test/e2e/data/tiles/cbmt/templatedImage.mapml
@@ -14,7 +14,7 @@
       <map-input name="ymin" type="location" units="pcrs" position="bottom-left" axis="northing" min="28448056.0" max="42672085.0"></map-input>
       <map-input name="xmax" type="location" units="pcrs" position="top-right" axis="easting" min="28448056.0" max="38608077.0"></map-input>
       <map-input name="ymax" type="location" units="pcrs" position="top-left" axis="northing" min="28448056.0" max="42672085.0"></map-input>
-      <map-link rel="image" tref="http://maps.geogratis.gc.ca/wms/toporama_en?SERVICE=WMS&amp;REQUEST=GetMap&amp;FORMAT=image/jpeg&amp;TRANSPARENT=FALSE&amp;STYLES=&amp;VERSION=1.3.0&amp;LAYERS=WMS-Toporama&amp;WIDTH={w}&amp;HEIGHT={h}&amp;CRS=EPSG:3978&amp;BBOX={xmin},{ymin},{xmax},{ymax}&amp;m4h=t"></map-link>
+      <map-link rel="image" tref="https://maps.geogratis.gc.ca/wms/toporama_en?SERVICE=WMS&amp;REQUEST=GetMap&amp;FORMAT=image/jpeg&amp;TRANSPARENT=FALSE&amp;STYLES=&amp;VERSION=1.3.0&amp;LAYERS=WMS-Toporama&amp;WIDTH={w}&amp;HEIGHT={h}&amp;CRS=EPSG:3978&amp;BBOX={xmin},{ymin},{xmax},{ymax}&amp;m4h=t"></map-link>
     </map-extent>
   </map-body>
 </mapml->
diff --git a/test/e2e/layers/multipleExtents.html b/test/e2e/layers/multipleExtents.html
@@ -49,7 +49,7 @@
         <map-input name="xmax" type="location" units="pcrs" position="top-right" axis="easting" ></map-input>
         <map-input name="ymax" type="location" units="pcrs" position="top-left" axis="northing" ></map-input>
         <map-link rel="image"
-          tref="http://maps.geogratis.gc.ca/wms/toporama_en?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/jpeg&TRANSPARENT=FALSE&STYLES=&VERSION=1.3.0&LAYERS=WMS-Toporama&WIDTH={w}&HEIGHT={h}&CRS=EPSG:3978&BBOX={xmin},{ymin},{xmax},{ymax}&m4h=t" ></map-link>
+          tref="https://maps.geogratis.gc.ca/wms/toporama_en?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/jpeg&TRANSPARENT=FALSE&STYLES=&VERSION=1.3.0&LAYERS=WMS-Toporama&WIDTH={w}&HEIGHT={h}&CRS=EPSG:3978&BBOX={xmin},{ymin},{xmax},{ymax}&m4h=t" ></map-link>
       </map-extent>
     </layer->
   </mapml-viewer>
diff --git a/test/e2e/layers/multipleQueryExtents.test.js b/test/e2e/layers/multipleQueryExtents.test.js
@@ -22,6 +22,7 @@ test.describe('Multiple Extent Query Tests', () => {
     await page.evaluateHandle(() =>
       document.querySelector('mapml-viewer').zoomTo(85, 147, 0)
     );
+    await page.waitForTimeout(1000);
     await page.click('mapml-viewer');
     await page.waitForSelector('.leaflet-popup-content-wrapper p');
     let numFeatures = await page.$eval(
@@ -103,6 +104,7 @@ test.describe('Multiple Extent Query Tests', () => {
     await page.evaluateHandle(() =>
       document.querySelector('mapml-viewer').zoomTo(10, 5, 0)
     );
+    await page.waitForTimeout(1000);
     await page.locator('mapml-viewer').click({ position: { x: 250, y: 250 } });
     await page
       .locator(
@@ -118,6 +120,12 @@ test.describe('Multiple Extent Query Tests', () => {
 
   test('Only features from one extent are returned for queries inside its (non overlapping) bounds', async () => {
     await page.getByRole('button', { name: 'Close popup' }).click();
+    const viewer = await page.locator('mapml-viewer');
+    await viewer.evaluate((viewer) => {
+      viewer.reload();
+    });
+    // panning / zooming takes time...
+    await page.waitForTimeout(1000);
     await page.locator('mapml-viewer').click({ position: { x: 450, y: 150 } });
     await page.getByTitle('Next Feature').click();
     await page.getByTitle('Next Feature').click();
@@ -145,6 +153,8 @@ test.describe('Multiple Extent Query Tests', () => {
     await page.evaluateHandle(() =>
       document.querySelector('mapml-viewer').zoomTo(-18, 5, 0)
     );
+    // panning / zooming takes time...
+    await page.waitForTimeout(300);
     await page.locator('mapml-viewer').click({ position: { x: 400, y: 250 } });
     const popupNumRight = await page.$eval(
       'div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane',
@@ -154,6 +164,7 @@ test.describe('Multiple Extent Query Tests', () => {
     await page.evaluateHandle(() =>
       document.querySelector('mapml-viewer').zoomTo(-16, -40, 0)
     );
+    await page.waitForTimeout(300);
     await page.locator('mapml-viewer').click({ position: { x: 250, y: 400 } });
     const popupNumBottom = await page.$eval(
       'div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane',
@@ -163,6 +174,7 @@ test.describe('Multiple Extent Query Tests', () => {
     await page.evaluateHandle(() =>
       document.querySelector('mapml-viewer').zoomTo(33, -170, 0)
     );
+    await page.waitForTimeout(300);
     await page.locator('mapml-viewer').click({ position: { x: 50, y: 250 } });
     const popupNumLeft = await page.$eval(
       'div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane',
@@ -172,6 +184,7 @@ test.describe('Multiple Extent Query Tests', () => {
     await page.evaluateHandle(() =>
       document.querySelector('mapml-viewer').zoomTo(30, 98, 0)
     );
+    await page.waitForTimeout(300);
     await page.locator('mapml-viewer').click({ position: { x: 250, y: 50 } });
     const popupNumTop = await page.$eval(
       'div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane',
diff --git a/test/e2e/layers/step/imageStep.test.js b/test/e2e/layers/step/imageStep.test.js
@@ -9,7 +9,7 @@ test.describe('Templated image layer with step', () => {
     1,
     0,
     0,
-    'http://maps.geogratis.gc.ca/wms/toporama_en?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/jpeg&TRANSPARENT=FALSE&STYLES=&VERSION=1.3.0&LAYERS=WMS-Toporama&WIDTH=300&HEIGHT=150&CRS=EPSG:3978&BBOX=',
+    'https://maps.geogratis.gc.ca/wms/toporama_en?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/jpeg&TRANSPARENT=FALSE&STYLES=&VERSION=1.3.0&LAYERS=WMS-Toporama&WIDTH=300&HEIGHT=150&CRS=EPSG:3978&BBOX=',
     '-5537023.0124460235,-2392385.4881043136,5972375.006350018,3362313.521293707&m4h=t',
     '',
     '-968982.6263652518,-107703.83540767431,1412272.136144273,1082923.545847088&m4h=t',
diff --git a/test/e2e/layers/step/templatedImageLayerStep.html b/test/e2e/layers/step/templatedImageLayerStep.html
@@ -39,7 +39,7 @@
       <map-input name="ymax" type="location" units="pcrs" position="top-left" axis="northing" min="-3362085.3441706896"
                  max="3952277.216154434" ></map-input>
       <map-link rel="image"
-                tref="http://maps.geogratis.gc.ca/wms/toporama_en?SERVICE=WMS&amp;REQUEST=GetMap&amp;FORMAT=image/jpeg&amp;TRANSPARENT=FALSE&amp;STYLES=&amp;VERSION=1.3.0&amp;LAYERS=WMS-Toporama&amp;WIDTH={w}&amp;HEIGHT={h}&amp;CRS=EPSG:3978&amp;BBOX={xmin},{ymin},{xmax},{ymax}&amp;m4h=t" ></map-link>
+                tref="https://maps.geogratis.gc.ca/wms/toporama_en?SERVICE=WMS&amp;REQUEST=GetMap&amp;FORMAT=image/jpeg&amp;TRANSPARENT=FALSE&amp;STYLES=&amp;VERSION=1.3.0&amp;LAYERS=WMS-Toporama&amp;WIDTH={w}&amp;HEIGHT={h}&amp;CRS=EPSG:3978&amp;BBOX={xmin},{ymin},{xmax},{ymax}&amp;m4h=t" ></map-link>
     </map-extent>
   </layer->
 </mapml-viewer>
