75 lines
2.4 KiB
JavaScript
75 lines
2.4 KiB
JavaScript
import { expect, fixture, html } from '@open-wc/testing';
|
|
|
|
import '../lion-dialog.js';
|
|
|
|
// Smoke tests dialog
|
|
describe('lion-dialog', () => {
|
|
describe('Basic', () => {
|
|
it('should not be shown by default', async () => {
|
|
const el = await fixture(html`
|
|
<lion-dialog>
|
|
<div slot="content" class="dialog">Hey there</div>
|
|
<lion-button slot="invoker">Popup button</lion-button>
|
|
</lion-dialog>
|
|
`);
|
|
expect(el._overlayCtrl.isShown).to.be.false;
|
|
});
|
|
|
|
it('should show content on invoker click', async () => {
|
|
const el = await fixture(html`
|
|
<lion-dialog>
|
|
<div slot="content" class="dialog">
|
|
Hey there
|
|
</div>
|
|
<lion-button slot="invoker">Popup button</lion-button>
|
|
</lion-dialog>
|
|
`);
|
|
const invoker = el.querySelector('[slot="invoker"]');
|
|
invoker.click();
|
|
|
|
expect(el._overlayCtrl.isShown).to.be.true;
|
|
});
|
|
|
|
it('should hide content on close event', async () => {
|
|
const el = await fixture(html`
|
|
<lion-dialog>
|
|
<div slot="content" class="dialog">
|
|
Hey there
|
|
<button @click=${e => e.target.dispatchEvent(new Event('close', { bubbles: true }))}>
|
|
x
|
|
</button>
|
|
</div>
|
|
<lion-button slot="invoker">Popup button</lion-button>
|
|
</lion-dialog>
|
|
`);
|
|
const invoker = el.querySelector('[slot="invoker"]');
|
|
invoker.click();
|
|
|
|
expect(el._overlayCtrl.isShown).to.be.true;
|
|
|
|
const closeBtn = el._overlayCtrl.contentNode.querySelector('button');
|
|
closeBtn.click();
|
|
|
|
expect(el._overlayCtrl.isShown).to.be.false;
|
|
});
|
|
|
|
it('should respond to initially and dynamically setting the config', async () => {
|
|
const el = await fixture(html`
|
|
<lion-dialog .config=${{ trapsKeyboardFocus: false, viewportConfig: { placement: 'top' } }}>
|
|
<div slot="content" class="dialog">Hey there</div>
|
|
<lion-button slot="invoker">Popup button</lion-button>
|
|
</lion-dialog>
|
|
`);
|
|
await el._overlayCtrl.show();
|
|
expect(el._overlayCtrl.trapsKeyboardFocus).to.be.false;
|
|
|
|
el.config = { viewportConfig: { placement: 'left' } };
|
|
expect(el._overlayCtrl.viewportConfig.placement).to.equal('left');
|
|
expect(
|
|
el._overlayCtrl._contentNodeWrapper.classList.contains(
|
|
'global-overlays__overlay-container--left',
|
|
),
|
|
);
|
|
});
|
|
});
|
|
});
|