diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 5cbcf5577..6e6a1bf47 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -332,7 +332,7 @@ export class MapViewer extends HTMLElement { } } } else if (!this.controls && this._map) { - this._map.contextMenu._items[4].el.el.setAttribute("disabled", ""); + this._map.contextMenu.toggleContextMenuItem("Controls", "disabled"); } } @@ -550,6 +550,32 @@ export class MapViewer extends HTMLElement { this.dispatchEvent(new CustomEvent('zoomend', {detail: {target: this}})); }, this); + this.addEventListener('fullscreenchange', function(event) { + if (document.fullscreenElement === null) { + // full-screen mode has been exited + this._map.contextMenu.setViewFullScreenInnerHTML('view'); + } else { + this._map.contextMenu.setViewFullScreenInnerHTML('exit'); + } + }); + this.addEventListener('keydown', function(event) { + if (document.activeElement.nodeName === "MAPML-VIEWER") { + // Check if Ctrl+R is pressed and map is focused + if (event.ctrlKey && event.keyCode === 82) { + // Prevent default browser behavior + event.preventDefault(); + this.reload(); + } else if (event.altKey && event.keyCode === 39) { + // Prevent default browser behavior + event.preventDefault(); + this.forward(); + } else if (event.altKey && event.keyCode === 37) { + // Prevent default browser behavior + event.preventDefault(); + this.back(); + } + } + }); } _toggleControls() { if (this._map) { @@ -621,16 +647,17 @@ export class MapViewer extends HTMLElement { } if (this._historyIndex === 0) { // when at initial state of map, disable back, forward, and reload items - this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item - this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item + this._reloadButton?.disable(); } else { - this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item - this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "enabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "enabled"); // reload contextmenu item + this._reloadButton?.enable(); } } - /** * Allow user to move back in history */ @@ -639,13 +666,14 @@ export class MapViewer extends HTMLElement { let curr = history[this._historyIndex]; if(this._historyIndex > 0){ - this._map.contextMenu._items[1].el.el.disabled = false; // forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "enabled");// forward contextmenu item this._historyIndex--; let prev = history[this._historyIndex]; // Disable back, reload contextmenu item when at the end of history if (this._historyIndex === 0) { - this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item - this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item + this._reloadButton?.disable(); } if(prev.zoom !== curr.zoom){ @@ -672,13 +700,14 @@ export class MapViewer extends HTMLElement { let history = this._history; let curr = history[this._historyIndex]; if(this._historyIndex < history.length - 1){ - this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item - this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "enabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "enabled"); // reload contextmenu item + this._reloadButton?.enable(); this._historyIndex++; let next = history[this._historyIndex]; // disable forward contextmenu item, when at the end of forward history if (this._historyIndex + 1 === this._history.length) { - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled"); // forward contextmenu item } if(next.zoom !== curr.zoom){ @@ -710,9 +739,10 @@ export class MapViewer extends HTMLElement { y:mapLocation.y, }; - this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item - this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item + this._reloadButton?.disable(); this._history = [initialLocation]; this._historyIndex = 0; @@ -733,6 +763,10 @@ export class MapViewer extends HTMLElement { } } + _toggleFullScreen(){ + this._map.toggleFullscreen(); + } + viewSource(){ let blob = new Blob([this._source],{type:"text/plain"}), url = URL.createObjectURL(blob); diff --git a/src/mapml/control/FullscreenButton.js b/src/mapml/control/FullscreenButton.js index 313e70516..d19ca1242 100644 --- a/src/mapml/control/FullscreenButton.js +++ b/src/mapml/control/FullscreenButton.js @@ -2,8 +2,8 @@ export var FullscreenButton = L.Control.extend({ options: { position: 'topleft', title: { - 'false': 'View fullscreen', - 'true': 'Exit fullscreen' + 'false': 'View Fullscreen', + 'true': 'Exit Fullscreen' } }, diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index 28fddb3f9..fe7cc0706 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -17,17 +17,21 @@ export var ContextMenu = L.Handler.extend({ //setting the items in the context menu and their callback functions this._items = [ { - text: M.options.locale.cmBack + " (B)", + text: M.options.locale.cmBack + " (Alt+Left Arrow)", callback:this._goBack }, { - text: M.options.locale.cmForward + " (F)", + text: M.options.locale.cmForward + " (Alt+Right Arrow)", callback:this._goForward }, { - text: M.options.locale.cmReload + " (R)", + text: M.options.locale.cmReload + " (Ctrl+R)", callback:this._reload }, + { + text: M.options.locale.btnFullScreen + " (F)", + callback:this._toggleFullScreen + }, { spacer:"-" }, @@ -91,7 +95,7 @@ export var ContextMenu = L.Handler.extend({ this._container = L.DomUtil.create("div", "mapml-contextmenu", map._container); this._container.setAttribute('hidden', ''); - for (let i = 0; i < 5; i++) { + for (let i = 0; i < 6; i++) { this._items[i].el = this._createItem(this._container, this._items[i]); } @@ -101,15 +105,15 @@ export var ContextMenu = L.Handler.extend({ this._clickEvent = null; - for(let i =0;iF)"; + } + else if (options === 'exit') { + this._map.contextMenu._items[3].el.el.innerHTML = M.options.locale.btnExitFullScreen + " (F)"; + } } }); diff --git a/src/mapml/options.js b/src/mapml/options.js index 1d66db4ee..85b40cc55 100644 --- a/src/mapml/options.js +++ b/src/mapml/options.js @@ -20,7 +20,8 @@ export var Options = { lcOpacity: "Opacity", btnZoomIn: "Zoom in", btnZoomOut: "Zoom out", - btnFullScreen: "View fullscreen", + btnFullScreen: "View Fullscreen", + btnExitFullScreen: "Exit Fullscreen", amZoom: "zoom level", amColumn: "column", amRow: "row", diff --git a/src/web-map.js b/src/web-map.js index b6f25be6d..e53147aca 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -373,7 +373,7 @@ export class WebMap extends HTMLMapElement { } } }else if (!this.controls && this._map) { - this._map.contextMenu._items[4].el.el.setAttribute("disabled", ""); + this._map.contextMenu.toggleContextMenuItem("Controls", "disabled"); } } attributeChangedCallback(name, oldValue, newValue) { @@ -590,6 +590,32 @@ export class WebMap extends HTMLMapElement { this.dispatchEvent(new CustomEvent('zoomend', {detail: {target: this}})); }, this); + this.addEventListener('fullscreenchange', function(event) { + if (document.fullscreenElement === null) { + // full-screen mode has been exited + this._map.contextMenu.setViewFullScreenInnerHTML('view'); + } else { + this._map.contextMenu.setViewFullScreenInnerHTML('exit'); + } + }); + this.addEventListener('keydown', function(event) { + if (document.activeElement.className === "mapml-web-map") { + // Check if Ctrl+R is pressed and map is focused + if (event.ctrlKey && event.keyCode === 82) { + // Prevent default browser behavior + event.preventDefault(); + this.reload(); + } else if (event.altKey && event.keyCode === 39) { + // Prevent default browser behavior + event.preventDefault(); + this.forward(); + } else if (event.altKey && event.keyCode === 37) { + // Prevent default browser behavior + event.preventDefault(); + this.back(); + } + } + }); } _toggleControls() { if (this._map) { @@ -661,16 +687,17 @@ export class WebMap extends HTMLMapElement { } if (this._historyIndex === 0) { // when at initial state of map, disable back, forward, and reload items - this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item - this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item + this._reloadButton?.disable(); } else { - this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item - this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "enabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "enabled"); // reload contextmenu item + this._reloadButton?.enable(); } } - /** * Allow user to move back in history */ @@ -679,13 +706,14 @@ export class WebMap extends HTMLMapElement { let curr = history[this._historyIndex]; if(this._historyIndex > 0){ - this._map.contextMenu._items[1].el.el.disabled = false; // forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "enabled");// forward contextmenu item this._historyIndex--; let prev = history[this._historyIndex]; // Disable back, reload contextmenu item when at the end of history if (this._historyIndex === 0) { - this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item - this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item + this._reloadButton?.disable(); } if(prev.zoom !== curr.zoom){ @@ -712,13 +740,14 @@ export class WebMap extends HTMLMapElement { let history = this._history; let curr = history[this._historyIndex]; if(this._historyIndex < history.length - 1){ - this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item - this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "enabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "enabled"); // reload contextmenu item + this._reloadButton?.enable(); this._historyIndex++; let next = history[this._historyIndex]; // disable forward contextmenu item, when at the end of forward history if (this._historyIndex + 1 === this._history.length) { - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled"); // forward contextmenu item } if(next.zoom !== curr.zoom){ @@ -750,9 +779,10 @@ export class WebMap extends HTMLMapElement { y:mapLocation.y, }; - this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item - this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item + this._reloadButton?.disable(); this._history = [initialLocation]; this._historyIndex = 0; @@ -773,6 +803,10 @@ export class WebMap extends HTMLMapElement { } } + _toggleFullScreen(){ + this._map.toggleFullscreen(); + } + viewSource(){ let blob = new Blob([this._source],{type:"text/plain"}), url = URL.createObjectURL(blob); diff --git a/test/e2e/core/fullscreenControl.test.js b/test/e2e/core/fullscreenControl.test.js index 393613c27..167bfb3e1 100644 --- a/test/e2e/core/fullscreenControl.test.js +++ b/test/e2e/core/fullscreenControl.test.js @@ -44,6 +44,14 @@ test.describe("Playwright mapml-viewer fullscreen tests", () => { fullscreenElement = await page.evaluate( `document.fullscreenElement.id`); expect(fullscreenElement).toEqual("map2"); }); + + test("Context Menu Fullscreen Button makes the mapml-viewer element fullscreen", async () => { + await page.click("body > #map1"); + await page.keyboard.press("Shift+F10"); + await page.keyboard.press("F"); + let fullscreenElement = await page.evaluate(`document.fullscreenElement.id`); + expect(fullscreenElement).toEqual("map1"); + }); }); test.describe("Playwright mapml-viewer fullscreen tests", () => { @@ -85,4 +93,12 @@ test.describe("Playwright mapml-viewer fullscreen tests", () => { fullscreenElement = await page.evaluate( `document.fullscreenElement.id`); expect(fullscreenElement).toEqual("map2"); }); -}); \ No newline at end of file + + test("Context Menu Fullscreen Button makes the map element fullscreen", async () => { + await page.click("body > #map1"); + await page.keyboard.press("Shift+F10"); + await page.keyboard.press("F"); + let fullscreenElement = await page.evaluate(`document.fullscreenElement.id`); + expect(fullscreenElement).toEqual("map1"); + }); +}); diff --git a/test/e2e/core/mapContextMenu.test.js b/test/e2e/core/mapContextMenu.test.js index 085c42f7d..c8d5cfa8c 100644 --- a/test/e2e/core/mapContextMenu.test.js +++ b/test/e2e/core/mapContextMenu.test.js @@ -57,7 +57,7 @@ test.describe("Playwright Map Context Menu Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("Copy (C)"); + expect(name).toEqual("View Fullscreen (F)"); }); test("Context menu tab goes to next item", async () => { @@ -68,7 +68,7 @@ test.describe("Playwright Map Context Menu Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("Paste (P)"); + expect(name).toEqual("Copy (C)"); }); test("Submenu opens on C with focus on first item", async () => { @@ -173,7 +173,7 @@ test.describe("Playwright Map Context Menu Tests", () => { ); await page.click("body > map", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-of-type(6)"); + await page.click("div > div.mapml-contextmenu > button:nth-of-type(7)"); const controlsOff = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-left", @@ -191,7 +191,7 @@ test.describe("Playwright Map Context Menu Tests", () => { ); await page.click("body > map", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-of-type(6)"); + await page.click("div > div.mapml-contextmenu > button:nth-of-type(7)"); const controlsOff = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-left", @@ -219,9 +219,9 @@ test.describe("Playwright Map Context Menu Tests", () => { expect(valueBefore).toEqual("0.5"); await page.click("body > map", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-child(6)"); await page.click("body > map", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-child(6)"); const valueAfter = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div:nth-child(2) > details > input", @@ -236,6 +236,7 @@ test.describe("Playwright Map Context Menu Tests", () => { await page.reload(); await page.click("body > map"); await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Enter"); @@ -271,6 +272,7 @@ test.describe("Playwright Map Context Menu Tests", () => { ); await page.click("body > map"); await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); @@ -297,6 +299,7 @@ test.describe("Playwright Map Context Menu Tests", () => { await page.keyboard.press("Shift+F10"); await page.keyboard.press("Tab"); await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); @@ -333,6 +336,7 @@ test.describe("Playwright Map Context Menu Tests", () => { await page.keyboard.press("Shift+F10"); await page.keyboard.press("Tab"); await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Tab"); await page.keyboard.press("Tab"); @@ -446,10 +450,10 @@ test.describe("Playwright Map Context Menu Tests", () => { expect(contextMenuSize.x <= mapSize.x && contextMenuSize.y <= mapSize.y).toBeTruthy(); // move the mouse from "copy" to another button in the main contextmenu - await page.hover("div > div.mapml-contextmenu > button:nth-of-type(4)"); + await page.hover("div > div.mapml-contextmenu > button:nth-of-type(5)"); const submenu = await page.locator('div > div#mapml-copy-submenu').first(); expect(await submenu.isVisible()).toBeTruthy(); - await page.hover("div > div.mapml-contextmenu > button:nth-of-type(5)"); + await page.hover("div > div.mapml-contextmenu > button:nth-of-type(6)"); expect(await submenu.isHidden()).toBeTruthy(); }); @@ -534,4 +538,36 @@ test.describe("Playwright Map Context Menu Tests", () => { ); expect(layerCheck).toEqual(false); }); + + test("Checking Context Menu Items Names In Order", async () => { + let back = await page.$eval("div > div.mapml-contextmenu > button:nth-child(1)",(btn) => btn.textContent); + expect(back).toEqual('Back (Alt+Left Arrow)'); + let forward = await page.$eval("div > div.mapml-contextmenu > button:nth-child(2)",(btn) => btn.textContent); + expect(forward).toEqual('Forward (Alt+Right Arrow)'); + let reload = await page.$eval("div > div.mapml-contextmenu > button:nth-child(3)",(btn) => btn.textContent); + expect(reload).toEqual('Reload (Ctrl+R)'); + let fullScreen = await page.$eval("div > div.mapml-contextmenu > button:nth-child(4)",(btn) => btn.textContent); + expect(fullScreen).toEqual('View Fullscreen (F)'); + let copy = await page.$eval("div > div.mapml-contextmenu > button:nth-child(6)",(btn) => btn.textContent); + expect(copy).toEqual('Copy (C)'); + let paste = await page.$eval("div > div.mapml-contextmenu > button:nth-child(8)",(btn) => btn.textContent); + expect(paste).toEqual('Paste (P)'); + let controls = await page.$eval("div > div.mapml-contextmenu > button:nth-child(10)",(btn) => btn.textContent); + expect(controls).toEqual('Toggle Controls (T)'); + let debug = await page.$eval("div > div.mapml-contextmenu > button:nth-child(11)",(btn) => btn.textContent); + expect(debug).toEqual('Toggle Debug Mode (D)'); + let source = await page.$eval("div > div.mapml-contextmenu > button:nth-child(12)",(btn) => btn.textContent); + expect(source).toEqual('View Map Source (V)'); + try { + await page.$eval("div > div.mapml-contextmenu > button:nth-child(13)", (btn) => btn.textContent); + } catch (error) { + expect(error).toHaveProperty('message', 'page.$eval: Error: failed to find element matching selector "div > div.mapml-contextmenu > button:nth-child(13)"'); + } + let copySubMenu1 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(1)",(btn) => btn.textContent); + expect(copySubMenu1).toEqual('Map'); + let copySubMenu2 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(2)",(btn) => btn.textContent); + expect(copySubMenu2).toEqual('Extent'); + let copySubMenu3 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(3)",(btn) => btn.textContent); + expect(copySubMenu3).toEqual('Location'); + }); }); diff --git a/test/e2e/mapml-viewer/mapml-viewer.test.js b/test/e2e/mapml-viewer/mapml-viewer.test.js index baa2fd316..af6f1f1a9 100644 --- a/test/e2e/mapml-viewer/mapml-viewer.test.js +++ b/test/e2e/mapml-viewer/mapml-viewer.test.js @@ -90,9 +90,9 @@ test.describe("Playwright mapml-viewer Element Tests", () => { }); test("Toggle controls, controls aren't re-enabled", async () => { await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-child(6)"); await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-child(6)"); let children = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-left", (div) => div.children), found = false; diff --git a/test/e2e/mapml-viewer/mapml-viewerControls.test.js b/test/e2e/mapml-viewer/mapml-viewerControls.test.js index ea4b28d88..493fab45c 100644 --- a/test/e2e/mapml-viewer/mapml-viewerControls.test.js +++ b/test/e2e/mapml-viewer/mapml-viewerControls.test.js @@ -17,7 +17,7 @@ test.describe("Playwright mapml-viewer Element Controls Test", () => { test("Toggle controls context menu disabled when map created with no controls", async () => { const disabled = await page.$eval( "body > #nocontrols", - (map) => map._map.contextMenu._items[4].el.el.hasAttribute("disabled") + (map) => map._map.contextMenu._items[8].el.el.hasAttribute("disabled") ); expect(disabled).toEqual(true); }); diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js index 320600f91..1b53dc4f0 100644 --- a/test/e2e/mapml-viewer/viewerContextMenu.test.js +++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js @@ -50,7 +50,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("Copy (C)"); + expect(name).toEqual("View Fullscreen (F)"); }); test("Context menu tab goes to next item", async () => { @@ -61,7 +61,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("Paste (P)"); + expect(name).toEqual("Copy (C)"); }); @@ -73,7 +73,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("Copy (C)"); + expect(name).toEqual("View Fullscreen (F)"); }); test("Submenu opens on C with focus on first item", async () => { @@ -178,7 +178,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { ); await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-of-type(6)"); + await page.click("div > div.mapml-contextmenu > button:nth-of-type(7)"); const controlsOff = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-left", @@ -196,7 +196,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { ); await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-of-type(6)"); + await page.click("div > div.mapml-contextmenu > button:nth-of-type(7)"); const controlsOff = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-left", @@ -225,9 +225,9 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { expect(valueBefore).toEqual("0.5"); await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-child(6)"); await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-child(6)"); const valueAfter = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div:nth-child(2) > details > input", @@ -242,6 +242,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { await page.reload(); await page.click("body > mapml-viewer"); await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Enter"); @@ -277,6 +278,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { ); await page.click("body > mapml-viewer"); await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); @@ -303,6 +305,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { await page.keyboard.press("Shift+F10"); await page.keyboard.press("Tab"); await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); @@ -339,6 +342,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { await page.keyboard.press("Shift+F10"); await page.keyboard.press("Tab"); await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Tab"); await page.keyboard.press("Tab"); @@ -420,10 +424,10 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { expect(contextMenuSize.x <= mapSize.x && contextMenuSize.y <= mapSize.y).toBeTruthy(); // move the mouse from "copy" to another button in the main contextmenu - await page.hover("div > div.mapml-contextmenu > button:nth-of-type(4)"); + await page.hover("div > div.mapml-contextmenu > button:nth-of-type(5)"); const submenu = await page.locator('div > div#mapml-copy-submenu').first(); expect(await submenu.isVisible()).toBeTruthy(); - await page.hover("div > div.mapml-contextmenu > button:nth-of-type(5)"); + await page.hover("div > div.mapml-contextmenu > button:nth-of-type(6)"); expect(await submenu.isHidden()).toBeTruthy(); }); @@ -475,5 +479,37 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { ); expect(layerCheck).toEqual(false); }); + + test("Checking Context Menu Items Names In Order", async () => { + let back = await page.$eval("div > div.mapml-contextmenu > button:nth-child(1)",(btn) => btn.textContent); + expect(back).toEqual('Back (Alt+Left Arrow)'); + let forward = await page.$eval("div > div.mapml-contextmenu > button:nth-child(2)",(btn) => btn.textContent); + expect(forward).toEqual('Forward (Alt+Right Arrow)'); + let reload = await page.$eval("div > div.mapml-contextmenu > button:nth-child(3)",(btn) => btn.textContent); + expect(reload).toEqual('Reload (Ctrl+R)'); + let fullScreen = await page.$eval("div > div.mapml-contextmenu > button:nth-child(4)",(btn) => btn.textContent); + expect(fullScreen).toEqual('View Fullscreen (F)'); + let copy = await page.$eval("div > div.mapml-contextmenu > button:nth-child(6)",(btn) => btn.textContent); + expect(copy).toEqual('Copy (C)'); + let paste = await page.$eval("div > div.mapml-contextmenu > button:nth-child(8)",(btn) => btn.textContent); + expect(paste).toEqual('Paste (P)'); + let controls = await page.$eval("div > div.mapml-contextmenu > button:nth-child(10)",(btn) => btn.textContent); + expect(controls).toEqual('Toggle Controls (T)'); + let debug = await page.$eval("div > div.mapml-contextmenu > button:nth-child(11)",(btn) => btn.textContent); + expect(debug).toEqual('Toggle Debug Mode (D)'); + let source = await page.$eval("div > div.mapml-contextmenu > button:nth-child(12)",(btn) => btn.textContent); + expect(source).toEqual('View Map Source (V)'); + try { + await page.$eval("div > div.mapml-contextmenu > button:nth-child(13)", (btn) => btn.textContent); + } catch (error) { + expect(error).toHaveProperty('message', 'page.$eval: Error: failed to find element matching selector "div > div.mapml-contextmenu > button:nth-child(13)"'); + } + let copySubMenu1 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(1)",(btn) => btn.textContent); + expect(copySubMenu1).toEqual('Map'); + let copySubMenu2 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(2)",(btn) => btn.textContent); + expect(copySubMenu2).toEqual('Extent'); + let copySubMenu3 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(3)",(btn) => btn.textContent); + expect(copySubMenu3).toEqual('Location'); + }); }); diff --git a/test/e2e/web-map/mapControls.test.js b/test/e2e/web-map/mapControls.test.js index 17c753122..238ebc158 100644 --- a/test/e2e/web-map/mapControls.test.js +++ b/test/e2e/web-map/mapControls.test.js @@ -17,7 +17,7 @@ test.describe("Playwright web-map Element Controls Test", () => { test("Toggle controls context menu disabled when map created with no controls", async () => { const disabled = await page.$eval( "body > map", - (map) => map._map.contextMenu._items[4].el.el.hasAttribute("disabled") + (map) => map._map.contextMenu._items[8].el.el.hasAttribute("disabled") ); expect(disabled).toEqual(true); });