diff --git a/playwright.config.js b/playwright.config.js index f8d7545b7..1e6b25f28 100644 --- 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 index 0e1dea55c..032e790bc 100644 --- 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 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 is clicked / focused / blurred diff --git a/test/e2e/core/featureIndexOverlayFocus.test.js b/test/e2e/core/featureIndexOverlayFocus.test.js index 6b4d8051a..a3455d3c7 100644 --- 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 index b548cae2f..9a00be4da 100644 --- a/test/e2e/core/metaDefault.html +++ b/test/e2e/core/metaDefault.html @@ -31,7 +31,7 @@ + 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" > diff --git a/test/e2e/data/tiles/cbmt/templatedImage.mapml b/test/e2e/data/tiles/cbmt/templatedImage.mapml index 2b410a230..d74f08d17 100644 --- a/test/e2e/data/tiles/cbmt/templatedImage.mapml +++ b/test/e2e/data/tiles/cbmt/templatedImage.mapml @@ -14,7 +14,7 @@ - + diff --git a/test/e2e/layers/multipleExtents.html b/test/e2e/layers/multipleExtents.html index b3d778e0f..fed6f2032 100644 --- a/test/e2e/layers/multipleExtents.html +++ b/test/e2e/layers/multipleExtents.html @@ -49,7 +49,7 @@ + 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" > diff --git a/test/e2e/layers/multipleQueryExtents.test.js b/test/e2e/layers/multipleQueryExtents.test.js index c5c0b58f5..41cce8550 100644 --- 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 index 590d3c338..7b723a072 100644 --- 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 index a25ca47ea..bd4bcb9d4 100644 --- a/test/e2e/layers/step/templatedImageLayerStep.html +++ b/test/e2e/layers/step/templatedImageLayerStep.html @@ -39,7 +39,7 @@ + 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" >