remove _updateFeature as it is not being used anymore + updated _reRe…

…nder to add events in map-feature.js 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 Revert timeout for playwright to 30s
Maps4HTML · Sep 25, 2023 · f8f9109 · f8f9109
1 parent 1b452fa
commit f8f9109
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 39 deletions.
diff --git a/playwright.config.js b/playwright.config.js
@@ -1,5 +1,5 @@
 const config = {
-    timeout: 30000,
+    timeout: 15000,
     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>