Skip to content

Commit

Permalink
WIP on tests, label, timing
Browse files Browse the repository at this point in the history
  • Loading branch information
@prushforth
prushforth committed Jul 25, 2023
1 parent efb396e commit de2d217
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 87 deletions.
48 changes: 15 additions & 33 deletions src/layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,13 @@ export class MapLayer extends HTMLElement {
}
}
get label() {
return this.hasAttribute('label') ? this.getAttribute('label') : '';
if (this._layer) return this._layer.getName();
else return this.hasAttribute('label') ? this.getAttribute('label') : '';
}
set label(val) {
if (val) {
this.setAttribute('label', val);
if (this._layer && !this._layer.titleIsReadOnly())
this.setAttribute('label', val);
}
}
get checked() {
Expand Down Expand Up @@ -100,9 +102,12 @@ export class MapLayer extends HTMLElement {
// need to detect / handle layer.error here
resolve();
});
// this._layer.on('extentload', this._onLayerExtentLoad, this);
this._setUpEvents();
// add other event listeners possibly
this._ready(); // rename _ready
}).then(() => {
this._onLayerExtentLoad();
// refactor _attachedToMap
this._attachedToMap();
if (this._layerControl && !this.hidden) {
Expand Down Expand Up @@ -351,8 +356,6 @@ export class MapLayer extends HTMLElement {
opacity: opacity_value
}
);
this._layer.on('extentload', this._onLayerExtentLoad, this);
this._setUpEvents();
}
_attachedToMap() {
// set i to the position of this layer element in the set of layers
Expand Down Expand Up @@ -412,35 +415,14 @@ export class MapLayer extends HTMLElement {
}
}
_setUpEvents() {
this._layer.on(
'loadstart',
function () {
this.dispatchEvent(
new CustomEvent('loadstart', { detail: { target: this } })
);
},
this
);
this._layer.on(
'changestyle',
function (e) {
this.src = e.src;
this.dispatchEvent(
new CustomEvent('changestyle', { detail: { target: this } })
);
},
this
);
this._layer.on(
'changeprojection',
function (e) {
this.src = e.href;
this.dispatchEvent(
new CustomEvent('changeprojection', { detail: { target: this } })
);
},
this
);
this.addEventListener('changestyle', function (e) {
e.stopPropagation();
this.src = e.detail.src;
});
this.addEventListener('changeprojection', function (e) {
e.stopPropagation();
this.src = e.detail.href;
});
}
zoomTo() {
if (!this.extent) return;
Expand Down
32 changes: 19 additions & 13 deletions src/mapml/layers/MapMLLayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,11 +134,14 @@ export var MapMLLayer = L.Layer.extend({
this._setLayerElExtent();
}
},
titleIsReadOnly() {
return !!this._titleIsReadOnly;
},
setName(newName) {
// a layer's accessible name is set by the <map-title>, if present
// if it's not available the <layer- label="accessible-name"> attribute
// can be used
if (!this._titleIsReadOnly) {
if (!this.titleIsReadOnly()) {
this._title = newName;
this._mapmlLayerItem.querySelector('.mapml-layer-item-name').innerHTML =
newName;
Expand Down Expand Up @@ -1423,7 +1426,7 @@ export var MapMLLayer = L.Layer.extend({
layer._properties = {};
if (mapml.querySelector && mapml.querySelector('map-feature'))
layer._content = mapml;
thinkOfAGoodName();
if (thinkOfAGoodName()) return;
layer._styles = getAlternateStyles();
setLayerTitle();
parseLicenseAndLegend();
Expand Down Expand Up @@ -1504,14 +1507,14 @@ export var MapMLLayer = L.Layer.extend({
selectedAlternate &&
selectedAlternate.hasAttribute('href')
) {
layer.fire(
'changeprojection',
{
href: new URL(selectedAlternate.getAttribute('href'), base).href
},
false
layer._layerEl.dispatchEvent(
new CustomEvent('changeprojection', {
detail: {
href: new URL(selectedAlternate.getAttribute('href'), base).href
}
})
);
return;
return true;
} else if (!serverMeta) {
if (projectionMatch) {
layer._properties.crs = M[projection];
Expand Down Expand Up @@ -1559,6 +1562,7 @@ export var MapMLLayer = L.Layer.extend({
layer._properties._mapExtents[j].extentAnatomy = extentElement;
}
}
return false;
}
function setZoomInOrOutLinks() {
var zoomin = mapml.querySelector('map-link[rel=zoomin]'),
Expand Down Expand Up @@ -1605,10 +1609,12 @@ export var MapMLLayer = L.Layer.extend({
stylesControlSummary.innerText = 'Style';
stylesControl.appendChild(stylesControlSummary);
var changeStyle = function (e) {
layer.fire(
'changestyle',
{ src: e.target.getAttribute('data-href') },
false
layer._layerEl.dispatchEvent(
new CustomEvent('changestyle', {
detail: {
src: e.target.getAttribute('data-href')
}
})
);
};

Expand Down
4 changes: 2 additions & 2 deletions test/e2e/api/domApi-HTMLLayerElement.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ <h1>A Man With Two Hats</h1>
localWithTitle = document.querySelector('mapml-viewer').appendChild(localWithTitle);


addEventListener("extentload", (e) => {
addEventListener("loadedmetadata", (e) => {
if (e.target === remoteWithTitle) {
// setting label should not change the layer name in layer control
remoteWithTitle.label = "Unforsettable in every way";
Expand All @@ -75,7 +75,7 @@ <h1>A Man With Two Hats</h1>
localNoTitle.label = "Go ahead, make my day!";
}, 500);
}
});
}, {capture: true});

</script>
</html>
8 changes: 5 additions & 3 deletions test/e2e/api/domApi-HTMLLayerElement.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ test.describe('HTMLLayerElement DOM API Tests', () => {
let remoteWithTitleLabel = await page.evaluate(() => {
return document.querySelector('#remote-with-title').label;
});
expect(remoteWithTitleLabel).toEqual('Unforsettable in every way');
expect(remoteWithTitleLabel).toEqual(
'MapML author-controlled name - unsettable'
);
let remoteWithTitleName = await page.evaluate(() => {
let layer = document.querySelector('#remote-with-title');
return layer._layer.getName();
Expand All @@ -41,12 +43,12 @@ test.describe('HTMLLayerElement DOM API Tests', () => {
let localWithTitleLabel = await page.evaluate(() => {
return document.querySelector('#local-with-title').label;
});
expect(localWithTitleLabel).toEqual('No dice, buddy!');
expect(localWithTitleLabel).toEqual('Layer name set via local map-title element - unsettable via HTMLLayerelement.label');
let localWithTitleName = await page.evaluate(() => {
let layer = document.querySelector('#local-with-title');
return layer._layer.getName();
});
expect(localWithTitleName).not.toEqual(localWithTitleLabel);
expect(localWithTitleName).toEqual(localWithTitleLabel);

// THIS SHOULD NOT BE NECESSARY, BUT IT IS see comment below
await page.waitForTimeout(500);
Expand Down
30 changes: 12 additions & 18 deletions test/e2e/api/domApi-mapml-viewer.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,11 +108,8 @@ test.describe('mapml-viewer DOM API Tests', () => {
(layer) => document.querySelector('mapml-viewer').appendChild(layer),
layerHandle
);
let layerControlHidden = await page.$eval(
'css=body > mapml-viewer >> css=div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div',
(elem) => elem.hasAttribute('hidden')
);
expect(layerControlHidden).toEqual(false);
let layerControl = await page.locator('.leaflet-control-layers');
await expect(layerControl).toBeVisible();

// set the layer's hidden attribute, the layer should be removed from the layer
// control (but not the map), which leaves 0 layers in the layer control, which means the
Expand All @@ -121,11 +118,7 @@ test.describe('mapml-viewer DOM API Tests', () => {
(layer) => layer.setAttribute('hidden', ''),
layerHandle
);
layerControlHidden = await page.$eval(
'css=body > mapml-viewer >> css=div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div',
(elem) => elem.hasAttribute('hidden')
);
expect(layerControlHidden).toEqual(true);
await expect(layerControl).toBeHidden();

// takes a couple of seconds for the tiles to load

Expand All @@ -138,19 +131,23 @@ test.describe('mapml-viewer DOM API Tests', () => {
});

test('Remove mapml-viewer from DOM, add it back in', async () => {
await page.pause();
// check for error messages in console
let errorLogs = [];
page.on('pageerror', (err) => {
errorLogs.push(err.message);
});
// locators avoid flaky tests, allegedly
const viewer = await page.locator('mapml-viewer');
await viewer.evaluate(() => {});
expect(
await viewer.evaluate(() => {
await viewer.evaluate(() => {
let m = document.querySelector('mapml-viewer');
document.body.removeChild(m);
document.body.appendChild(m);
});
await page.waitForTimeout(200);
expect(
await viewer.evaluate(() => {
let m = document.querySelector('mapml-viewer');
let l = m.querySelector('layer-');
return l.label;
// the label attribute is ignored if the mapml document has a map-title
Expand Down Expand Up @@ -365,10 +362,7 @@ test.describe('mapml-viewer DOM API Tests', () => {
'.leaflet-top.leaflet-left > .leaflet-control-fullscreen',
(div) => div.hidden
);
let layerControlHidden = await page.$eval(
'.leaflet-top.leaflet-right > .leaflet-control-layers',
(div) => div.hidden
);
let layerControl = await page.locator('.leaflet-control-layers');
let scaleHidden = await page.$eval(
'.leaflet-bottom.leaflet-left > .mapml-control-scale',
(div) => div.hidden
Expand All @@ -381,7 +375,7 @@ test.describe('mapml-viewer DOM API Tests', () => {
expect(zoomHidden).toEqual(true);
expect(reloadHidden).toEqual(true);
expect(fullscreenHidden).toEqual(true);
expect(layerControlHidden).toEqual(true);
await expect(layerControl).toBeHidden();
expect(scaleHidden).toEqual(true);
});

Expand Down
29 changes: 11 additions & 18 deletions test/e2e/api/domApi-web-map.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,11 +103,8 @@ test.describe('web-map DOM API Tests', () => {
(layer) => document.querySelector('map').appendChild(layer),
layerHandle
);
let layerControlHidden = await page.$eval(
'css=body > map >> css=div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div',
(elem) => elem.hasAttribute('hidden')
);
expect(layerControlHidden).toEqual(false);
let layerControl = await page.locator('.leaflet-control-layers');
await expect(layerControl).toBeVisible();

// set the layer's hidden attribute, the layer should be removed from the layer
// control (but not the map), which leaves 0 layers in the layer control, which means the
Expand All @@ -116,11 +113,7 @@ test.describe('web-map DOM API Tests', () => {
(layer) => layer.setAttribute('hidden', ''),
layerHandle
);
layerControlHidden = await page.$eval(
'css=body > map >> css=div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div',
(elem) => elem.hasAttribute('hidden')
);
expect(layerControlHidden).toEqual(true);
await expect(layerControl).toBeHidden();

// takes a couple of seconds for the tiles to load

Expand All @@ -139,12 +132,15 @@ test.describe('web-map DOM API Tests', () => {
});
// locators avoid flaky tests, allegedly
const viewer = await page.locator('map');
await viewer.evaluate(() => {});
expect(
await viewer.evaluate(() => {
await viewer.evaluate(() => {
let m = document.querySelector('map');
document.body.removeChild(m);
document.body.appendChild(m);
});
await page.waitForTimeout(200);
expect(
await viewer.evaluate(() => {
let m = document.querySelector('map');
let l = m.querySelector('layer-');
return l.label;
// the label attribute is ignored if the mapml document has a map-title
Expand Down Expand Up @@ -346,10 +342,7 @@ test.describe('web-map DOM API Tests', () => {
'.leaflet-top.leaflet-left > .leaflet-control-fullscreen',
(div) => div.hidden
);
let layerControlHidden = await page.$eval(
'.leaflet-top.leaflet-right > .leaflet-control-layers',
(div) => div.hidden
);
let layerControl = await page.locator('.leaflet-control-layers');
let scaleHidden = await page.$eval(
'.leaflet-bottom.leaflet-left > .mapml-control-scale',
(div) => div.hidden
Expand All @@ -362,7 +355,7 @@ test.describe('web-map DOM API Tests', () => {
expect(zoomHidden).toEqual(true);
expect(reloadHidden).toEqual(true);
expect(fullscreenHidden).toEqual(true);
expect(layerControlHidden).toEqual(true);
await expect(layerControl).toBeHidden();
expect(scaleHidden).toEqual(true);
});

Expand Down

0 comments on commit de2d217

Please sign in to comment.