434 lines
15 KiB
JavaScript
434 lines
15 KiB
JavaScript
import { expect, fixture, html, nextFrame, aTimeout } from '@open-wc/testing';
|
|
|
|
import sinon from 'sinon';
|
|
import { overlays, OverlayController } from '@lion/ui/overlays.js';
|
|
|
|
import '@lion/ui/define/lion-dialog.js';
|
|
|
|
/**
|
|
* @typedef {import('../types/OverlayConfig.js').OverlayConfig} OverlayConfig
|
|
* @typedef {import('../types/OverlayMixinTypes.js').DefineOverlayConfig} DefineOverlayConfig
|
|
* @typedef {import('../types/OverlayMixinTypes.js').OverlayHost} OverlayHost
|
|
* @typedef {import('../types/OverlayMixinTypes.js').OverlayMixin} OverlayMixin
|
|
* @typedef {import('lit').LitElement} LitElement
|
|
* @typedef {LitElement & OverlayHost & {_overlayCtrl:OverlayController}} OverlayEl
|
|
*/
|
|
|
|
function getGlobalOverlayNodes() {
|
|
return Array.from(overlays.globalRootNode.children).filter(
|
|
child => !child.classList.contains('global-overlays__backdrop'),
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @param {{tagString:string, tag: object, suffix?:string}} config
|
|
*/
|
|
export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
|
|
describe(`OverlayMixin${suffix}`, () => {
|
|
it('should not be opened by default', async () => {
|
|
const el = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag}>
|
|
<div slot="content">content of the overlay</div>
|
|
<button slot="invoker">invoker button</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
expect(el.opened).to.be.false;
|
|
expect(el._overlayCtrl.isShown).to.be.false;
|
|
});
|
|
|
|
it('syncs opened to overlayController', async () => {
|
|
const el = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag}>
|
|
<div slot="content">content of the overlay</div>
|
|
<button slot="invoker">invoker button</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
el.opened = true;
|
|
await el.updateComplete;
|
|
await el._overlayCtrl._showComplete;
|
|
expect(el.opened).to.be.true;
|
|
expect(el._overlayCtrl.isShown).to.be.true;
|
|
|
|
el.opened = false;
|
|
await el.updateComplete;
|
|
await el._overlayCtrl._hideComplete;
|
|
expect(el.opened).to.be.false;
|
|
expect(el._overlayCtrl.isShown).to.be.false;
|
|
});
|
|
|
|
it('syncs OverlayController to opened', async () => {
|
|
const el = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag}>
|
|
<div slot="content">content of the overlay</div>
|
|
<button slot="invoker">invoker button</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
expect(el.opened).to.be.false;
|
|
await el._overlayCtrl.show();
|
|
expect(el.opened).to.be.true;
|
|
|
|
await el._overlayCtrl.hide();
|
|
expect(el.opened).to.be.false;
|
|
});
|
|
|
|
it('does not change the body size when opened', async () => {
|
|
const parentNode = document.createElement('div');
|
|
parentNode.setAttribute('style', 'height: 10000px; width: 10000px;');
|
|
const elWithBigParent = /** @type {OverlayEl} */ (
|
|
await fixture(
|
|
html`
|
|
<${tag}>
|
|
<div slot="content">content of the overlay</div>
|
|
<button slot="invoker">invoker button</button>
|
|
</${tag}>
|
|
`,
|
|
{ parentNode },
|
|
)
|
|
);
|
|
const { offsetWidth, offsetHeight } = /** @type {HTMLElement} */ (
|
|
elWithBigParent.offsetParent
|
|
);
|
|
await elWithBigParent._overlayCtrl.show();
|
|
expect(elWithBigParent.opened).to.be.true;
|
|
expect(/** @type {HTMLElement} */ (elWithBigParent?.offsetParent).offsetWidth).to.equal(
|
|
offsetWidth,
|
|
);
|
|
expect(/** @type {HTMLElement} */ (elWithBigParent?.offsetParent).offsetHeight).to.equal(
|
|
offsetHeight,
|
|
);
|
|
await elWithBigParent._overlayCtrl.hide();
|
|
expect(/** @type {HTMLElement} */ (elWithBigParent?.offsetParent).offsetWidth).to.equal(
|
|
offsetWidth,
|
|
);
|
|
expect(/** @type {HTMLElement} */ (elWithBigParent?.offsetParent).offsetHeight).to.equal(
|
|
offsetHeight,
|
|
);
|
|
});
|
|
|
|
it('should respond to initially and dynamically setting the config', async () => {
|
|
const itEl = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag} .config=${{ trapsKeyboardFocus: false, viewportConfig: { placement: 'top' } }}>
|
|
<div slot="content">content of the overlay</div>
|
|
<button slot="invoker">invoker button</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
itEl.opened = true;
|
|
await itEl.updateComplete;
|
|
expect(itEl._overlayCtrl.trapsKeyboardFocus).to.be.false;
|
|
|
|
await nextFrame();
|
|
itEl.config = { viewportConfig: { placement: 'left' } };
|
|
expect(itEl._overlayCtrl.viewportConfig.placement).to.equal('left');
|
|
});
|
|
|
|
it('fires "opened-changed" event on hide', async () => {
|
|
const spy = sinon.spy();
|
|
const el = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag} @opened-changed="${spy}">
|
|
<div slot="content">content of the overlay</div>
|
|
<button slot="invoker">invoker button</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
expect(spy).not.to.have.been.called;
|
|
await el._overlayCtrl.show();
|
|
await el.updateComplete;
|
|
expect(spy.callCount).to.equal(1);
|
|
expect(el.opened).to.be.true;
|
|
el.opened = true;
|
|
await el.updateComplete;
|
|
expect(spy.callCount).to.equal(1);
|
|
await el._overlayCtrl.hide();
|
|
await el.updateComplete;
|
|
expect(spy.callCount).to.equal(2);
|
|
expect(el.opened).to.be.false;
|
|
});
|
|
|
|
it('fires "before-closed" event on hide', async () => {
|
|
const beforeSpy = sinon.spy();
|
|
const el = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag} @before-closed="${beforeSpy}" opened>
|
|
<div slot="content">content of the overlay</div>
|
|
<button slot="invoker">invoker button</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
// Wait until it's done opening (handling features is async)
|
|
await nextFrame();
|
|
expect(beforeSpy).not.to.have.been.called;
|
|
await el._overlayCtrl.hide();
|
|
expect(beforeSpy).to.have.been.called;
|
|
expect(el.opened).to.be.false;
|
|
});
|
|
|
|
it('fires before-opened" event on show', async () => {
|
|
const beforeSpy = sinon.spy();
|
|
const el = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag} @before-opened="${beforeSpy}">
|
|
<div slot="content">content of the overlay</div>
|
|
<button slot="invoker">invoker button</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
expect(beforeSpy).not.to.have.been.called;
|
|
await el._overlayCtrl.show();
|
|
expect(beforeSpy).to.have.been.called;
|
|
expect(el.opened).to.be.true;
|
|
});
|
|
|
|
it('allows to call "preventDefault()" on "before-opened"/"before-closed" events', async () => {
|
|
function preventer(/** @type Event */ ev) {
|
|
ev.preventDefault();
|
|
}
|
|
const el = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag} @before-opened="${preventer}" @before-closed="${preventer}">
|
|
<div slot="content">content of the overlay</div>
|
|
<button slot="invoker">invoker button</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
/** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]')).click();
|
|
await nextFrame();
|
|
expect(el.opened).to.be.false;
|
|
|
|
// Also, the opened state should be synced back to that of the OverlayController
|
|
el.opened = true;
|
|
expect(el.opened).to.be.true;
|
|
await nextFrame();
|
|
expect(el.opened).to.be.false;
|
|
});
|
|
|
|
it('hides content on "close-overlay" event within the content ', async () => {
|
|
function sendCloseEvent(/** @type {Event} */ e) {
|
|
e.target?.dispatchEvent(new Event('close-overlay', { bubbles: true }));
|
|
}
|
|
const closeBtn = /** @type {OverlayEl} */ (
|
|
await fixture(html` <button @click=${sendCloseEvent}>close</button> `)
|
|
);
|
|
|
|
const el = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag} opened>
|
|
<div slot="content">
|
|
content of the overlay
|
|
${closeBtn}
|
|
</div>
|
|
<button slot="invoker">invoker button</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
closeBtn.click();
|
|
await nextFrame(); // hide takes at least a frame
|
|
expect(el.opened).to.be.false;
|
|
});
|
|
|
|
// See https://github.com/ing-bank/lion/discussions/1095
|
|
it('exposes "open()", "close()" and "toggle()" methods', async () => {
|
|
const el = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag}>
|
|
<div slot="content">content</div>
|
|
<button slot="invoker">invoker button</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
expect(el.opened).to.be.false;
|
|
el.open();
|
|
await nextFrame();
|
|
expect(el.opened).to.be.true;
|
|
|
|
el.close();
|
|
await nextFrame();
|
|
expect(el.opened).to.be.false;
|
|
|
|
el.toggle();
|
|
await nextFrame();
|
|
expect(el.opened).to.be.true;
|
|
|
|
el.toggle();
|
|
await nextFrame();
|
|
expect(el.opened).to.be.false;
|
|
});
|
|
|
|
it('exposes "repositionOverlay()" method', async () => {
|
|
const el = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag} opened .config="${{ placementMode: 'local' }}">
|
|
<div slot="content">content</div>
|
|
<button slot="invoker">invoker button</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
await OverlayController.popperModule;
|
|
sinon.spy(el._overlayCtrl._popper, 'update');
|
|
el.repositionOverlay();
|
|
expect(el._overlayCtrl._popper.update).to.have.been.been.calledOnce;
|
|
|
|
if (!el._overlayCtrl.isTooltip) {
|
|
el.config = { ...el.config, placementMode: 'global' };
|
|
el.repositionOverlay();
|
|
expect(el._overlayCtrl._popper.update).to.have.been.been.calledOnce;
|
|
}
|
|
});
|
|
|
|
/** See: https://github.com/ing-bank/lion/issues/1075 */
|
|
it('stays open after config update', async () => {
|
|
const el = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag}>
|
|
<div slot="content">content</div>
|
|
<button slot="invoker">invoker button</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
el.open();
|
|
await el._overlayCtrl._showComplete;
|
|
|
|
el.config = { ...el.config, hidesOnOutsideClick: !el.config.hidesOnOutsideClick };
|
|
await nextFrame();
|
|
expect(el.opened).to.be.true;
|
|
expect(getComputedStyle(el._overlayCtrl.contentWrapperNode).display).not.to.equal('none');
|
|
});
|
|
|
|
/** Prevent unnecessary reset side effects, such as show animation. See: https://github.com/ing-bank/lion/issues/1075 */
|
|
it('does not call updateConfig on equivalent config change', async () => {
|
|
const el = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag}>
|
|
<div slot="content">content</div>
|
|
<button slot="invoker">invoker button</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
el.open();
|
|
await nextFrame();
|
|
|
|
const stub = sinon.stub(el._overlayCtrl, 'updateConfig');
|
|
stub.callsFake(() => {
|
|
throw new Error('Unexpected config update');
|
|
});
|
|
|
|
expect(() => {
|
|
el.config = { ...el.config };
|
|
}).to.not.throw;
|
|
stub.restore();
|
|
});
|
|
});
|
|
|
|
describe(`OverlayMixin${suffix} nested`, () => {
|
|
// For some reason, globalRootNode is not cleared properly on disconnectedCallback from previous overlay test fixtures...
|
|
// Not sure why this "bug" happens...
|
|
beforeEach(() => {
|
|
const globalRootNode = document.querySelector('.global-overlays');
|
|
if (globalRootNode) {
|
|
globalRootNode.innerHTML = '';
|
|
}
|
|
});
|
|
|
|
it('supports nested overlays', async () => {
|
|
const el = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag} id="main-dialog">
|
|
<div slot="content" id="mainContent">
|
|
open nested overlay:
|
|
<${tag} id="sub-dialog">
|
|
<div slot="content" id="nestedContent">
|
|
Nested content
|
|
</div>
|
|
<button slot="invoker" id="nestedInvoker">nested invoker button</button>
|
|
</${tag}>
|
|
</div>
|
|
<button slot="invoker" id="mainInvoker">invoker button</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
|
|
if (el._overlayCtrl.placementMode === 'global') {
|
|
expect(getGlobalOverlayNodes().length).to.equal(2);
|
|
}
|
|
|
|
el.opened = true;
|
|
await aTimeout(0);
|
|
expect(el._overlayCtrl.contentNode).to.be.displayed;
|
|
const nestedOverlayEl = /** @type {OverlayEl} */ (
|
|
el._overlayCtrl.contentNode.querySelector(tagString)
|
|
);
|
|
nestedOverlayEl.opened = true;
|
|
await aTimeout(0);
|
|
expect(nestedOverlayEl._overlayCtrl.contentNode).to.be.displayed;
|
|
});
|
|
|
|
it('[global] allows for moving of the element', async () => {
|
|
const el = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag}>
|
|
<div slot="content" id="nestedContent">content of the nested overlay</div>
|
|
<button slot="invoker">invoker nested</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
if (el._overlayCtrl.placementMode === 'global') {
|
|
expect(getGlobalOverlayNodes().length).to.equal(1);
|
|
|
|
const moveTarget = /** @type {OverlayEl} */ (await fixture('<div id="target"></div>'));
|
|
moveTarget.appendChild(el);
|
|
await el.updateComplete;
|
|
expect(getGlobalOverlayNodes().length).to.equal(1);
|
|
}
|
|
});
|
|
|
|
it('reconstructs the overlay when disconnected and reconnected to DOM (support for nested overlay nodes)', async () => {
|
|
const nestedEl = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag} id="nest">
|
|
<div slot="content" id="nestedContent">content of the nested overlay</div>
|
|
<button slot="invoker">invoker nested</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
|
|
const el = /** @type {OverlayEl} */ (
|
|
await fixture(html`
|
|
<${tag} id="main">
|
|
<div slot="content" id="mainContent">
|
|
open nested overlay:
|
|
${nestedEl}
|
|
</div>
|
|
<button slot="invoker">invoker button</button>
|
|
</${tag}>
|
|
`)
|
|
);
|
|
|
|
if (el._overlayCtrl.placementMode === 'global') {
|
|
// Find the outlets that are not backdrop outlets
|
|
const overlayContainerNodes = getGlobalOverlayNodes();
|
|
expect(overlayContainerNodes.length).to.equal(2);
|
|
const lastContentNodeInContainer = overlayContainerNodes[1];
|
|
// Check that the last container is the nested one with the intended content
|
|
expect(lastContentNodeInContainer.firstElementChild.firstChild.textContent).to.equal(
|
|
'content of the nested overlay',
|
|
);
|
|
expect(lastContentNodeInContainer.firstElementChild.slot).to.equal('content');
|
|
} else {
|
|
const contentNode = /** @type {HTMLElement} */ (
|
|
// @ts-ignore [allow-protected] in tests
|
|
el._overlayContentNode.querySelector('#nestedContent')
|
|
);
|
|
expect(contentNode).to.not.be.null;
|
|
expect(contentNode.innerText).to.equal('content of the nested overlay');
|
|
}
|
|
});
|
|
});
|
|
}
|