Skip to content

Commit fde273c

Browse files
yhy0217yhy0217
authored
fix issue#633: web-map looks for viewer in condition (#905)
* fix issue#633: web-map looks for viewer in condition * update announcemovement tests to test for both mapml-viewer and web-map
1 parent 7871fd4 commit fde273c

File tree

3 files changed

+203
-115
lines changed

3 files changed

+203
-115
lines changed

‎src/web-map.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -667,12 +667,14 @@ export class WebMap extends HTMLMapElement {
667667
false
668668
);
669669

670+
let mapEl = this;
670671
this.parentElement.addEventListener('keyup', function (e) {
671672
if (
672673
e.keyCode === 9 &&
673-
document.activeElement.nodeName === 'MAPML-VIEWER'
674+
document.activeElement.className === 'mapml-web-map'
674675
) {
675-
document.activeElement.dispatchEvent(
676+
// document.activeElement is div.mapml-web-map, not <map>
677+
mapEl.dispatchEvent(
676678
new CustomEvent('mapfocused', { detail: { target: this } })
677679
);
678680
}
@@ -693,8 +695,8 @@ export class WebMap extends HTMLMapElement {
693695
}
694696
});
695697
this.parentElement.addEventListener('mousedown', function (e) {
696-
if (document.activeElement.nodeName === 'MAPML-VIEWER') {
697-
document.activeElement.dispatchEvent(
698+
if (document.activeElement.className === 'mapml-web-map') {
699+
mapEl.dispatchEvent(
698700
new CustomEvent('mapfocused', { detail: { target: this } })
699701
);
700702
}

‎test/e2e/core/announceMovement.test.js‎

Lines changed: 148 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -8,124 +8,161 @@ test.describe('Announce movement test', () => {
88
page =
99
context.pages().find((page) => page.url() === 'about:blank') ||
1010
(await context.newPage());
11-
await page.goto('mapml-viewer.html');
1211
});
1312

1413
test.afterAll(async function () {
1514
await context.close();
1615
});
1716

18-
test('Output values are correct during regular movement', async () => {
19-
await page.keyboard.press('Tab');
20-
await page.waitForTimeout(500);
21-
await page.keyboard.press('ArrowUp');
22-
await page.waitForTimeout(1000);
23-
24-
const movedUp = await page.$eval(
25-
'body > mapml-viewer div > output',
26-
(output) => output.innerHTML
27-
);
28-
expect(movedUp).toEqual('zoom level 0');
29-
30-
for (let i = 0; i < 2; i++) {
31-
await page.keyboard.press('ArrowLeft');
32-
await page.waitForTimeout(1000);
33-
}
34-
35-
const movedLeft = await page.$eval(
36-
'body > mapml-viewer div > output',
37-
(output) => output.innerHTML
38-
);
39-
expect(movedLeft).toEqual('zoom level 0');
40-
41-
await page.keyboard.press('Equal');
42-
await page.waitForTimeout(1000);
43-
44-
const zoomedIn = await page.$eval(
45-
'body > mapml-viewer div > output',
46-
(output) => output.innerHTML
17+
let mapFiles = ['web-map.html', 'mapml-viewer.html'];
18+
19+
for (let file of mapFiles) {
20+
test(
21+
file + ': Output values are correct during regular movement',
22+
async () => {
23+
await page.goto(file);
24+
await page.keyboard.press('Tab');
25+
await page.waitForTimeout(500);
26+
await page.keyboard.press('ArrowUp');
27+
await page.waitForTimeout(1000);
28+
const map = await page.getByTestId('testviewer');
29+
const movedUp = await map.evaluate((map) => {
30+
let output = map.shadowRoot
31+
? map.shadowRoot.querySelector('output')
32+
: map.querySelector('div').shadowRoot.querySelector('output');
33+
return output.innerHTML;
34+
});
35+
expect(movedUp).toEqual('zoom level 0');
36+
37+
for (let i = 0; i < 2; i++) {
38+
await page.keyboard.press('ArrowLeft');
39+
await page.waitForTimeout(1000);
40+
}
41+
42+
const movedLeft = await map.evaluate((map) => {
43+
let output = map.shadowRoot
44+
? map.shadowRoot.querySelector('output')
45+
: map.querySelector('div').shadowRoot.querySelector('output');
46+
return output.innerHTML;
47+
});
48+
expect(movedLeft).toEqual('zoom level 0');
49+
50+
await page.keyboard.press('Equal');
51+
await page.waitForTimeout(1000);
52+
53+
const zoomedIn = await map.evaluate((map) => {
54+
let output = map.shadowRoot
55+
? map.shadowRoot.querySelector('output')
56+
: map.querySelector('div').shadowRoot.querySelector('output');
57+
return output.innerHTML;
58+
});
59+
expect(zoomedIn).toEqual('zoom level 1');
60+
61+
await page.keyboard.press('Minus');
62+
await page.waitForTimeout(1000);
63+
64+
const zoomedOut = await map.evaluate((map) => {
65+
let output = map.shadowRoot
66+
? map.shadowRoot.querySelector('output')
67+
: map.querySelector('div').shadowRoot.querySelector('output');
68+
return output.innerHTML;
69+
});
70+
expect(zoomedOut).toEqual(
71+
'At minimum zoom level, zoom out disabled zoom level 0'
72+
);
73+
// testing + button
74+
await page.keyboard.press('Tab');
75+
await page.keyboard.press('Enter');
76+
await page.waitForTimeout(1000);
77+
78+
const zoomedBackIn = await map.evaluate((map) => {
79+
let output = map.shadowRoot
80+
? map.shadowRoot.querySelector('output')
81+
: map.querySelector('div').shadowRoot.querySelector('output');
82+
return output.innerHTML;
83+
});
84+
expect(zoomedBackIn).toEqual('zoom level 1');
85+
}
4786
);
48-
expect(zoomedIn).toEqual('zoom level 1');
49-
50-
await page.keyboard.press('Minus');
51-
await page.waitForTimeout(1000);
5287

53-
const zoomedOut = await page.$eval(
54-
'body > mapml-viewer div > output',
55-
(output) => output.innerHTML
56-
);
57-
expect(zoomedOut).toEqual(
58-
'At minimum zoom level, zoom out disabled zoom level 0'
88+
test(
89+
file + ': Output values are correct at bounds and bounces back',
90+
async () => {
91+
//Zoom out to min layer bound
92+
await page.keyboard.press('Shift+Tab');
93+
await page.keyboard.press('Minus');
94+
await page.waitForTimeout(1000);
95+
const map = await page.getByTestId('testviewer');
96+
97+
const minZoom = await map.evaluate((map) => {
98+
let output = map.shadowRoot
99+
? map.shadowRoot.querySelector('output')
100+
: map.querySelector('div').shadowRoot.querySelector('output');
101+
return output.innerHTML;
102+
});
103+
expect(minZoom).toEqual(
104+
'At minimum zoom level, zoom out disabled zoom level 0'
105+
);
106+
await page.pause();
107+
108+
//Pan out of west bounds, expect the map to bounce back
109+
for (let i = 0; i < 4; i++) {
110+
await page.waitForTimeout(1000);
111+
await page.keyboard.press('ArrowLeft');
112+
}
113+
114+
const westBound = await page.waitForFunction(
115+
() => {
116+
const map = document.querySelector('mapml-viewer')
117+
? document.querySelector('mapml-viewer')
118+
: document.querySelector('map');
119+
let output = map.shadowRoot
120+
? map.shadowRoot.querySelector('output')
121+
: map.querySelector('div').shadowRoot.querySelector('output');
122+
return (
123+
output.innerHTML === 'Reached west bound, panning west disabled'
124+
);
125+
},
126+
{},
127+
{ timeout: 1000 }
128+
);
129+
expect(await westBound.jsonValue()).toEqual(true);
130+
131+
await page.waitForTimeout(1000);
132+
const bouncedBack = await map.evaluate((map) => {
133+
let output = map.shadowRoot
134+
? map.shadowRoot.querySelector('output')
135+
: map.querySelector('div').shadowRoot.querySelector('output');
136+
return output.innerHTML;
137+
});
138+
expect(bouncedBack).toEqual('zoom level 0');
139+
140+
//Zoom in out of bounds, expect the map to zoom back
141+
await page.keyboard.press('Equal');
142+
143+
const zoomedOutOfBounds = await page.waitForFunction(
144+
() => {
145+
const map = document.querySelector('mapml-viewer')
146+
? document.querySelector('mapml-viewer')
147+
: document.querySelector('map');
148+
let output = map.shadowRoot
149+
? map.shadowRoot.querySelector('output')
150+
: map.querySelector('div').shadowRoot.querySelector('output');
151+
return output.innerHTML === 'Zoomed out of bounds, returning to';
152+
},
153+
{ timeout: 1000 }
154+
);
155+
expect(await zoomedOutOfBounds.jsonValue()).toEqual(true);
156+
157+
await page.waitForTimeout(1000);
158+
const zoomedBack = await map.evaluate((map) => {
159+
let output = map.shadowRoot
160+
? map.shadowRoot.querySelector('output')
161+
: map.querySelector('div').shadowRoot.querySelector('output');
162+
return output.innerHTML;
163+
});
164+
expect(zoomedBack).toEqual('zoom level 0');
165+
}
59166
);
60-
// testing + button
61-
await page.keyboard.press('Tab');
62-
await page.keyboard.press('Enter');
63-
await page.waitForTimeout(1000);
64-
65-
const zoomedBackIn = await page.$eval(
66-
'body > mapml-viewer div > output',
67-
(output) => output.innerHTML
68-
);
69-
expect(zoomedBackIn).toEqual('zoom level 1');
70-
});
71-
72-
test('Output values are correct at bounds and bounces back', async () => {
73-
//Zoom out to min layer bound
74-
await page.keyboard.press('Shift+Tab');
75-
await page.keyboard.press('Minus');
76-
await page.waitForTimeout(1000);
77-
78-
const minZoom = await page.$eval(
79-
'body > mapml-viewer div > output',
80-
(output) => output.innerHTML
81-
);
82-
expect(minZoom).toEqual(
83-
'At minimum zoom level, zoom out disabled zoom level 0'
84-
);
85-
86-
//Pan out of west bounds, expect the map to bounce back
87-
for (let i = 0; i < 4; i++) {
88-
await page.waitForTimeout(1000);
89-
await page.keyboard.press('ArrowLeft');
90-
}
91-
92-
const westBound = await page.waitForFunction(
93-
() =>
94-
document
95-
.querySelector('body > mapml-viewer')
96-
.shadowRoot.querySelector('div > output').innerHTML ===
97-
'Reached west bound, panning west disabled',
98-
{},
99-
{ timeout: 1000 }
100-
);
101-
expect(await westBound.jsonValue()).toEqual(true);
102-
103-
await page.waitForTimeout(1000);
104-
const bouncedBack = await page.$eval(
105-
'body > mapml-viewer div > output',
106-
(output) => output.innerHTML
107-
);
108-
expect(bouncedBack).toEqual('zoom level 0');
109-
110-
//Zoom in out of bounds, expect the map to zoom back
111-
await page.keyboard.press('Equal');
112-
113-
const zoomedOutOfBounds = await page.waitForFunction(
114-
() =>
115-
document
116-
.querySelector('body > mapml-viewer')
117-
.shadowRoot.querySelector('div > output').innerHTML ===
118-
'Zoomed out of bounds, returning to',
119-
{},
120-
{ timeout: 1000 }
121-
);
122-
expect(await zoomedOutOfBounds.jsonValue()).toEqual(true);
123-
124-
await page.waitForTimeout(1000);
125-
const zoomedBack = await page.$eval(
126-
'body > mapml-viewer div > output',
127-
(output) => output.innerHTML
128-
);
129-
expect(zoomedBack).toEqual('zoom level 0');
130-
});
167+
}
131168
});

‎test/e2e/web-map/web-map.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Basic Mapml-Viewer</title>
6+
<meta charset="UTF-8">
7+
<script>
8+
let options = document.createElement("map-options");
9+
options.innerHTML = '{"announceMovement":true}';
10+
document.head.appendChild(options);
11+
</script>
12+
<script type="module" src="web-map.js"></script>
13+
<style>
14+
html {
15+
height: 100%
16+
}
17+
18+
body {
19+
height: inherit
20+
}
21+
22+
* {
23+
margin: 0;
24+
padding: 0;
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<map is="web-map" data-testid="testviewer" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47"
31+
lon="-92" controls>
32+
<layer- data-testid="testlayer" label="CBMT - INLINE" checked>
33+
<map-extent units="CBMTILE" checked hidden>
34+
<map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
35+
<map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
36+
<map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
37+
<map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png'></map-link>
38+
</map-extent>
39+
</layer->
40+
</mapml-viewer>
41+
<textarea id="coord" name="message" rows="10" cols="100"></textarea>
42+
<textarea id="copyGeoJSON" name="message" rows="10"
43+
cols="100">{"type": "FeatureCollection","features": [{"type": "Feature","properties": {},"geometry": {"coordinates": [29.93926429273742,26.465501185936787],"type": "Point"}}]}</textarea>
44+
<textarea id="invalidLink" name="message" rows="10" cols="100">http://google.com</textarea>
45+
<textarea id="invalidText" name="message" rows="10" cols="100">asdasdasdadsasd</textarea>
46+
<textarea id="copyLink" name="message" rows="10" cols="100">http://localhost:30001/data/query/DouglasFir</textarea>
47+
</body>
48+
49+
</html>

0 commit comments

Comments
 (0)