diff --git a/components/popup/src/vwc-popup-base.ts b/components/popup/src/vwc-popup-base.ts index f0f378b6d..6a98ec93f 100644 --- a/components/popup/src/vwc-popup-base.ts +++ b/components/popup/src/vwc-popup-base.ts @@ -122,14 +122,8 @@ export class VWCPopupBase extends LitElement { this.open = false; } - // TODO: Make the observer work on positioning for the first time - // new `IntersectionObserver` constructor - private observer = new IntersectionObserver((entries) => { - for (const entry of entries) { - const bounds = entry.boundingClientRect; - console.log('anchor element bounds ', bounds); - requestAnimationFrame(() => this.updatePosition()); - } + private sizeObserver = new ResizeObserver(() => { + return this.updatePosition(); }); override connectedCallback(): void { @@ -143,19 +137,21 @@ export class VWCPopupBase extends LitElement { window.removeEventListener('scroll', this.updatePosition); window.removeEventListener('resize', this.onResizeWindow); // Disconnect the observer to stop from running in the background - this.observer.disconnect(); + this.sizeObserver.disconnect(); } protected override firstUpdated(_changedProperties: PropertyValues): void { super.firstUpdated(_changedProperties); this.anchorEl = this.getAnchorById(); - if(this.anchorEl) this.observer.observe(this.anchorEl); + if(this.anchorEl) this.sizeObserver.observe(this.anchorEl); } protected override updated(changes: Map): void { super.updated(changes); if (changes.has('anchor')) { + this.sizeObserver.disconnect(); this.anchorEl = this.getAnchorById(); + if(this.anchorEl) this.sizeObserver.observe(this.anchorEl); } this.updatePosition(); } diff --git a/components/popup/stories/popup.stories.js b/components/popup/stories/popup.stories.js index 12551b8c3..4326192fc 100644 --- a/components/popup/stories/popup.stories.js +++ b/components/popup/stories/popup.stories.js @@ -34,7 +34,7 @@ const Template = args => html` }
- Click to open popup + Click on me

Popup title

 @@ -45,15 +45,16 @@ const Template = args => html` `; export const Basic = Template.bind({}); +Basic.args = { open: true }; export const WithArrow = Template.bind({}); -WithArrow.args = { arrow: true, corner: "right" }; +WithArrow.args = { open: true, arrow: true, corner: "right" }; export const Alternate = Template.bind({}); -Alternate.args = { arrow: true, corner: "bottom", alternate: true }; +Alternate.args = { open: true, arrow: true, corner: "bottom", alternate: true }; export const Dismissible = Template.bind({}); -Dismissible.args = { dismissible: true, corner: "top" }; +Dismissible.args = { open: true, dismissible: true, corner: "top" }; function onClick() { popup.open = !popup.open; diff --git a/components/popup/test/popup.test.js b/components/popup/test/popup.test.js index 494963174..0898885bb 100644 --- a/components/popup/test/popup.test.js +++ b/components/popup/test/popup.test.js @@ -4,9 +4,9 @@ import 'chai-dom'; import { waitNextTask, textToDomToParent, - isolatedElementsCreation, + isolatedElementsCreation, waitInterval, noop, } from '../../../test/test-helpers.js'; -import { chaiDomDiff } from '@open-wc/semantic-dom-diff'; +import {chaiDomDiff} from '@open-wc/semantic-dom-diff'; chai.use(chaiDomDiff); @@ -39,7 +39,7 @@ describe('popup', () => { await actualElement.updateComplete; expect(actualElement.anchor, 'anchor should be ""') .to - .equal(""); + .equal(''); expect(actualElement.open, 'open should be false') .to .equal(false); @@ -66,7 +66,7 @@ describe('popup', () => { const [actualElement] = addElement( textToDomToParent(`<${COMPONENT_NAME}>`) ); - actualElement.anchor = "anchor"; + actualElement.anchor = 'anchor'; await actualElement.updateComplete; actualElement.show(); @@ -94,11 +94,40 @@ describe('popup', () => { }); describe(`anchor`, () => { - it(`should not open the popup if anchor does not exist`, async () => { + async function flushResizeEvents() { + await waitNextTask(); + } + + function triggerResize(element) { + element.style.height = '20px'; + } + + function expectASingleUpdatePositionCall(updatePositionCallCount, anchorElement) { + const observer = new ResizeObserver(async function () { + await waitNextTask(); + expect(updatePositionCallCount).to.equal(1); + }); + + observer.observe(anchorElement); + } + + async function setPopupAndAnchor() { + const [anchorElement] = addElement( + textToDomToParent(`Button`) + ); + const [actualElement] = addElement( + textToDomToParent(`<${COMPONENT_NAME} arrow anchor="anchor" open>
This is my popup
`) + ); + actualElement.updatePosition = noop; + await actualElement.updateComplete; + return {anchorElement, actualElement}; + } + + it(`should not set popup open if anchor element does not exist`, async () => { const [actualElement] = addElement( textToDomToParent(`<${COMPONENT_NAME}>`) ); - actualElement.anchor = "anchor"; + actualElement.anchor = 'anchor'; await actualElement.updateComplete; actualElement.show(); @@ -109,16 +138,52 @@ describe('popup', () => { .equal(false); }); - it(`should not open the popup if anchor does not exist`, async () => { + it(`should init the popup as open if anchor element does not exist`, async () => { const [actualElement] = addElement( textToDomToParent(`<${COMPONENT_NAME} open>`) ); - actualElement.anchor = "anchor"; + actualElement.anchor = 'anchor'; await actualElement.updateComplete; expect(actualElement.open) .to .equal(false); }); + + it(`should reposition when the anchor changes its size`, async function () { + + const {anchorElement, actualElement} = await setPopupAndAnchor(); + + await flushResizeEvents(); + + let updatePositionCallCount = 0; + actualElement.updatePosition = function () { + updatePositionCallCount++; + }; + + triggerResize(anchorElement); + + expectASingleUpdatePositionCall(updatePositionCallCount, anchorElement); + + }); + + it(`should stop observing the anchor when changing an anchor`, async function () { + const {anchorElement, actualElement} = await setPopupAndAnchor(); + await flushResizeEvents(); + + actualElement.anchor = ''; + await waitNextTask(); + + let updatePositionCallCount = 0; + actualElement.updatePosition = function () { + updatePositionCallCount++; + }; + + anchorElement.style.height = '20px'; + + await waitNextTask(); + + expect(updatePositionCallCount).to.equal(0); + }); }); }); diff --git a/test/test-helpers.js b/test/test-helpers.js index a2aa949ba..b09dfd909 100644 --- a/test/test-helpers.js +++ b/test/test-helpers.js @@ -14,9 +14,14 @@ export { isFirefox, getFrameLoadedInjected, cleanFrame, - getRandom + getRandom, + noop } +const noop = () => { + const x = []; + x.push(5); +}; const tmpTemple = document.createElement('template'); function listenToSubmission(formElement) { @@ -289,4 +294,4 @@ class TestComponent extends HTMLElement { } } -window.customElements.define('vivid-tests-component', TestComponent); \ No newline at end of file +window.customElements.define('vivid-tests-component', TestComponent); diff --git a/ui-tests/index.ts b/ui-tests/index.ts index bf1bc5d52..c2c679531 100644 --- a/ui-tests/index.ts +++ b/ui-tests/index.ts @@ -148,6 +148,7 @@ async function setDevServer() { open: true }; + //@ts-ignore const devServer = new WebpackDevServer(devServerOptions, compiler); devServer.listen(webpackConfig.devServer.port, '127.0.0.1', () => { diff --git a/ui-tests/snapshots/vwc-popup.png b/ui-tests/snapshots/vwc-popup.png index 2e1f2249c..749f0856d 100644 Binary files a/ui-tests/snapshots/vwc-popup.png and b/ui-tests/snapshots/vwc-popup.png differ diff --git a/ui-tests/tests/vwc-popup/index.js b/ui-tests/tests/vwc-popup/index.js new file mode 100644 index 000000000..8ae4a36c0 --- /dev/null +++ b/ui-tests/tests/vwc-popup/index.js @@ -0,0 +1,45 @@ +import '@vonage/vwc-popup'; +import '@vonage/vwc-button'; +import '@vonage/vwc-text'; + +export async function createElementVariations(wrapper) { + const textElementWrapper = document.createElement('div'); + textElementWrapper.innerHTML = ` + +
+ Click to open popup + +
+

Popup title

 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+ + +
+

Popup title

 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+ +
`; +wrapper.appendChild(textElementWrapper); + +}