From fd68b1a00a7a31b942d7b087ab939e47567e385b Mon Sep 17 00:00:00 2001 From: Peter Rushforth Date: Fri, 3 Nov 2023 16:15:41 -0400 Subject: [PATCH] Add tests for map-extent attribute api. Fix bug in same. --- src/map-extent.js | 1 + test/e2e/elements/map-extent/map-extent.html | 65 ++++++++ .../elements/map-extent/map-extent.test.js | 157 ++++++++++++++++++ test/server.js | 1 + 4 files changed, 224 insertions(+) create mode 100644 test/e2e/elements/map-extent/map-extent.html create mode 100644 test/e2e/elements/map-extent/map-extent.test.js diff --git a/src/map-extent.js b/src/map-extent.js index 811281870..2fbacd51a 100644 --- a/src/map-extent.js +++ b/src/map-extent.js @@ -73,6 +73,7 @@ export class MapExtent extends HTMLElement { case 'checked': this._handleChange(); this._calculateBounds(); + this._layerControlCheckbox.checked = newValue !== null; break; case 'opacity': if (oldValue !== newValue) { diff --git a/test/e2e/elements/map-extent/map-extent.html b/test/e2e/elements/map-extent/map-extent.html new file mode 100644 index 000000000..42597ff3e --- /dev/null +++ b/test/e2e/elements/map-extent/map-extent.html @@ -0,0 +1,65 @@ + + + + + Basic Map + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/e2e/elements/map-extent/map-extent.test.js b/test/e2e/elements/map-extent/map-extent.test.js new file mode 100644 index 000000000..ecfab22d3 --- /dev/null +++ b/test/e2e/elements/map-extent/map-extent.test.js @@ -0,0 +1,157 @@ +import { test, expect, chromium } from '@playwright/test'; + +test.describe('map-extent tests', () => { + let page; + let context; + test.describe('attribute tests', () => { + test.beforeEach(async function () { + context = await chromium.launchPersistentContext('', { slowMo: 500 }); + page = + context.pages().find((page) => page.url() === 'about:blank') || + (await context.newPage()); + await page.goto('map-extent.html'); + }); + test('Basic hidden functionality and API', async () => { + const extent = await page.getByTestId('ext1'); + let hiddenInLayerControl = await extent.evaluate((extent) => { + return !extent._layerControlHTML.isConnected; + }); + expect(hiddenInLayerControl).toBe(true); + + await extent.evaluate((extent) => { + extent.hidden = false; + }); + hiddenInLayerControl = await extent.evaluate((extent) => { + return !extent._layerControlHTML.isConnected; + }); + expect(hiddenInLayerControl).toBe(false); + + let labelProperty = await extent.evaluate((extent) => { + return extent.label; + }); + expect(labelProperty === 'User-generated label').toBe(true); + + let labelInLayerControl = await extent.evaluate((extent) => { + return extent._layerControlLabel.innerText; + }); + expect(labelInLayerControl === labelProperty).toBe(true); + + await extent.evaluate((extent) => { + extent.removeAttribute('label'); + }); + + await page.waitForTimeout(500); + const labelChangesToDefaultAndLayerNotHidden = await extent.evaluate( + (extent) => { + return ( + extent.label === 'Sub-layer' && + !extent.hidden && + extent._layerControlLabel.innerText === extent.label + ); + } + ); + expect(labelChangesToDefaultAndLayerNotHidden).toBe(true); + }); + + test('hidden DOM order maintained when unhiding', async () => { + const t = await page.getByTestId('template'); + await t.evaluate((t) => { + let extents = t.content.cloneNode(true); + let l = document.querySelector('#cbmt1'); + l.appendChild(extents); + }); + await page.waitForTimeout(500); + const layer = await page.getByTestId('cbmt1'); + let unhiddenMapExtentCount = await layer.evaluate((layer) => { + return layer._propertiesGroupAnatomy.childElementCount; + }); + // all hidden extents + expect(unhiddenMapExtentCount).toEqual(0); + await layer.evaluate((layer) => { + return layer.whenElemsReady(); + }); + await layer.evaluate((layer) => { + layer.querySelector('[data-testid="ext3"]').hidden = false; + }); + await layer.evaluate((layer) => { + layer.querySelector('[data-testid="ext1"]').hidden = false; + }); + await layer.evaluate((layer) => { + layer.querySelector('[data-testid="ext2"]').hidden = false; + }); + unhiddenMapExtentCount = await layer.evaluate((layer) => { + return layer._propertiesGroupAnatomy.childElementCount; + }); + // no hidden extents + expect(unhiddenMapExtentCount).toBe(3); + + const orderOfDOMExtentsEqualsLayerControlOrder = await layer.evaluate( + (layer) => { + let extents = layer.querySelectorAll('map-extent'); + let match = true; + for (let i = 0; i < extents.length; i++) { + if ( + extents[i]._layerControlHTML !== + layer._propertiesGroupAnatomy.children[i] + ) { + match = false; + break; + } + } + return match; + } + ); + expect(orderOfDOMExtentsEqualsLayerControlOrder).toBe(true); + }); + }); + test('Basic checked functionality and API', async () => { + // extent ext2-1 starts life checked and hidden + const extent = await page.getByTestId('ext2-1'); + let checkedInLayerControl = await extent.evaluate((extent) => { + return extent._layerControlCheckbox.checked; + }); + let visibleOnMap = await extent.evaluate((extent) => { + return extent._templatedLayer._container.isConnected; + }); + let checkedProperty = await extent.evaluate((extent) => { + return extent.checked; + }); + expect(checkedInLayerControl).toBe(true); + expect(visibleOnMap).toBe(true); + expect(checkedProperty).toBe(true); + await extent.evaluate((extent) => { + extent.checked = false; + }); + + await extent.evaluate((extent) => { + extent.hidden = false; + }); + checkedInLayerControl = await extent.evaluate((extent) => { + return extent._layerControlCheckbox.checked; + }); + visibleOnMap = await extent.evaluate((extent) => { + return extent._templatedLayer._container.isConnected; + }); + checkedProperty = await extent.evaluate((extent) => { + return extent.checked; + }); + expect(checkedInLayerControl).toBe(false); + expect(visibleOnMap).toBe(false); + expect(checkedProperty).toBe(false); + + // extent2 is not checked when loaded + const extent2 = await page.getByTestId('ext2-2'); + checkedInLayerControl = await extent2.evaluate((extent) => { + return extent._layerControlCheckbox.checked; + }); + visibleOnMap = await extent2.evaluate((extent) => { + return extent._templatedLayer._container.isConnected; + }); + checkedProperty = await extent2.evaluate((extent) => { + return extent.checked; + }); + expect(checkedInLayerControl).toBe(false); + expect(visibleOnMap).toBe(false); + expect(checkedProperty).toBe(false); + }); +}); diff --git a/test/server.js b/test/server.js index dee454420..20668e725 100644 --- a/test/server.js +++ b/test/server.js @@ -6,6 +6,7 @@ const port = 30001; //then loads in the index file app.use(express.static(path.join(__dirname, '../dist'))); app.use(express.static(path.join(__dirname, 'e2e/core'))); +app.use(express.static(path.join(__dirname, 'e2e/elements/map-extent'))); app.use(express.static(path.join(__dirname, 'e2e/api'))); app.use(express.static(path.join(__dirname, 'e2e/data'))); app.use(express.static(path.join(__dirname, 'e2e/geojson')));