WIP on map-extent

test/e2e/basics/popup.test.js

@@ -108,6 +108,7 @@ test.describe("Popup test", () => {
         await newPage.keyboard.press("Enter");
 
         const text = await newPage.evaluate(() => navigator.clipboard.readText());
+        await page.pause();
         const coordinates = await newPage.evaluate((t) => {
           let d = document.createElement('div');
           d.insertAdjacentHTML('afterbegin', t);

test/e2e/basics/render.test.js

@@ -15,7 +15,7 @@ test.describe("Render MapML resources test", () => {
         id = background.url().split("/")[2];
         extensionPopup = await context.newPage();
         await extensionPopup.goto('chrome-extension://' + id +'/popup.html', {waitUntil: "load"});
-        await page.goto("https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/?alt=xml");
+        await page.goto("test/e2e/data/cbmt-cbmtile.mapml");
     });
 
     test.afterAll(async () => {
@@ -33,10 +33,10 @@ test.describe("Render MapML resources test", () => {
             map,
             map.getAttribute('lat'),
             map.getAttribute('lon'),
-            map.getAttribute('zoom'),
+            map.getAttribute('zoom')
         ]);
         expect(map).not.toEqual(null);
-        expect(page.url()).toEqual("https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/?alt=xml");
+        expect(page.url()).toEqual("http://localhost:30002/test/e2e/data/cbmt-cbmtile.mapml");
         expect(lat).toEqual('60.27815582468662');
         expect(lon).toEqual('-89.7827040843159');
         expect(zoom).toEqual('3');
@@ -58,7 +58,7 @@ test.describe("Render MapML resources test", () => {
     });
 
     test("Link with hash sets initial location", async () => {
-        await page.goto("https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/?alt=xml#0,-90,45");
+        await page.goto("http://localhost:30002/test/e2e/data/cbmt-cbmtile.mapml#0,-90,45");
         await page.waitForFunction(() => {
             const map = document.querySelector("mapml-viewer");
             if (map && map.getAttribute('lat') !== '0') {
@@ -102,14 +102,14 @@ test.describe("Render MapML resources test", () => {
         await extensionPopup.keyboard.press("Space"); // toggles Render off
         // reload page, should not render
         await page.bringToFront();
-        await page.goto("https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/?alt=xml", {waitUntil: "networkidle"});
+        await page.goto("test/e2e/data/cbmt-cbmtile.mapml", {waitUntil: "networkidle"});
         let map = null;
         try {
           map = await page.$eval("mapml-viewer", (map) => map);
         } catch {};
         // page.$eval throws when it can't find the selector, so map should still be null
         expect(map).toEqual(null);
-        expect(page.url()).toEqual("https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/?alt=xml");
+        expect(page.url()).toEqual("http://localhost:30002/test/e2e/data/cbmt-cbmtile.mapml");
         await extensionPopup.goto('chrome-extension://' + id +'/popup.html', {waitUntil: "load"});
         await extensionPopup.keyboard.press("Tab"); // tab to Render MapML resources toggle
         await extensionPopup.keyboard.press("Space"); // toggles Render on

test/e2e/basics/test.mapml

@@ -1,4 +1,4 @@
-<mapml- xmlns="http://www.w3.org/1999/xhtml/">
+<mapml- xmlns="http://www.w3.org/1999/xhtml">
   <map-head>
     <map-title>Canada Base Map - Transportation (CBMT)</map-title>
     <map-meta http-equiv="Content-Type" content="text/mapml;projection=OSMTILE"></map-meta>

test/e2e/basics/unknown_projection.mapml

@@ -1,4 +1,4 @@
-<mapml- xmlns="http://www.w3.org/1999/xhtml/">
+<mapml- xmlns="http://www.w3.org/1999/xhtml">
   <map-head>
     <map-title>Canada Base Map - Transportation (CBMT)</map-title>
     <map-meta http-equiv="Content-Type" content="text/mapml"></map-meta>

test/e2e/data/cbmt-cbmtile.mapml

@@ -0,0 +1,18 @@
+<mapml- xmlns="http://www.w3.org/1999/xhtml">
+  <map-head>
+    <map-title>Canada Base Map - Transportation (CBMT)</map-title>
+    <map-meta http-equiv="Content-Type" content="application/xml;charset=UTF-8"></map-meta>
+    <map-meta charset="utf-8"></map-meta>
+    <map-base href="/mapml/en/cbmtile/cbmt/"></map-base>
+    <map-link rel="license" href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285" title="Canada Base Map © Natural Resources Canada"></map-link>
+    <map-link rel="zoomin" href="/mapml/en/cbmtile/cbmt/?z=18" type="text/mapml"></map-link> 
+  </map-head>
+  <map-body>
+    <map-extent units="CBMTILE" checked="checked">
+      <map-input name="z" type="zoom" value="17" min="0" max="17"></map-input>
+      <map-input name="y" type="location" units="tilematrix" axis="row" min="29750" max="34475"></map-input>
+      <map-input name="x" type="location" units="tilematrix" axis="column" min="26484" max="32463"></map-input>
+      <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t"></map-link>
+    </map-extent>
+  </map-body>
+</mapml->

test/server.js

@@ -1,15 +1,17 @@
-const http = require("http")
-const fs = require("fs")
-const path = require("path")
+const http = require("http");
+const fs = require("fs");
+const path = require("path");
 
 const server = http.createServer((req, res) => {
   let match = __dirname.match("(\\/|\\\\)test")[0];
   let filePath = path.join(__dirname.replace(match, ""), req.url);
   let isJS = req.url.slice(-2) === "js";
+  let isMapML = req.url.slice(-5) === "mapml";
   if (fs.existsSync(filePath)) {
-    let file = fs.readFileSync(filePath, 'utf-8')
+    let file = fs.readFileSync(filePath, 'utf-8');
     if (isJS) res.setHeader("Content-Type", "text/javascript");
-    res.write(file)
+    else if(isMapML) res.setHeader("Content-Type", "text/mapml");
+    res.write(file);
     console.log(`200 - ${req.url}`);
   } else {
     res.writeHead(404);