Skip to content

Commit 0d4c50c

Browse files
prushforthprushforth
committed
Add test for <map-link rel="features" media="..."> attribute cycling
1 parent cf1d61e commit 0d4c50c

File tree

6 files changed

+67
-45
lines changed

6 files changed

+67
-45
lines changed

‎test/e2e/elements/map-layer/map-layer-media.test.js

+32-26
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,23 @@ test.describe('map-layer media attribute', () => {
1313
await page.waitForTimeout(1000);
1414
viewer = page.getByTestId('viewer');
1515
});
16-
test('On initial load, a matching media queried layer is enabled', async ()=>{
16+
test('On initial load, a matching media queried layer is enabled', async () => {
1717
const matchedQueryLayer = page.getByTestId('initial-mq');
1818
// map loads at z=2, query matches 0 <= z <= 3
1919
await expect(matchedQueryLayer).not.toHaveAttribute('disabled', '');
2020
});
2121
test(`A visible (enabled) map-layer with no media query should remain enabled \
22-
when a matching mq is added`, async ()=> {
22+
when a matching mq is added`, async () => {
2323
const noInitialQueryLayer = page.getByTestId('no-initial-mq');
24-
await expect(noInitialQueryLayer).not.toHaveAttribute('disabled','');
25-
await viewer.evaluate((v) => v.zoomTo(v.lat,v.lon,4));
24+
await expect(noInitialQueryLayer).not.toHaveAttribute('disabled', '');
25+
await viewer.evaluate((v) => v.zoomTo(v.lat, v.lon, 4));
2626
await page.waitForTimeout(200);
2727
// should still be enabled:
28-
await expect(noInitialQueryLayer).not.toHaveAttribute('disabled','');
28+
await expect(noInitialQueryLayer).not.toHaveAttribute('disabled', '');
2929
});
3030
test(`A visible (enabled) map-layer with no media query should be disabled \
31-
when a non-matching media query attribute is set`, async ()=> {
32-
await expect(viewer).toHaveAttribute('zoom','4');
31+
when a non-matching media query attribute is set`, async () => {
32+
await expect(viewer).toHaveAttribute('zoom', '4');
3333
const presentInLayerControl = await viewer.evaluate((v) => {
3434
let lc = v._layerControl;
3535
let layers = lc._layers.map((e) => e.layer._layerEl);
@@ -38,14 +38,19 @@ when a non-matching media query attribute is set`, async ()=> {
3838
});
3939
expect(presentInLayerControl).toBe(true);
4040
const noInitialQueryLayer = page.getByTestId('no-initial-mq');
41-
await expect(noInitialQueryLayer).not.toHaveAttribute('disabled','');
42-
await noInitialQueryLayer.evaluate((l) => l.media = '(0 <= map-zoom <=3)');
43-
await expect(noInitialQueryLayer).toHaveAttribute('disabled','');
41+
await expect(noInitialQueryLayer).not.toHaveAttribute('disabled', '');
42+
await noInitialQueryLayer.evaluate(
43+
(l) => (l.media = '(0 <= map-zoom <=3)')
44+
);
45+
await expect(noInitialQueryLayer).toHaveAttribute('disabled', '');
4446
});
45-
test(`A mq-disabled layer is removed from the layer control`,async ()=>{
47+
test(`A mq-disabled layer is removed from the layer control`, async () => {
4648
const noInitialQueryLayer = page.getByTestId('no-initial-mq');
47-
await expect(noInitialQueryLayer).toHaveAttribute('media','(0 <= map-zoom <=3)');
48-
await expect(noInitialQueryLayer).toHaveAttribute('disabled','');
49+
await expect(noInitialQueryLayer).toHaveAttribute(
50+
'media',
51+
'(0 <= map-zoom <=3)'
52+
);
53+
await expect(noInitialQueryLayer).toHaveAttribute('disabled', '');
4954
const presentInLayerControl = await viewer.evaluate((v) => {
5055
let lc = v._layerControl;
5156
let layers = lc._layers.map((e) => e.layer._layerEl);
@@ -55,30 +60,31 @@ when a non-matching media query attribute is set`, async ()=> {
5560
expect(presentInLayerControl).toBe(false);
5661
});
5762
test(`A layer disabled due to mq would otherwise be enabled is \
58-
enabled and added to the layer control when mq removed`, async () =>{
63+
enabled and added to the layer control when mq removed`, async () => {
5964
const noInitialQueryLayer = page.getByTestId('no-initial-mq');
60-
await expect(noInitialQueryLayer).toHaveAttribute('media','(0 <= map-zoom <=3)');
61-
await expect(noInitialQueryLayer).toHaveAttribute('disabled','');
65+
await expect(noInitialQueryLayer).toHaveAttribute(
66+
'media',
67+
'(0 <= map-zoom <=3)'
68+
);
69+
await expect(noInitialQueryLayer).toHaveAttribute('disabled', '');
6270
await noInitialQueryLayer.evaluate((l) => l.removeAttribute('media'));
63-
await expect(noInitialQueryLayer).not.toHaveAttribute('disabled','');
71+
await expect(noInitialQueryLayer).not.toHaveAttribute('disabled', '');
6472
const presentInLayerControl = await viewer.evaluate((v) => {
6573
let lc = v._layerControl;
6674
let layers = lc._layers.map((e) => e.layer._layerEl);
6775
let noInitialQueryLayer = v.querySelector('[data-testid=no-initial-mq]');
6876
return layers.some((e) => e === noInitialQueryLayer);
6977
});
7078
expect(presentInLayerControl).toBe(true);
71-
7279
});
73-
test(`An empty media query is the same as no media query`, async () =>{
80+
test(`An empty media query is the same as no media query`, async () => {
7481
const noInitialQueryLayer = page.getByTestId('no-initial-mq');
75-
await noInitialQueryLayer.evaluate((l)=> l.setAttribute('media', ' '));
76-
await expect(noInitialQueryLayer).not.toHaveAttribute('disabled','');
77-
82+
await noInitialQueryLayer.evaluate((l) => l.setAttribute('media', ' '));
83+
await expect(noInitialQueryLayer).not.toHaveAttribute('disabled', '');
7884
});
79-
test(`An invalid media query is the same as a non-matching media query`, async () =>{
85+
test(`An invalid media query is the same as a non-matching media query`, async () => {
8086
const noInitialQueryLayer = page.getByTestId('no-initial-mq');
81-
await noInitialQueryLayer.evaluate((l)=> l.setAttribute('media', '(foo '));
82-
await expect(noInitialQueryLayer).toHaveAttribute('disabled','');
87+
await noInitialQueryLayer.evaluate((l) => l.setAttribute('media', '(foo '));
88+
await expect(noInitialQueryLayer).toHaveAttribute('disabled', '');
8389
});
84-
});
90+
});

‎test/e2e/elements/map-link/map-link-media.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
</head>
105105
<body>
106106

107-
<mapml-viewer projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
107+
<mapml-viewer data-testid="viewer" projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls style="height: 500px;width:500px;">
108108
<map-layer label="Restaurants" checked="">
109109
<map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
110110
<map-extent units="OSMTILE" checked="">
@@ -117,7 +117,7 @@
117117
<map-option value="italian">Italian</map-option>
118118
<map-option value="mexican">Mexican</map-option>
119119
</map-select>
120-
<map-link media="(11 < map-zoom <= 18)" tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
120+
<map-link data-testid="features-link" media="(11 < map-zoom <= 18)" tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
121121
</map-extent>
122122
</map-layer>
123123
</mapml-viewer>

‎test/e2e/elements/map-link/map-link-media.test.js

+16
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
/* to do: test that map-link rel=features is re-enabled when the media attribute
2+
* is removed
3+
*/
4+
15
import { test, expect, chromium } from '@playwright/test';
26

37
test.describe('map-link media attribute', () => {
@@ -98,4 +102,16 @@ test.describe('map-link media attribute', () => {
98102
await expect(layer).not.toHaveAttribute('disabled');
99103
await expect(mapLink).not.toHaveAttribute('disabled');
100104
});
105+
test('map-link rel=features is enabled when non-matching media attribute removed', async () => {
106+
const viewer = page.getByTestId('viewer');
107+
const featuresLink = page.getByTestId('features-link');
108+
await featuresLink.evaluate((l) => (l.media = '(16 < map-zoom <= 18)'));
109+
await expect(featuresLink).toHaveAttribute('disabled');
110+
await featuresLink.evaluate((l) => l.removeAttribute('media'));
111+
await expect(featuresLink).not.toHaveAttribute('disabled');
112+
await page.waitForTimeout(500);
113+
await expect(viewer).toHaveScreenshot('default_styled_markers.png', {
114+
maxDiffPixels: 100
115+
});
116+
});
101117
});

‎test/e2e/elements/map-link/map-link-media.test.js-snapshots/default-styled-markers-linux.png

9.48 KB
Loading

‎test/e2e/elements/map-link/map-link-media.test.js-snapshots/default-styled-markers-win32.png

9.48 KB
Loading

‎test/e2e/elements/map-link/map-link-stylesheet-media.test.js

+17-17
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { test, expect, chromium } from '@playwright/test';
22

3-
test.describe('map-layer media attribute', () => {
3+
test.describe('map-layer rel=stylesheet media attribute', () => {
44
let page;
55
let context;
66
let viewer;
@@ -15,52 +15,52 @@ test.describe('map-layer media attribute', () => {
1515
viewer = page.getByTestId('viewer');
1616
stylesheetLink = page.locator('map-link[rel=stylesheet][href="red.css"]');
1717
});
18-
test(`when a map-link rel=stylesheet disables due to a media query, the styles\
19-
should be removed`,async ()=>{
20-
// map starts off at
18+
test(`when a map-link disables due to a media query, the styles\
19+
should be removed`, async () => {
20+
// map starts off at
2121
await expect(viewer).toHaveScreenshot('red_styled_markers.png', {
2222
maxDiffPixels: 20
2323
});
24-
await stylesheetLink.evaluate((l) => l.media = '(14 < map-zoom <= 18)');
24+
await stylesheetLink.evaluate((l) => (l.media = '(14 < map-zoom <= 18)'));
2525
await page.waitForTimeout(500);
2626
await expect(viewer).toHaveScreenshot('default_styled_markers.png', {
2727
maxDiffPixels: 20
2828
});
2929
});
30-
test(`when a map-link rel=stylesheet enables due to a mq being removed, the \
31-
styles should apply`, async ()=>{
30+
test(`when a map-link enables due to a mq being removed, the \
31+
styles should apply`, async () => {
3232
await stylesheetLink.evaluate((l) => l.removeAttribute('media'));
3333
await expect(viewer).toHaveScreenshot('red_styled_markers.png', {
3434
maxDiffPixels: 20
3535
});
3636
});
37-
38-
test(`when a map-link rel=stylesheet enables due to disabled attribute removed\
39-
ensure styles change`, async ()=>{
40-
await stylesheetLink.evaluate((l) => l.disabled = true);
37+
38+
test(`when a map-link enables due to disabled attribute removed\
39+
ensure styles change`, async () => {
40+
await stylesheetLink.evaluate((l) => (l.disabled = true));
4141
await page.waitForTimeout(500);
4242
await expect(viewer).toHaveScreenshot('default_styled_markers.png', {
4343
maxDiffPixels: 20
4444
});
45-
await stylesheetLink.evaluate((l) => l.disabled = false);
45+
await stylesheetLink.evaluate((l) => (l.disabled = false));
4646
await page.waitForTimeout(500);
4747
await expect(viewer).toHaveScreenshot('red_styled_markers.png', {
4848
maxDiffPixels: 20
4949
});
5050
});
51-
test(`when a map-link rel=stylesheet does not enable due to disabled attribute \
51+
test(`when a map-link does not enable due to disabled attribute \
5252
removed while a non-matching media query is present, ensure that style does not \
53-
change`, async ()=>{
54-
await stylesheetLink.evaluate((l) => l.disabled = true);
53+
change`, async () => {
54+
await stylesheetLink.evaluate((l) => (l.disabled = true));
5555
await page.waitForTimeout(500);
5656
await expect(viewer).toHaveScreenshot('default_styled_markers.png', {
5757
maxDiffPixels: 20
5858
});
5959
// non-matching query (map z=14)
60-
await stylesheetLink.evaluate((l) => l.media = '(14 < map-zoom <= 18)');
60+
await stylesheetLink.evaluate((l) => (l.media = '(14 < map-zoom <= 18)'));
6161
await page.waitForTimeout(500);
6262
// disabled overrides the media query because they compete to change it
63-
await stylesheetLink.evaluate((l) => l.disabled = false);
63+
await stylesheetLink.evaluate((l) => (l.disabled = false));
6464
await page.waitForTimeout(500);
6565
await expect(viewer).toHaveScreenshot('red_styled_markers.png', {
6666
maxDiffPixels: 20

0 commit comments

Comments
 (0)