Skip to content

Commit e34d28f

Browse files
prushforprushforth
prushfor
authored and
prushforth
committed
Add test for issue #890 
1 parent 9522027 commit e34d28f

File tree

4 files changed

+194
-53
lines changed

4 files changed

+194
-53
lines changed

‎index.html

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -72,57 +72,57 @@
7272
</noscript>
7373
</head>
7474
<body>
75-
<mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls controlslist="nofullscreen geolocation">
76-
<map-caption>A pleasing map of Canada</map-caption>
77-
<layer- label="CBMT" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked></layer->
78-
<layer- label="Hat Guy" checked>
79-
<map-feature id="twohats" zoom="15" class="twohats">
80-
<map-properties>
81-
<table>
82-
<tr>
83-
<th>code</th>
84-
<td>1200020</td>
85-
</tr>
86-
<tr>
87-
<th>accuracy</th>
88-
<td>26</td>
89-
</tr>
90-
<tr>
91-
<th>valdate</th>
92-
<td>1995</td>
93-
</tr>
94-
<tr>
95-
<th>image</th>
96-
<td><a href="https://www.veterans.gc.ca/eng/remembrance/memorials/national-inventory-canadian-memorials/details/9304">
97-
<img src="https://www.veterans.gc.ca/images/remembrance/memorials/national-inventory-canadian-memorials/mem/35059-173a.jpg" width="60" height="60"/>
98-
</a>
99-
</td>
100-
</tr>
101-
<tr>
102-
<th>theme</th>
103-
<td>FO</td>
104-
</tr>
105-
<tr>
106-
<th>type</th>
107-
<td>2</td>
108-
</tr>
109-
<tr>
110-
<th>elevation</th>
111-
<td>61</td>
112-
</tr>
113-
<tr>
114-
<th>altiaccu</th>
115-
<td>5</td>
116-
</tr>
117-
</table>
118-
</map-properties>
119-
<map-geometry>
120-
<map-point>
121-
<map-coordinates>-75.705278 45.397778</map-coordinates>
122-
</map-point>
123-
</map-geometry>
124-
</map-feature>
125-
</layer->
126-
</mapml-viewer>
127-
</body>
75+
<mapml-viewer projection="OSMTILE" zoom="10" lon="-75.7" lat="45.4" controls="">
76+
<layer- label="Polygon" checked>
77+
<map-meta name="projection" content="OSMTILE"></map-meta>
78+
<map-meta name="zoom" content="min=10,max=11"></map-meta>
79+
<map-feature zoom="10">
80+
<map-featurecaption>Click me!</map-featurecaption>
81+
<!-- Setting the geometry coordinates to gcrs, as the default is pcrs -->
82+
<map-geometry cs="gcrs">
83+
<map-a href="#15, -75.699, 45.420">
84+
<map-polygon class="polygon">
85+
<map-coordinates>-75.8242035 45.3526278 -75.6793213 45.4572409 -75.5680847 45.4692806 -75.6092834 45.4215881 -75.5756378 45.3810901 -75.7946777 45.3120804</map-coordinates>
86+
</map-polygon>
87+
</map-a>
88+
</map-geometry>
89+
<map-properties></map-properties>
90+
</map-feature>
91+
</layer->
92+
93+
<!-- <layer- label="Points" checked>
94+
<map-meta name="projection" content="OSMTILE"></map-meta>
95+
<map-meta name="zoom" content="min=14,max=24"></map-meta>
96+
<map-feature>
97+
<map-featurecaption>Point 1</map-featurecaption>
98+
Setting the geometry coordinates to gcrs, as the default is pcrs
99+
<map-geometry cs="gcrs">
100+
<map-point class="point">
101+
<map-coordinates>-75.6978285 45.4202251</map-coordinates>
102+
</map-point>
103+
</map-geometry>
104+
<map-properties></map-properties>
105+
</map-feature>
106+
<map-feature>
107+
<map-featurecaption>Point 2</map-featurecaption>
108+
Setting the geometry coordinates to gcrs, as the default is pcrs
109+
<map-geometry cs="gcrs">
110+
<map-point class="point">
111+
<map-coordinates>-75.7002854 45.4199465</map-coordinates>
112+
</map-point>
113+
</map-geometry>
114+
<map-properties></map-properties>
115+
</map-feature>
116+
<map-feature>
117+
<map-featurecaption>point 3</map-featurecaption>
118+
Setting the geometry coordinates to gcrs, as the default is pcrs
119+
<map-geometry cs="gcrs">
120+
<map-point class="point">
121+
<map-coordinates>-75.6984723 45.4179207</map-coordinates>
122+
</map-point>
123+
</map-geometry>
124+
<map-properties></map-properties>
125+
</map-feature>
126+
</layer->-->
127+
</mapml-viewer> </body>
128128
</html>

‎test/e2e/features/mapFeature.html

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>&lt;map-feature&gt; Test</title>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<script type="module" src="../mapml-viewer.js"></script>
9+
<style>
10+
mapml-viewer {
11+
width: 100%;
12+
height: 500px;
13+
max-width: 100%;
14+
}
15+
16+
</style>
17+
</head>
18+
19+
<body>
20+
<mapml-viewer data-testid="viewer" zoom="10" lon="-75.7" lat="45.4" controls="">
21+
22+
<layer- label="Polygon" checked>
23+
<map-meta name="projection" content="OSMTILE"></map-meta>
24+
<map-meta name="zoom" content="min=10,max=11"></map-meta>
25+
<map-feature>
26+
<map-featurecaption>Click me!</map-featurecaption>
27+
<!-- Setting the geometry coordinates to gcrs, as the default is pcrs -->
28+
<map-geometry cs="gcrs">
29+
<map-a href="#15,-75.699,45.420">
30+
<map-polygon class="polygon">
31+
<map-coordinates>-75.8242035 45.3526278 -75.6793213 45.4572409 -75.5680847 45.4692806 -75.6092834 45.4215881 -75.5756378 45.3810901 -75.7946777 45.3120804</map-coordinates>
32+
</map-polygon>
33+
</map-a>
34+
</map-geometry>
35+
<map-properties></map-properties>
36+
</map-feature>
37+
</layer->
38+
39+
40+
41+
<layer- data-testid="points" label="Points" checked>
42+
<map-meta name="projection" content="OSMTILE"></map-meta>
43+
<map-meta name="zoom" content="value=14,min=14,max=24"></map-meta>
44+
<map-feature>
45+
<map-feature min="14" max="24" zoom="14">
46+
47+
<map-featurecaption>Point 1</map-featurecaption>
48+
<!-- Setting the geometry coordinates to gcrs, as the default is pcrs -->
49+
<map-geometry cs="gcrs">
50+
<map-point class="point">
51+
<map-coordinates>-75.6978285 45.4202251</map-coordinates>
52+
</map-point>
53+
</map-geometry>
54+
<map-properties><h2>Point 1</h2></map-properties>
55+
</map-feature>
56+
57+
<map-feature>
58+
<map-feature min="14" max="24" zoom="14">
59+
<map-featurecaption>Point 2</map-featurecaption>
60+
<!-- Setting the geometry coordinates to gcrs, as the default is pcrs -->
61+
<map-geometry cs="gcrs">
62+
<map-point class="point">
63+
<map-coordinates>-75.7002854 45.4199465</map-coordinates>
64+
</map-point>
65+
</map-geometry>
66+
<map-properties><h2>Point 2</h2></map-properties>
67+
</map-feature>
68+
<map-feature>
69+
<map-feature min="14" max="24" zoom="14">
70+
<map-featurecaption>Point 3</map-featurecaption>
71+
<!-- Setting the geometry coordinates to gcrs, as the default is pcrs -->
72+
<map-geometry cs="gcrs">
73+
<map-point class="point">
74+
<map-coordinates>-75.6984723 45.4179207</map-coordinates>
75+
</map-point>
76+
</map-geometry>
77+
<map-properties><h2>Point 3</h2></map-properties>
78+
</map-feature>
79+
</layer->
80+
</mapml-viewer>
81+
</body>
82+
83+
</html>

‎test/e2e/features/mapFeature.test.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { test, expect, chromium } from '@playwright/test';
2+
3+
test.describe('Playwright map-feature tests', () => {
4+
let page;
5+
let context;
6+
test.beforeAll(async () => {
7+
context = await chromium.launchPersistentContext('');
8+
page =
9+
context.pages().find((page) => page.url() === 'about:blank') ||
10+
(await context.newPage());
11+
await page.goto('features/mapFeature.html');
12+
});
13+
14+
test.afterAll(async function () {
15+
await context.close();
16+
});
17+
test('test', async () => {
18+
// expect the map to start at initial lat/lon/zoom
19+
await expect(page.getByTestId('viewer')).toHaveJSProperty('lat', '45.4');
20+
await expect(page.getByTestId('viewer')).toHaveJSProperty('lon', '-75.7');
21+
await expect(page.getByTestId('viewer')).toHaveJSProperty('zoom', '10');
22+
23+
// click the polygon link to zoom
24+
await page.getByRole('link', { name: 'Click me!' }).click({ timeout: 300 });
25+
26+
// traversing the link, expect the new map location to be centered #15, -75.699, 45.420
27+
await expect(page.getByTestId('viewer')).toHaveJSProperty('lat', '45.42');
28+
await expect(page.getByTestId('viewer')).toHaveJSProperty('lon', '-75.699');
29+
await expect(page.getByTestId('viewer')).toHaveJSProperty('zoom', '15');
30+
31+
// remove this to fail on click
32+
// await page.getByTestId('points').evaluate((layer)=>layer._layer._setLayerElExtent());
33+
34+
// click the first point on the map
35+
await page.getByRole('button', { name: 'Point 1' }).click({ timeout: 300 });
36+
// expect the popup for Point 1 to have specific content
37+
await page.getByRole('heading', { name: 'Point 1' });
38+
// expect the popup to have a Zoom to here link
39+
await page
40+
.getByRole('link', { name: 'Zoom to here' })
41+
.click({ timeout: 300 });
42+
43+
// traversing the link, expect the new map location to be centered #14,-75.6978309903406,45.42022684737822
44+
await expect(page.getByTestId('viewer')).toHaveJSProperty(
45+
'lat',
46+
'45.42022684737822'
47+
);
48+
await expect(page.getByTestId('viewer')).toHaveJSProperty(
49+
'lon',
50+
'-75.6978309903406'
51+
);
52+
await expect(page.getByTestId('viewer')).toHaveJSProperty('zoom', '14');
53+
await page
54+
.getByRole('button', { name: 'Close popup' })
55+
.click({ timeout: 300 });
56+
});
57+
});

‎test/server.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ app.get('/data/noMapMeta', (req, res, next) => {
7474
app.use('/data', express.static(path.join(__dirname, 'e2e/data/tiles/cbmt')));
7575
app.use('/data', express.static(path.join(__dirname, 'e2e/data/tiles/wgs84')));
7676
app.use('/images', express.static(path.join(__dirname, 'e2e/data/images')));
77+
app.use('/features', express.static(path.join(__dirname, 'e2e/features')));
7778
app.use(
7879
'/data',
7980
express.static(path.join(__dirname, 'e2e/data/tiles/osmtile'))

0 commit comments

Comments
 (0)