-
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.
Layer control on touch device (#771)
* reorder layers, prevent opacity setting showing up * small changes * create a test for touch devices * test for touch devices * small changes in test * format and small edits * continue formatting
- Loading branch information
Showing
3 changed files
with
206 additions
and
133 deletions.
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
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,54 @@ | ||
| import { test, expect, chromium, devices } from '@playwright/test'; | ||
| const device = devices['Pixel 5']; | ||
|
|
||
| test.describe("Playwright touch device tests", () => { | ||
| let page; | ||
| let context; | ||
| test.beforeAll(async () => { | ||
| // the test must be run in headless mode | ||
| // to successfully emulate a touch device with mouse disabled | ||
| context = await chromium.launch(); | ||
| page = await context.newPage({ | ||
| ...device, | ||
| }); | ||
| await page.goto("layerContextMenu.html"); | ||
| }); | ||
|
|
||
| test.afterAll(async function () { | ||
| await context.close(); | ||
| }); | ||
|
|
||
| test("Tap/Long press to show layer control", async () => { | ||
| const layerControl = await page.locator("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div"); | ||
| await layerControl.tap(); | ||
| let className = await layerControl.evaluate( | ||
| (el) => el.classList.contains('leaflet-control-layers-expanded') && el._isExpanded | ||
| ); | ||
| expect(className).toEqual(true); | ||
|
|
||
| // expect the opacity setting not open after the click | ||
| let opacity = await page.$eval( | ||
| "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > div.mapml-layer-item-properties > div > button:nth-child(2)", | ||
| (btn) => btn.getAttribute('aria-expanded') | ||
| ); | ||
| expect(opacity).toEqual("false"); | ||
|
|
||
| // long press | ||
| await page.tap('body > mapml-viewer'); | ||
| await layerControl.dispatchEvent('touchstart'); | ||
| await page.waitForTimeout(2000); | ||
| await layerControl.dispatchEvent('touchend'); | ||
|
|
||
| className = await layerControl.evaluate( | ||
| (el) => el.classList.contains('leaflet-control-layers-expanded') && el._isExpanded | ||
| ); | ||
| expect(className).toEqual(true); | ||
|
|
||
| // expect the layer context menu not show after the long press | ||
| const aHandle = await page.evaluateHandle(() => document.querySelector("mapml-viewer")); | ||
| const nextHandle = await page.evaluateHandle(doc => doc.shadowRoot, aHandle); | ||
| const resultHandle = await page.evaluateHandle(root => root.querySelector(".mapml-contextmenu.mapml-layer-menu"), nextHandle); | ||
| const menuDisplay = await (await page.evaluateHandle(elem => window.getComputedStyle(elem).getPropertyValue("display"), resultHandle)).jsonValue(); | ||
| expect(menuDisplay).toEqual("none"); | ||
| }); | ||
| }) |