Skip to content

Commit b4085d4

Browse files
ahmadayubiahmadayubi
committed
Use pcrs instead of gcrs for feature focus, fix tests
1 parent 29b3378 commit b4085d4

File tree

3 files changed

+82
-32
lines changed

3 files changed

+82
-32
lines changed

‎src/mapml/features/feature.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,23 @@ export var Feature = L.Path.extend({
5151
this.on("keyup", this._focusOnTab, this);
5252
},
5353

54+
/**
55+
* Focuses the feature to the center of the map when focused through tab
56+
* uses pcrs and tcrs to pan map, allowing features defined in areas where
57+
* gcrs causes issues to still work as expected
58+
* @param e
59+
* @private
60+
*/
5461
_focusOnTab: function (e){
5562
if(e.originalEvent.keyCode === 9){
56-
let layerCenter = this.getCenter();
57-
if (layerCenter.equals(this._map.getCenter())) return;
58-
this._map.panTo(layerCenter);
63+
let crs = this._map.options.crs;
64+
let mc = this._map.getPixelBounds().getCenter();
65+
let scale = crs.scale(this._map.getZoom());
66+
67+
let fc = crs.transformation.transform(this._bounds.getCenter(), scale);
68+
69+
if (fc.equals(mc)) return;
70+
this._map.panBy([(fc.x - mc.x), (fc.y - mc.y)]);
5971
}
6072
},
6173

‎test/e2e/core/featureLinks.test.js‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ describe("Playwright Feature Links Tests", () => {
1111
test("Sub-point link adds new layer", async () => {
1212
for(let i = 0; i < 4; i++) {
1313
await page.keyboard.press("Tab");
14-
await page.waitForTimeout(200);
14+
await page.waitForTimeout(500);
1515
}
1616
await page.keyboard.press("Enter");
1717
await page.waitForTimeout(1000);
@@ -25,16 +25,20 @@ describe("Playwright Feature Links Tests", () => {
2525
test("Sub-point inplace link adds new layer, parent feature has separate link", async () => {
2626
await page.hover(".leaflet-top.leaflet-right");
2727
await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > div:nth-child(1) > div > button:nth-child(1)");
28+
await page.waitForTimeout(200);
2829
await page.click("body > map");
30+
await page.waitForTimeout(200);
2931
for(let i = 0; i < 6; i++) {
3032
await page.keyboard.press("Tab");
31-
await page.waitForTimeout(200);
33+
await page.waitForTimeout(500);
3234
}
35+
await page.waitForTimeout(500);
3336
const extentBeforeLink = await page.$eval(
3437
"body > map",
3538
(map) => map.extent
3639
);
3740
await page.keyboard.press("Enter");
41+
await page.waitForTimeout(500);
3842
const layers = await page.$eval(
3943
"body > map",
4044
(map) => map.childElementCount
@@ -59,17 +63,19 @@ describe("Playwright Feature Links Tests", () => {
5963
test("Main part adds new layer", async () => {
6064
await page.hover(".leaflet-top.leaflet-right");
6165
await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > div:nth-child(1) > div > button:nth-child(1)");
62-
await page.click("body > map");
63-
for(let i = 0; i < 5; i++) {
66+
await page.waitForTimeout(200);
67+
await page.click("body");
68+
await page.waitForTimeout(200);
69+
for(let i = 0; i < 6; i++) {
6470
await page.keyboard.press("Tab");
65-
await page.waitForTimeout(200);
71+
await page.waitForTimeout(500);
6672
}
6773
await page.keyboard.press("Enter");
74+
await page.waitForTimeout(500);
6875
const layers = await page.$eval(
6976
"body > map",
7077
(map) => map.childElementCount
7178
);
72-
await page.waitForTimeout(1000);
7379
const layerName = await page.$eval(
7480
"//html/body/map/layer-[2]",
7581
(layer) => layer.label
@@ -88,9 +94,10 @@ describe("Playwright Feature Links Tests", () => {
8894
describe("HTML Link Type Tests", () => {
8995
test("HTML _self target navigates to new page", async () => {
9096
await page.click("body > map");
97+
await page.waitForTimeout(200);
9198
for(let i = 0; i < 7; i++) {
9299
await page.keyboard.press("Tab");
93-
await page.waitForTimeout(200);
100+
await page.waitForTimeout(500);
94101
}
95102
await page.keyboard.press("Enter");
96103
await page.waitForTimeout(1000);
@@ -101,9 +108,10 @@ describe("Playwright Feature Links Tests", () => {
101108
await page.goBack();
102109
await page.waitForTimeout(1000);
103110
await page.click("body > map");
111+
await page.waitForTimeout(200);
104112
for(let i = 0; i < 8; i++) {
105113
await page.keyboard.press("Tab");
106-
await page.waitForTimeout(200);
114+
await page.waitForTimeout(500);
107115
}
108116
await page.keyboard.press("Enter");
109117
await page.waitForTimeout(1000);
@@ -114,9 +122,10 @@ describe("Playwright Feature Links Tests", () => {
114122
await page.goBack();
115123
await page.waitForTimeout(1000);
116124
await page.click("body > map");
125+
await page.waitForTimeout(200);
117126
for(let i = 0; i < 9; i++) {
118127
await page.keyboard.press("Tab");
119-
await page.waitForTimeout(200);
128+
await page.waitForTimeout(500);
120129
}
121130
await page.keyboard.press("Enter");
122131
await page.waitForTimeout(1000);
@@ -127,9 +136,10 @@ describe("Playwright Feature Links Tests", () => {
127136
await page.goBack();
128137
await page.waitForTimeout(1000);
129138
await page.click("body > map");
139+
await page.waitForTimeout(200);
130140
for(let i = 0; i < 11; i++) {
131141
await page.keyboard.press("Tab");
132-
await page.waitForTimeout(200);
142+
await page.waitForTimeout(500);
133143
}
134144
await page.keyboard.press("Enter");
135145
await page.waitForTimeout(1000);

‎test/e2e/core/keyboardInteraction.test.js‎

Lines changed: 47 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ describe("Playwright Keyboard Navigation + Query Layer Tests" , () => {
1111
test("Crosshair hidden onload, shows on focus", async () => {
1212
const beforeTabHidden = await page.$eval("div > div.mapml-crosshair", (div) => div.style.visibility);
1313
await page.keyboard.press("Tab");
14+
await page.waitForTimeout(200);
1415
const afterTab = await page.$eval("div > div.mapml-crosshair", (div) => div.style.visibility);
1516
expect(beforeTabHidden).toEqual("hidden");
1617
expect(afterTab).toEqual("");
@@ -31,11 +32,13 @@ describe("Playwright Keyboard Navigation + Query Layer Tests" , () => {
3132

3233
test("Crosshair shows on esc but hidden on tab out", async () => {
3334
await page.keyboard.press("Escape");
35+
await page.waitForTimeout(200);
3436
const afterEsc = await page.$eval("div > div.mapml-crosshair", (div) => div.style.visibility);
3537
await page.click("body");
3638
await page.keyboard.press("Tab");
39+
await page.waitForTimeout(200);
3740
await page.keyboard.press("ArrowUp");
38-
41+
await page.waitForTimeout(200);
3942
await page.keyboard.press("Tab");
4043
const afterTab = await page.$eval("div > div.mapml-crosshair", (div) => div.style.visibility);
4144

@@ -46,7 +49,9 @@ describe("Playwright Keyboard Navigation + Query Layer Tests" , () => {
4649
test("Crosshair hidden when queryable layer is unselected, shows on reselect", async () => {
4750
await page.click("body");
4851
await page.keyboard.press("Tab");
52+
await page.waitForTimeout(200);
4953
await page.keyboard.press("ArrowUp");
54+
await page.waitForTimeout(200);
5055
await page.evaluateHandle(() => document.querySelector("layer-").removeAttribute("checked"));
5156
const afterUncheck = await page.$eval("div > div.mapml-crosshair", (div) => div.style.visibility);
5257

@@ -88,19 +93,21 @@ describe("Playwright Keyboard Navigation + Query Layer Tests" , () => {
8893

8994
test("Tab focuses fetched features", async () => {
9095
await page.evaluateHandle(() => document.getElementById("vector").setAttribute("checked", ""));
96+
await page.waitForTimeout(500);
9197
await page.click("body");
92-
await page.keyboard.press("Tab");
9398

94-
await page.keyboard.press("Tab");
95-
await page.keyboard.press("Tab");
96-
await page.keyboard.press("Tab");
97-
await page.keyboard.press("Tab");
99+
for(let i = 0; i < 5; i++){
100+
await page.keyboard.press("Tab");
101+
await page.waitForTimeout(500);
102+
}
103+
98104
const aHandle = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
99105
const nextHandle = await page.evaluateHandle(doc => doc.shadowRoot, aHandle);
100106
const resultHandle = await page.evaluateHandle(root => root.activeElement.querySelector(".leaflet-interactive"), nextHandle);
101107
const focused = await (await page.evaluateHandle(elem => elem.getAttribute("d"), resultHandle)).jsonValue();
102108

103109
await page.keyboard.press("Tab");
110+
await page.waitForTimeout(500);
104111
const aHandleNext = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
105112
const nextHandleNext = await page.evaluateHandle(doc => doc.shadowRoot, aHandleNext);
106113
const resultHandleNext = await page.evaluateHandle(root => root.activeElement.querySelector(".leaflet-interactive"), nextHandleNext);
@@ -118,49 +125,59 @@ describe("Playwright Keyboard Navigation + Query Layer Tests" , () => {
118125
await page.evaluateHandle(() => document.getElementById("query").removeAttribute("checked"));
119126
await page.click("body");
120127
await page.keyboard.press("Tab");
128+
await page.waitForTimeout(500);
121129

122130
await page.keyboard.press("Tab");
131+
await page.waitForTimeout(200);
123132
await page.keyboard.press("Enter");
133+
await page.waitForTimeout(500);
124134
const h = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
125135
const nh = await page.evaluateHandle(doc => doc.shadowRoot, h);
126136
const rh = await page.evaluateHandle(root => root.activeElement, nh);
127137
const f = await (await page.evaluateHandle(elem => elem.className, rh)).jsonValue();
128138

139+
await page.waitForTimeout(500);
129140
await page.keyboard.press("Tab");
130141
const h2 = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
131142
const nh2 = await page.evaluateHandle(doc => doc.shadowRoot, h2);
132143
const rh2 = await page.evaluateHandle(root => root.activeElement, nh2);
133144
const f2 = await (await page.evaluateHandle(elem => elem.tagName, rh2)).jsonValue();
134145

146+
await page.waitForTimeout(500);
135147
await page.keyboard.press("Tab");
136148
const h3 = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
137149
const nh3 = await page.evaluateHandle(doc => doc.shadowRoot, h3);
138150
const rh3 = await page.evaluateHandle(root => root.activeElement, nh3);
139151
const f3 = await (await page.evaluateHandle(elem => elem.title, rh3)).jsonValue();
140152

153+
await page.waitForTimeout(500);
141154
await page.keyboard.press("Tab");
142155
const h4 = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
143156
const nh4 = await page.evaluateHandle(doc => doc.shadowRoot, h4);
144157
const rh4 = await page.evaluateHandle(root => root.activeElement, nh4);
145158
const f4 = await (await page.evaluateHandle(elem => elem.title, rh4)).jsonValue();
146159

160+
await page.waitForTimeout(500);
147161
await page.keyboard.press("Tab");
148162
const h5 = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
149163
const nh5 = await page.evaluateHandle(doc => doc.shadowRoot, h5);
150164
const rh5 = await page.evaluateHandle(root => root.activeElement, nh5);
151165
const f5 = await (await page.evaluateHandle(elem => elem.title, rh5)).jsonValue();
152166

167+
await page.waitForTimeout(500);
153168
await page.keyboard.press("Tab");
154169
const h6 = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
155170
const nh6 = await page.evaluateHandle(doc => doc.shadowRoot, h6);
156171
const rh6 = await page.evaluateHandle(root => root.activeElement, nh6);
157172
const f6 = await (await page.evaluateHandle(elem => elem.title, rh6)).jsonValue();
158173

174+
await page.waitForTimeout(500);
159175
await page.keyboard.press("Tab");
160176
const h7 = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
161177
const nh7 = await page.evaluateHandle(doc => doc.shadowRoot, h7);
162178
const rh7 = await page.evaluateHandle(root => root.activeElement, nh7);
163179
const f7 = await (await page.evaluateHandle(elem => elem.className, rh7)).jsonValue();
180+
await page.waitForTimeout(500);
164181

165182
expect(f).toEqual("mapml-popup-content");
166183
expect(f2.toUpperCase()).toEqual("A");
@@ -181,22 +198,24 @@ describe("Playwright Keyboard Navigation + Query Layer Tests" , () => {
181198
const f = await (await page.evaluateHandle(elem => elem.getAttribute("d"), rh)).jsonValue();
182199

183200
let tooltipCount = await page.$eval("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-tooltip-pane", div => div.childElementCount);
201+
await page.waitForTimeout(500);
184202

185203
expect(tooltipCount).toEqual(1);
186204
expect(f).toEqual("M153 508L113 146L-161 220L-107 436z");
187205
});
188206

189207
test("Shift + Tab to current feature while popup open", async () => {
190208
await page.keyboard.press("Enter");
191-
await page.waitForTimeout(500);
209+
await page.waitForTimeout(1000);
192210
await page.keyboard.press("Shift+Tab");
193-
await page.waitForTimeout(500);
211+
await page.waitForTimeout(1000);
194212

195213
const h = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
196214
const nh = await page.evaluateHandle(doc => doc.shadowRoot, h);
197215
const rh = await page.evaluateHandle(root => root.activeElement.querySelector(".leaflet-interactive"), nh);
198216
const f = await (await page.evaluateHandle(elem => elem.getAttribute("d"), rh)).jsonValue();
199217

218+
await page.waitForTimeout(500);
200219
let tooltipCount = await page.$eval("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-tooltip-pane", div => div.childElementCount);
201220

202221
expect(tooltipCount).toEqual(1);
@@ -205,18 +224,19 @@ describe("Playwright Keyboard Navigation + Query Layer Tests" , () => {
205224

206225
test("Previous feature button focuses previous feature", async () => {
207226
await page.keyboard.press("Enter");
208-
await page.waitForTimeout(500);
227+
await page.waitForTimeout(1000);
209228
await page.keyboard.press("Tab");
210229
await page.waitForTimeout(500);
211230
await page.keyboard.press("Tab");
212231
await page.waitForTimeout(500);
213232
await page.keyboard.press("Enter");
214-
await page.waitForTimeout(500);
233+
await page.waitForTimeout(1000);
215234
const h = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
216235
const nh = await page.evaluateHandle(doc => doc.shadowRoot, h);
217236
const rh = await page.evaluateHandle(root => root.activeElement.querySelector(".leaflet-interactive"), nh);
218237
const f = await (await page.evaluateHandle(elem => elem.getAttribute("d"), rh)).jsonValue();
219238

239+
await page.waitForTimeout(1000);
220240
let tooltipCount = await page.$eval("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-tooltip-pane", div => div.childElementCount);
221241

222242
expect(tooltipCount).toEqual(1);
@@ -227,14 +247,13 @@ describe("Playwright Keyboard Navigation + Query Layer Tests" , () => {
227247
await page.keyboard.press("Tab");
228248
await page.waitForTimeout(500);
229249
await page.keyboard.press("Enter");
230-
await page.waitForTimeout(500);
231-
await page.keyboard.press("Tab");
232-
await page.waitForTimeout(500);
233-
await page.keyboard.press("Tab");
234-
await page.waitForTimeout(500);
235-
await page.keyboard.press("Tab");
236-
await page.waitForTimeout(500);
250+
await page.waitForTimeout(1000);
251+
for(let i = 0; i < 3; i++){
252+
await page.keyboard.press("Tab");
253+
await page.waitForTimeout(500);
254+
}
237255
await page.keyboard.press("Enter");
256+
await page.waitForTimeout(1000);
238257
const h = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
239258
const nh = await page.evaluateHandle(doc => doc.shadowRoot, h);
240259
const rh = await page.evaluateHandle(root => root.activeElement.querySelector(".leaflet-interactive"), nh);
@@ -247,16 +266,25 @@ describe("Playwright Keyboard Navigation + Query Layer Tests" , () => {
247266
});
248267

249268
test("Focus Controls focuses the first <button> child in control div", async () => {
250-
await page.click("body > mapml-viewer");
269+
await page.focus("body > mapml-viewer");
270+
await page.waitForTimeout(500);
251271
await page.keyboard.press("Shift+F10");
272+
await page.waitForTimeout(500);
252273
await page.keyboard.press("t");
274+
await page.waitForTimeout(500);
253275
await page.click("body");
254276
await page.keyboard.press("Tab");
277+
await page.waitForTimeout(500);
255278
await page.keyboard.press("Tab");
279+
await page.waitForTimeout(500);
256280
await page.keyboard.press("Enter");
257-
for (let i = 0; i < 5; i++)
281+
await page.waitForTimeout(500);
282+
for (let i = 0; i < 5; i++) {
258283
await page.keyboard.press("Tab");
284+
await page.waitForTimeout(200);
285+
}
259286
await page.keyboard.press("Enter");
287+
await page.waitForTimeout(1000);
260288
const h = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
261289
const nh = await page.evaluateHandle(doc => doc.shadowRoot, h);
262290
const rh = await page.evaluateHandle(root => root.activeElement, nh);

0 commit comments

Comments
 (0)