|
| 1 | +import { test, expect, chromium } from '@playwright/test'; |
| 2 | + |
| 3 | +test.describe('map-extent checked order tests', () => { |
| 4 | + let page; |
| 5 | + let context; |
| 6 | + test.beforeAll(async function () { |
| 7 | + context = await chromium.launchPersistentContext('', { slowMo: 500 }); |
| 8 | + page = |
| 9 | + context.pages().find((page) => page.url() === 'about:blank') || |
| 10 | + (await context.newPage()); |
| 11 | + await page.goto('map-extent-checked.html'); |
| 12 | + }); |
| 13 | + test.only('map-extent layer control order correct when cycling checked state', async () => { |
| 14 | + // Fixed #935 https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/935 |
| 15 | + /* |
| 16 | +Go to this map map-extent-checked.html |
| 17 | +
|
| 18 | +Open the layer control for the layer settings. |
| 19 | +
|
| 20 | +Un-check the imagery layer <map-extent> |
| 21 | +Check the imagery layer <map-extent> |
| 22 | +
|
| 23 | +What should happen: |
| 24 | +The imagery layer <map-extent> should draw underneath the states layer. |
| 25 | +
|
| 26 | +What actually happens: |
| 27 | +The imagery layer <map-extent> draws on top of the states layer. |
| 28 | + * */ |
| 29 | + const layerControl = page.locator('.leaflet-top.leaflet-right'); |
| 30 | + await layerControl.hover(); |
| 31 | + const layerSettings = layerControl.getByTitle('Layer Settings'); |
| 32 | + await layerSettings.click(); |
| 33 | + const imageryExtentCheckbox = layerControl.getByRole('checkbox', { |
| 34 | + name: 'Extent One' |
| 35 | + }); |
| 36 | + await imageryExtentCheckbox.click(); // turn it off |
| 37 | + await imageryExtentCheckbox.click(); // turn it on |
| 38 | + const ext1 = page.getByTestId('ext1'); |
| 39 | + let imageryZIndex = await ext1.evaluate((e) => { |
| 40 | + return +e._extentLayer._container.style.zIndex; |
| 41 | + }); |
| 42 | + expect(imageryZIndex).toEqual(0); |
| 43 | + const ext2 = page.getByTestId('ext2'); |
| 44 | + let statesZIndex = await ext2.evaluate((e) => { |
| 45 | + return +e._extentLayer._container.style.zIndex; |
| 46 | + }); |
| 47 | + expect(statesZIndex).toEqual(1); |
| 48 | + // re-order them via the layer control |
| 49 | + const imageryFieldset = layerControl.getByRole('group', { |
| 50 | + name: 'Extent One' |
| 51 | + }); |
| 52 | + let controlBBox = await imageryFieldset.boundingBox(); |
| 53 | + let from = { |
| 54 | + x: controlBBox.x + controlBBox.width / 2, |
| 55 | + y: controlBBox.y + controlBBox.height / 2 |
| 56 | + }, |
| 57 | + to = { x: from.x, y: from.y + controlBBox.height * 1.1 }; |
| 58 | + |
| 59 | + await page.mouse.move(from.x, from.y); |
| 60 | + await page.mouse.down(); |
| 61 | + await page.mouse.move(to.x, to.y); |
| 62 | + await page.mouse.up(); |
| 63 | + imageryZIndex = await ext1.evaluate((e) => { |
| 64 | + return +e._extentLayer._container.style.zIndex; |
| 65 | + }); |
| 66 | + expect(imageryZIndex).toEqual(1); |
| 67 | + statesZIndex = await ext2.evaluate((e) => { |
| 68 | + return +e._extentLayer._container.style.zIndex; |
| 69 | + }); |
| 70 | + expect(statesZIndex).toEqual(0); |
| 71 | + |
| 72 | + await page.mouse.move(from.x, from.y); |
| 73 | + await page.mouse.down(); |
| 74 | + await page.mouse.move(to.x, to.y); |
| 75 | + await page.mouse.up(); |
| 76 | + await imageryExtentCheckbox.click(); // turn it off |
| 77 | + await imageryExtentCheckbox.click(); // turn it on |
| 78 | + imageryZIndex = await ext1.evaluate((e) => { |
| 79 | + return +e._extentLayer._container.style.zIndex; |
| 80 | + }); |
| 81 | + expect(imageryZIndex).toEqual(0); |
| 82 | + statesZIndex = await ext2.evaluate((e) => { |
| 83 | + return +e._extentLayer._container.style.zIndex; |
| 84 | + }); |
| 85 | + expect(statesZIndex).toEqual(1); |
| 86 | + // TO DO re-order them via the DOM (insertAdjacentHTML), |
| 87 | + // ensure that |
| 88 | + // a) render order/z-index is correct |
| 89 | + // b) render order is reflected in layer control order as well |
| 90 | + // see https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/956 |
| 91 | + }); |
| 92 | +}); |
0 commit comments