diff --git a/package-lock.json b/package-lock.json index 677b8f3..157c7f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,114 +9,102 @@ "version": "1.0.0", "license": "W3C", "devDependencies": { - "@playwright/test": "^1.24.2", - "playwright": "^1.24.2" + "@playwright/test": "^1.39.0", + "playwright": "^1.39.0" } }, "node_modules/@playwright/test": { - "version": "1.24.2", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.24.2.tgz", - "integrity": "sha512-Q4X224pRHw4Dtkk5PoNJplZCokLNvVbXD9wDQEMrHcEuvWpJWEQDeJ9gEwkZ3iCWSFSWBshIX177B231XW4wOQ==", + "version": "1.42.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.1.tgz", + "integrity": "sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==", "dev": true, "dependencies": { - "@types/node": "*", - "playwright-core": "1.24.2" + "playwright": "1.42.1" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=14" + "node": ">=16" } }, - "node_modules/@playwright/test/node_modules/playwright-core": { - "version": "1.24.2", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.24.2.tgz", - "integrity": "sha512-zfAoDoPY/0sDLsgSgLZwWmSCevIg1ym7CppBwllguVBNiHeixZkc1AdMuYUPZC6AdEYc4CxWEyLMBTw2YcmRrA==", + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", "dev": true, - "bin": { - "playwright": "cli.js" - }, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], "engines": { - "node": ">=14" + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, - "node_modules/@types/node": { - "version": "18.6.3", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.6.3.tgz", - "integrity": "sha512-6qKpDtoaYLM+5+AFChLhHermMQxc3TOEFIDzrZLPRGHPrLEwqFkkT5Kx3ju05g6X7uDPazz3jHbKPX0KzCjntg==", - "dev": true - }, "node_modules/playwright": { - "version": "1.24.2", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.24.2.tgz", - "integrity": "sha512-iMWDLgaFRT+7dXsNeYwgl8nhLHsUrzFyaRVC+ftr++P1dVs70mPrFKBZrGp1fOKigHV9d1syC03IpPbqLKlPsg==", + "version": "1.42.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.1.tgz", + "integrity": "sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==", "dev": true, - "hasInstallScript": true, "dependencies": { - "playwright-core": "1.24.2" + "playwright-core": "1.42.1" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=14" + "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" } }, - "node_modules/playwright/node_modules/playwright-core": { - "version": "1.24.2", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.24.2.tgz", - "integrity": "sha512-zfAoDoPY/0sDLsgSgLZwWmSCevIg1ym7CppBwllguVBNiHeixZkc1AdMuYUPZC6AdEYc4CxWEyLMBTw2YcmRrA==", + "node_modules/playwright-core": { + "version": "1.42.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.1.tgz", + "integrity": "sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==", "dev": true, "bin": { - "playwright": "cli.js" + "playwright-core": "cli.js" }, "engines": { - "node": ">=14" + "node": ">=16" } } }, "dependencies": { "@playwright/test": { - "version": "1.24.2", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.24.2.tgz", - "integrity": "sha512-Q4X224pRHw4Dtkk5PoNJplZCokLNvVbXD9wDQEMrHcEuvWpJWEQDeJ9gEwkZ3iCWSFSWBshIX177B231XW4wOQ==", + "version": "1.42.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.1.tgz", + "integrity": "sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==", "dev": true, "requires": { - "@types/node": "*", - "playwright-core": "1.24.2" - }, - "dependencies": { - "playwright-core": { - "version": "1.24.2", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.24.2.tgz", - "integrity": "sha512-zfAoDoPY/0sDLsgSgLZwWmSCevIg1ym7CppBwllguVBNiHeixZkc1AdMuYUPZC6AdEYc4CxWEyLMBTw2YcmRrA==", - "dev": true - } + "playwright": "1.42.1" } }, - "@types/node": { - "version": "18.6.3", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.6.3.tgz", - "integrity": "sha512-6qKpDtoaYLM+5+AFChLhHermMQxc3TOEFIDzrZLPRGHPrLEwqFkkT5Kx3ju05g6X7uDPazz3jHbKPX0KzCjntg==", - "dev": true + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "optional": true }, "playwright": { - "version": "1.24.2", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.24.2.tgz", - "integrity": "sha512-iMWDLgaFRT+7dXsNeYwgl8nhLHsUrzFyaRVC+ftr++P1dVs70mPrFKBZrGp1fOKigHV9d1syC03IpPbqLKlPsg==", + "version": "1.42.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.1.tgz", + "integrity": "sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==", "dev": true, "requires": { - "playwright-core": "1.24.2" - }, - "dependencies": { - "playwright-core": { - "version": "1.24.2", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.24.2.tgz", - "integrity": "sha512-zfAoDoPY/0sDLsgSgLZwWmSCevIg1ym7CppBwllguVBNiHeixZkc1AdMuYUPZC6AdEYc4CxWEyLMBTw2YcmRrA==", - "dev": true - } + "fsevents": "2.3.2", + "playwright-core": "1.42.1" } + }, + "playwright-core": { + "version": "1.42.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.1.tgz", + "integrity": "sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==", + "dev": true } } } diff --git a/package.json b/package.json index 1db417f..fc27be7 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ }, "license": "W3C", "devDependencies": { - "@playwright/test": "^1.24.2", - "playwright": "^1.24.2" + "@playwright/test": "^1.39.0", + "playwright": "^1.39.0" } } diff --git a/src/dist/map-select.js b/src/dist/map-select.js index 53a639a..3d888e2 100644 --- a/src/dist/map-select.js +++ b/src/dist/map-select.js @@ -1,4 +1,4 @@ -/*! @maps4html/web-map-custom-element 23-03-2024 */ +/*! @maps4html/web-map-custom-element 26-03-2024 */ class MapSelect extends HTMLElement{static get observedAttributes(){return["name","id"]}get name(){return this.getAttribute("name")}set name(e){this.setAttribute("name",e)}get id(){return this.getAttribute("id")}set id(e){this.setAttribute("id",e)}attributeChangedCallback(e,t,r){e}constructor(){super()}connectedCallback(){this._extentEl=this.parentElement,this._createLayerControlForSelect()}disconnectedCallback(){}_createLayerControlForSelect(){this.htmlselect=this.transcribe();var e=L.DomUtil.create("details","mapml-layer-item-details mapml-control-layers"),t=L.DomUtil.create("summary"),r=L.DomUtil.create("label");r.innerText=this.getAttribute("name"),r.setAttribute("for",this.getAttribute("id")),t.appendChild(r),e.appendChild(t),e.appendChild(this.htmlselect),this.selectdetails=e;e=function(){this.parentElement._extentLayer.redraw()}.bind(this);this.htmlselect.addEventListener("change",e)}transcribe(){var r=document.createElement("select"),t=this.getAttributeNames();for(let e=0;e{let i,a;this.selectdetails?t():(i=setInterval(function(e){e.selectdetails?(clearInterval(i),clearTimeout(a),t()):e.isConnected||(clearInterval(i),clearTimeout(a),r("map-select was disconnected while waiting to be ready"))},300,this),a=setTimeout(function(){clearInterval(i),clearTimeout(a),r("Timeout reached waiting for map-select to be ready")},1e4))})}}export{MapSelect}; //# sourceMappingURL=map-select.js.map \ No newline at end of file diff --git a/src/dist/map-style.js b/src/dist/map-style.js index 1d176e0..e54b766 100644 --- a/src/dist/map-style.js +++ b/src/dist/map-style.js @@ -1,4 +1,4 @@ -/*! @maps4html/web-map-custom-element 23-03-2024 */ +/*! @maps4html/web-map-custom-element 26-03-2024 */ class MapStyle extends HTMLElement{static get observedAttributes(){}attributeChangedCallback(t,e,s){}constructor(){super()}connectedCallback(){var t,e;this._stylesheetHost=this.getRootNode()instanceof ShadowRoot?this.getRootNode().host:this.parentElement,void 0!==this._stylesheetHost&&(this.styleElement=document.createElement("style"),(this.styleElement.mapStyle=this).styleElement.textContent=this.textContent,e=(t=this).styleElement,Array.from(t.attributes).forEach(t=>{e.setAttribute(t.nodeName,t.nodeValue)}),this._stylesheetHost._layer?this._stylesheetHost._layer.appendStyleElement(this):this._stylesheetHost._templatedLayer?this._stylesheetHost._templatedLayer.appendStyleElement(this):this._stylesheetHost._extentLayer&&this._stylesheetHost._extentLayer.appendStyleElement(this))}disconnectedCallback(){this._stylesheetHost&&this.styleElement.remove()}}export{MapStyle}; //# sourceMappingURL=map-style.js.map \ No newline at end of file diff --git a/test/e2e/basics/popup.test.js b/test/e2e/basics/popup.test.js index 275884b..0285394 100644 --- a/test/e2e/basics/popup.test.js +++ b/test/e2e/basics/popup.test.js @@ -37,25 +37,22 @@ test.describe("Popup test", () => { await newPage.keyboard.press("ArrowUp"); await newPage.waitForTimeout(1000); - const featureIndexOverlay = await newPage.$eval( - "xpath=//html/body/mapml-viewer >> css=div", - (div) => div.querySelector("output.mapml-feature-index") - ); + const featureIndexOverlayOutput = newPage.locator('.mapml-feature-index'); + const featureIndexOverlay = await featureIndexOverlayOutput.evaluate((output) => output.textContent); + expect(featureIndexOverlay).not.toEqual(null); - const announceZoom = await newPage.$eval( - "xpath=//html/body/mapml-viewer >> css=div > output", - (output) => output.textContent + const announceZoomOutput = newPage.locator('.mapml-screen-reader-output'); + const announceZoom = await announceZoomOutput.evaluate((output) => output.textContent ); - - const announceScale = await newPage.$eval( - "xpath=//html/body/mapml-viewer >> css=div > output:nth-child(7)", + expect(announceZoom).toEqual("zoom level 2"); + + const scaleBarOutput = await newPage.locator('.mapml-screen-reader-output-scale'); + const announceScale = await scaleBarOutput.evaluate( (output) => output.textContent ); + expect(announceScale).toEqual("2 centimeters to 1000 kilometers"); await newPage.close(); - expect(featureIndexOverlay).not.toEqual(null); - expect(announceZoom).toEqual("zoom level 2"); - expect(announceScale).toEqual("2 centimeters to 1000 kilometers"); }); test("Turn off options", async () => { @@ -66,26 +63,23 @@ test.describe("Popup test", () => { await page.waitForTimeout(1000); let newPage = await context.newPage(); await newPage.goto("test/e2e/basics/locale.html", { waitUntil: "domcontentloaded" }); + await newPage.waitForTimeout(500); await newPage.keyboard.press("Tab"); await newPage.waitForTimeout(500); await newPage.keyboard.press("ArrowUp"); await newPage.waitForTimeout(1000); - const featureIndexOverlay = await newPage.$eval( - "xpath=//html/body/mapml-viewer >> css=div", - (div) => div.querySelector("output.mapml-feature-index") - ); + const viewer = newPage.locator('mapml-viewer'); + + const featureIndexOverlayOutputExists = await viewer.evaluate((viewer) => viewer.shadowRoot.querySelector('.mapml-feature-index') !== null); + expect(featureIndexOverlayOutputExists).toBe(false); - const output = await newPage.$eval( - "xpath=//html/body/mapml-viewer >> css=div > output", - (output) => output.textContent - ); + const announceZoomOutput = newPage.locator('.mapml-screen-reader-output'); + const announceZoomOutputContentExists = await announceZoomOutput.evaluate((output) => output.textContent !== ""); + expect(announceZoomOutputContentExists).toBe(false); await newPage.goto("https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/?alt=xml", { waitUntil: "domcontentloaded" }); const map = await page.$("xpath=//html/body/mapml-viewer"); - - expect(featureIndexOverlay).toEqual(null); - expect(output).toEqual(""); expect(map).toEqual(null); }); @@ -136,5 +130,5 @@ test.describe("Popup test", () => { let text = await newPage.evaluate(() => navigator.clipboard.readText()); let expected = ``; expect(text).toEqual(expected); - }) + }); }); diff --git a/test/e2e/basics/preferred-content.html b/test/e2e/basics/preferred-content.html new file mode 100644 index 0000000..1d2b840 --- /dev/null +++ b/test/e2e/basics/preferred-content.html @@ -0,0 +1,14 @@ + + + + + + Preferred Content Test + + + + + + + + diff --git a/test/e2e/basics/preferred-content.test.js b/test/e2e/basics/preferred-content.test.js new file mode 100644 index 0000000..36f6635 --- /dev/null +++ b/test/e2e/basics/preferred-content.test.js @@ -0,0 +1,59 @@ +import { test, expect, chromium } from '@playwright/test'; + +test.describe("Preferred content test", () => { + let page; + let context; + test.beforeAll(async () => { + context = await chromium.launchPersistentContext(''); + page = context.pages().find((page) => page.url() === 'about:blank') || await context.newPage(); + + let [background] = context.serviceWorkers(); + if (!background) + background = await context.waitForEvent("serviceworker"); + + const id = background.url().split("/")[2]; + await page.goto('chrome-extension://' + id +'/popup.html'); + }); + + test.afterAll(async () => { + await context.close(); + }); + + test("Default map content type preference", async ()=>{ + let newPage = await context.newPage(); + await newPage.goto("test/e2e/basics/preferred-content.html", { waitUntil: "domcontentloaded" }); + await newPage.waitForTimeout(500); + + const layer = newPage.getByTestId('test-layer'); + const label = await layer.evaluate((l) => l._layerControlLabel.textContent); + expect(label).toEqual('Image content'); + + await newPage.close(); + }); + + test("User prefers feature content type", async () => { + // "page" is the extension popup, hasn't been closed so still open in a + // browser tab somewhere... + await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); // tab to the content preference select + await page.keyboard.press("ArrowDown"); + await page.keyboard.press("ArrowDown"); + await page.keyboard.press("ArrowDown"); // features is third in the list + + // "newPage" is the user / test page + + let newPage = await context.newPage(); + await newPage.goto("test/e2e/basics/preferred-content.html", { waitUntil: "domcontentloaded" }); + await newPage.waitForTimeout(1000); + + const layer = newPage.getByTestId('test-layer'); + const label = await layer.evaluate((l) => l._layerControlLabel.textContent); + expect(label).toEqual('Feature content'); + }); + +}); diff --git a/test/e2e/data/canada.xml b/test/e2e/data/canada.xml new file mode 100644 index 0000000..6ecf887 --- /dev/null +++ b/test/e2e/data/canada.xml @@ -0,0 +1,57 @@ + + + Feature content + + + + + + + + Prince Edward Island + + + + 2449821.43896854 366379.46097068 2442414.76407103 347935.37295843 2429008.66775262 341576.26718604 2434529.55653953 326107.63082004 2425948.85487611 317008.42818425 2432802.09121813 311233.34654528 2434380.07172744 317194.67476854 2436279.09519118 302565.92521743 2442807.17567283 303666.01553768 2425428.14805721 286873.16490034 2400266.51110108 286059.60515179 2407147.15605678 301176.25695891 2401651.93807997 296159.76971221 2396930.98168555 303409.29395984 2383661.62000775 299690.40406203 2381389.73047089 285915.6739299 2344475.79143724 280668.22217108 2332461.7556885 284244.90534316 2333188.97158437 293986.33766203 2306394.24383135 280417.84034722 2298308.45483746 306828.22188014 2298404.50192555 299495.5847231 2278220.40816281 292704.68733105 2271585.98107574 300672.20598614 2281345.1381442 350905.46599327 2292168.6437689 333771.07808429 2288698.77748972 319927.37115947 2317677.48425434 309052.67895059 2323033.70783472 295764.0187445 2333282.14389425 299131.42427262 2329563.69420097 313909.10022578 2388005.97280111 318396.3218642 2380733.51665961 322234.88269446 2411709.98575929 339363.61445009 2400163.84008465 336619.62964973 2405588.9516439 342674.34994385 2449821.43896854 366379.46097068 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Property nameProperty value
PRUID11
PRNAMEPrince Edward Island / Île-du-Prince-Édouard
PRENAMEPrince Edward Island
PRFNAMEÎle-du-Prince-Édouard
PREABBRP.E.I.
PRFABBRÎ.-P.-É.
+ + + + diff --git a/test/e2e/data/cbmt-cbmtile.mapml b/test/e2e/data/cbmt-cbmtile.mapml index ac4415e..d43281f 100644 --- a/test/e2e/data/cbmt-cbmtile.mapml +++ b/test/e2e/data/cbmt-cbmtile.mapml @@ -1,11 +1,11 @@ - Canada Base Map - Transportation (CBMT) + Image content - - + + diff --git a/test/e2e/data/features.mapml b/test/e2e/data/features.mapml new file mode 100644 index 0000000..5cfeed8 --- /dev/null +++ b/test/e2e/data/features.mapml @@ -0,0 +1,20 @@ + + + Feature content + + + + + + + + + + + + + + + + +