diff --git a/index.html b/index.html index 9442a31b4..67afb32e9 100644 --- a/index.html +++ b/index.html @@ -83,7 +83,6 @@ - diff --git a/src/map-style.js b/src/map-style.js index 6c050434a..144b5858a 100644 --- a/src/map-style.js +++ b/src/map-style.js @@ -40,6 +40,16 @@ export class MapStyle extends HTMLElement { target.setAttribute(attribute.nodeName, attribute.nodeValue); }); } + + // use observer to monitor the changes in mapStyle textContent + this._observer = new MutationObserver(() => { + this.styleElement.textContent = this.textContent; + }); + this._observer.observe(this, { + childList: true, + subtree: true, + characterData: true + }); } disconnectedCallback() { if (this._stylesheetHost) { diff --git a/test/e2e/elements/map-style/map-style.html b/test/e2e/elements/map-style/map-style.html new file mode 100644 index 000000000..38dffce9f --- /dev/null +++ b/test/e2e/elements/map-style/map-style.html @@ -0,0 +1,88 @@ + + + + + + map-style tests + + + + + + + + + + + + + .poly {stroke: black; fill:black} + + Layer-100.50664854831412 56.0571475247103 -108.18295690328578 55.57677707477441 -106.44464507203479 51.99763924555603 -91.90173251505614 50.014258109371525 -80.36884559227745 50.0637759718567 -92.5284724652151 56.408480743634385 -100.50664854831412 56.0571475247103 Styled Polygon + + + + diff --git a/test/e2e/elements/map-style/map-style.test.js b/test/e2e/elements/map-style/map-style.test.js new file mode 100644 index 000000000..e73fa85a9 --- /dev/null +++ b/test/e2e/elements/map-style/map-style.test.js @@ -0,0 +1,43 @@ +import { test, expect, chromium } from '@playwright/test'; + +test.describe('map-style element tests', () => { + let page; + let context; + test.beforeAll(async () => { + context = await chromium.launchPersistentContext(''); + page = + context.pages().find((page) => page.url() === 'about:blank') || + (await context.newPage()); + await page.goto('map-style.html'); + }); + + test.afterAll(async function () { + await context.close(); + }); + + test(`mutation observer - style changes when map-style gets updated`, async () => { + let mapStyle = await page.locator('map-style'); + let styleTextContentMatch = await mapStyle.evaluate((mapStyle) => { + return mapStyle.styleElement.textContent === mapStyle.textContent; + }); + + expect(styleTextContentMatch).toEqual(true); + expect(mapStyle).toHaveText('.poly {stroke: black; fill:black}'); + + // Change the map-style element to red + await mapStyle.evaluate((mapStyle) => { + mapStyle.textContent = '.poly {stroke: red; fill:red}'; + }); + + // the style element and the map style should now be red + mapStyle = await page.locator('map-style'); + styleTextContentMatch = await mapStyle.evaluate((mapStyle) => { + return mapStyle.styleElement.textContent === mapStyle.textContent; + }); + expect(styleTextContentMatch).toEqual(true); + let styleTextContent = await mapStyle.evaluate((mapStyle) => { + return mapStyle.styleElement.textContent; + }); + expect(styleTextContent).toEqual('.poly {stroke: red; fill:red}'); + }); +}); diff --git a/test/server.js b/test/server.js index c6c005078..db6c45ee4 100644 --- a/test/server.js +++ b/test/server.js @@ -12,6 +12,7 @@ app.use(express.static(path.join(__dirname, 'e2e/elements/map'))); app.use(express.static(path.join(__dirname, 'e2e/elements/map-feature'))); app.use(express.static(path.join(__dirname, 'e2e/elements/map-input'))); app.use(express.static(path.join(__dirname, 'e2e/elements/map-link'))); +app.use(express.static(path.join(__dirname, 'e2e/elements/map-style'))); app.use(express.static(path.join(__dirname, 'e2e/elements/layer-'))); app.use(express.static(path.join(__dirname, 'e2e/api'))); app.use(express.static(path.join(__dirname, 'e2e/data')));