-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Get link in templated feature working. Update
existing test to pass. Add test. Closes #967
- Loading branch information
1 parent
b1a79c9
commit 11fef91
Showing
7 changed files
with
257 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
75 changes: 75 additions & 0 deletions
75
test/e2e/elements/map-a/map-a-inline-or-remote-templated-issue-968.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import { test, expect, chromium } from '@playwright/test'; | ||
|
|
||
| test.describe('map-a loaded inline or remote, directly or via templated map-link tests', () => { | ||
| let page; | ||
| let context; | ||
| test.beforeAll(async function () { | ||
| context = await chromium.launchPersistentContext(''); | ||
| page = | ||
| context.pages().find((page) => page.url() === 'about:blank') || | ||
| (await context.newPage()); | ||
| await page.goto('map-a.html'); | ||
| }); | ||
|
|
||
| const contentLocations = ['inline', 'remote']; | ||
| for (const inlineOrRemote of contentLocations) { | ||
| test(`${inlineOrRemote} map-a-wrapped-map-geometry loaded directly creates a hyperlink`, async () => { | ||
| const directlyLoadedFeaturesLayer = await page.getByTestId( | ||
| `${inlineOrRemote}-features` | ||
| ); | ||
| const directlyLoadedFeaturesCount = | ||
| await directlyLoadedFeaturesLayer.evaluate((l) => { | ||
| let node = l.hasAttribute('src') ? l.shadowRoot : l; | ||
| return node.querySelectorAll('map-feature').length; | ||
| }); | ||
| expect(directlyLoadedFeaturesCount).toBe(2); | ||
| // one of them contains a map-a wrapping its map-geometry | ||
| const directlyLoadedHyperlinksCount = | ||
| await directlyLoadedFeaturesLayer.evaluate((l) => { | ||
| let node = l.hasAttribute('src') ? l.shadowRoot : l; | ||
| return node.querySelectorAll('map-feature:has(map-a)').length; | ||
| }); | ||
| expect(directlyLoadedHyperlinksCount).toBe(1); | ||
| // all features should have a _groupEl prop (i.e. all features are rendered) | ||
| const directlyLoadedFeaturesRenderedCount = | ||
| await directlyLoadedFeaturesLayer.evaluate((l) => { | ||
| let node = l.hasAttribute('src') ? l.shadowRoot : l; | ||
| const hasRendering = (f) => Boolean(f._groupEl); | ||
| return Array.from(node.querySelectorAll('map-feature')).filter( | ||
| hasRendering | ||
| ).length; | ||
| }); | ||
| expect(directlyLoadedFeaturesRenderedCount).toEqual( | ||
| directlyLoadedFeaturesCount | ||
| ); | ||
| }); | ||
| test(`${inlineOrRemote} map-a-wrapped-map-geometry loaded via templated map-link creates a hyperlink`, async () => { | ||
| await page.waitForTimeout(500); | ||
| const templatedLoadedFeaturesContainer = await page.getByTestId( | ||
| `${inlineOrRemote}-templated-link` | ||
| ); | ||
| const templatedLoadedFeaturesCount = | ||
| await templatedLoadedFeaturesContainer.evaluate((l) => { | ||
| return l.shadowRoot.querySelectorAll('map-feature').length; | ||
| }); | ||
| expect(templatedLoadedFeaturesCount).toBe(2); | ||
| // one of them contains a map-a wrapping its map-geometry | ||
| const templatedLoadedHyperlinksCount = | ||
| await templatedLoadedFeaturesContainer.evaluate((l) => { | ||
| return l.shadowRoot.querySelectorAll('map-feature:has(map-a)').length; | ||
| }); | ||
| expect(templatedLoadedHyperlinksCount).toBe(1); | ||
| // all features should have a _groupEl prop (i.e. all features are rendered) | ||
| const templatedLoadedFeaturesRenderedCount = | ||
| await templatedLoadedFeaturesContainer.evaluate((l) => { | ||
| const hasRendering = (f) => Boolean(f._groupEl); | ||
| return Array.from( | ||
| l.shadowRoot.querySelectorAll('map-feature') | ||
| ).filter(hasRendering).length; | ||
| }); | ||
| expect(templatedLoadedFeaturesRenderedCount).toEqual( | ||
| templatedLoadedFeaturesCount | ||
| ); | ||
| }); | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>Remote layer with map-link rel=features</title> | ||
| <meta charset="UTF-8"> | ||
| <script type="module" src="mapml-viewer.js"></script> | ||
| <style> | ||
| html { | ||
| height: 100% | ||
| } | ||
|
|
||
| body { | ||
| height: inherit | ||
| } | ||
|
|
||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <mapml-viewer projection="OSMTILE" data-testid="viewer" style="height: 500px;width:500px;" controls zoom="18" lat="40.7075" lon="-74.011" > | ||
| <layer- data-testid="inline-features" label="inline-features" checked> | ||
| <map-meta name="projection" content="OSMTILE"></map-meta> | ||
| <map-meta name="cs" content="pcrs"></map-meta> | ||
| <map-meta name="extent" content="top-left-easting=-8238959.40,top-left-northing=4971112.17,bottom-right-easting=-8237812.69,bottom-right-northing=4969300.12"></map-meta> | ||
| <map-style>.poi-r1-s1.poi-r1-s2 {opacity:1.0; fill:rebeccapurple; stroke:rebeccapurple; fill-opacity:0.7}</map-style> | ||
| <map-feature id="poi.2" class="poi-r1-s1 poi-r1-s2"> | ||
| <map-geometry> | ||
| <map-point> | ||
| <map-coordinates>-8238848.744948964 4969300.121476209</map-coordinates> | ||
| </map-point> | ||
| </map-geometry> | ||
| <map-properties> | ||
| <table xmlns="http://www.w3.org/1999/xhtml"> | ||
| <thead> | ||
| <tr> | ||
| <th role="columnheader" scope="col">Property name</th> | ||
| <th role="columnheader" scope="col">Property value</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <th scope="row">MAINPAGE</th> | ||
| <td itemprop="MAINPAGE">pics/22037829-L.jpg</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </map-properties> | ||
| </map-feature> | ||
| <map-feature id="poi.1" class="poi-r1-s1 poi-r1-s2"> | ||
| <map-geometry> | ||
| <map-a href="https://example.org/" target="_top"> | ||
| <map-point> | ||
| <map-coordinates>-8238806.8429565085 4969306.111096254</map-coordinates> | ||
| </map-point> | ||
| </map-a> | ||
| </map-geometry> | ||
| <map-properties> | ||
| <table xmlns="http://www.w3.org/1999/xhtml"> | ||
| <thead> | ||
| <tr> | ||
| <th role="columnheader" scope="col">Property name</th> | ||
| <th role="columnheader" scope="col">Property value</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <th scope="row">MAINPAGE</th> | ||
| <td itemprop="MAINPAGE">pics/22037827-L.jpg</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </map-properties> | ||
| </map-feature> | ||
| </layer-> | ||
| <layer- data-testid="remote-features" label="remote-features.mapml" src="remote-features.mapml" checked></layer-> | ||
| <layer- data-testid="inline-templated" label="inline-rel-features" checked> | ||
| <map-meta name="projection" content="OSMTILE"></map-meta> | ||
| <map-meta name="cs" content="pcrs"></map-meta> | ||
| <map-meta name="extent" content="top-left-easting=-8238959.40,top-left-northing=4971112.17,bottom-right-easting=-8237812.69,bottom-right-northing=4969300.12"></map-meta> | ||
| <map-extent units="OSMTILE" checked="checked" hidden="hidden"> | ||
| <map-style>.poi-r1-s1.poi-r1-s2 {opacity:1.0; fill:green; stroke:green; fill-opacity:0.7}</map-style> | ||
| <map-input name="z" type="zoom" min="0" max="18" ></map-input> | ||
| <map-input name="xmin" type="location" rel="map" position="top-left" axis="easting" units="pcrs" ></map-input> | ||
| <map-input name="ymin" type="location" rel="map" position="bottom-left" axis="northing" units="pcrs"></map-input> | ||
| <map-input name="xmax" type="location" rel="map" position="top-right" axis="easting" units="pcrs"></map-input> | ||
| <map-input name="ymax" type="location" rel="map" position="top-left" axis="northing" units="pcrs"></map-input> | ||
| <map-input name="w" type="width" min="1" max="4096" ></map-input> | ||
| <map-input name="h" type="height" min="1" max="4096" ></map-input> | ||
| <map-link data-testid="inline-templated-link" rel="features" tref="./remote-features.mapml?format_options=mapmlfeatures:true&request=GetMap&crs=MapML:OSMTILE&bbox={xmin},{ymin},{xmax},{ymax}&format=text/mapml&language=en&version=1.3.0&transparent=true&service=WMS&layers=poi&width={w}&styles=poi&height={h}"></map-link> | ||
| </map-extent> | ||
| </layer-> | ||
| <layer- data-testid="remote-templated" src="remote-rel-features.mapml" checked ></layer-> | ||
| </mapml-viewer> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| <mapml- xmlns="http://www.w3.org/1999/xhtml"> | ||
| <map-head> | ||
| <map-title>remote-features.mapml</map-title> | ||
| <map-meta charset="UTF-8"/> | ||
| <map-meta content="text/mapml" http-equiv="Content-Type"/> | ||
| <map-meta name="projection" content="OSMTILE"/> | ||
| <map-meta name="cs" content="pcrs"/> | ||
| <map-meta name="extent" content="top-left-easting=-8238959.40,top-left-northing=4971112.17,bottom-right-easting=-8237812.69,bottom-right-northing=4969300.12"/> | ||
| <map-style>.poi-r1-s1.poi-r1-s2 {opacity:1.0; fill:red; stroke:red; fill-opacity:0.7}</map-style> | ||
| </map-head> | ||
| <map-body> | ||
| <map-feature id="poi.2" class="poi-r1-s1 poi-r1-s2"> | ||
| <map-geometry> | ||
| <map-point> | ||
| <map-coordinates>-8238848.744948964 4969300.121476209</map-coordinates> | ||
| </map-point> | ||
| </map-geometry> | ||
| <map-properties> | ||
| <table xmlns="http://www.w3.org/1999/xhtml"> | ||
| <thead> | ||
| <tr> | ||
| <th role="columnheader" scope="col">Property name</th> | ||
| <th role="columnheader" scope="col">Property value</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <th scope="row">MAINPAGE</th> | ||
| <td itemprop="MAINPAGE">pics/22037829-L.jpg</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </map-properties> | ||
| </map-feature> | ||
| <map-feature id="poi.1" class="poi-r1-s1 poi-r1-s2"> | ||
| <map-geometry> | ||
| <map-a href="https://example.org/" target="_top"> | ||
| <map-point> | ||
| <map-coordinates>-8238806.8429565085 4969306.111096254</map-coordinates> | ||
| </map-point> | ||
| </map-a> | ||
| </map-geometry> | ||
| <map-properties> | ||
| <table xmlns="http://www.w3.org/1999/xhtml"> | ||
| <thead> | ||
| <tr> | ||
| <th role="columnheader" scope="col">Property name</th> | ||
| <th role="columnheader" scope="col">Property value</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <th scope="row">MAINPAGE</th> | ||
| <td itemprop="MAINPAGE">pics/22037827-L.jpg</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </map-properties> | ||
| </map-feature> | ||
| </map-body> | ||
| </mapml-> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <mapml- xmlns="http://www.w3.org/1999/xhtml"> | ||
| <map-head> | ||
| <map-title>remote-rel-features.mapml</map-title> | ||
| <map-meta charset="utf-8" /> | ||
| <map-style>.poi-r1-s1.poi-r1-s2 {opacity:1.0; fill:blue; stroke:blue; fill-opacity:0.7}</map-style> | ||
| <map-meta name="extent" content="top-left-easting=-8238908, top-left-northing=4969383, bottom-right-easting=-8238758, bottom-right-northing=4969234"></map-meta> | ||
| </map-head> | ||
| <map-body> | ||
| <map-extent units="OSMTILE" checked="checked" hidden="hidden"> | ||
| <map-input name="z" type="zoom" min="0" max="18" /> | ||
| <map-input name="xmin" type="location" rel="map" position="top-left" axis="easting" units="pcrs" /> | ||
| <map-input name="ymin" type="location" rel="map" position="bottom-left" axis="northing" units="pcrs" /> | ||
| <map-input name="xmax" type="location" rel="map" position="top-right" axis="easting" units="pcrs" /> | ||
| <map-input name="ymax" type="location" rel="map" position="top-left" axis="northing" units="pcrs" /> | ||
| <map-input name="w" type="width" min="1" max="4096" /> | ||
| <map-input name="h" type="height" min="1" max="4096" /> | ||
| <map-link data-testid="remote-templated-link" rel="features" tref="./remote-features.mapml?format_options=mapmlfeatures:true&request=GetMap&crs=MapML:OSMTILE&bbox={xmin},{ymin},{xmax},{ymax}&format=text/mapml&language=en&version=1.3.0&transparent=true&service=WMS&layers=poi&width={w}&styles=poi&height={h}"></map-link> | ||
| </map-extent> | ||
| </map-body> | ||
| </mapml-> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters