ec8da8f12c
Co-authored-by: Mikhail Bashkirov <mikhail.bashkirov@ing.com> Co-authored-by: Thijs Louisse <thijs.louisse@ing.com> Co-authored-by: Joren Broekema <joren.broekema@ing.com> Co-authored-by: Gerjan van Geest <gerjan.van.geest@ing.com> Co-authored-by: Erik Kroes <erik.kroes@ing.com> Co-authored-by: Lars den Bakker <lars.den.bakker@ing.com>
63 lines
2.3 KiB
JavaScript
63 lines
2.3 KiB
JavaScript
/* eslint-disable no-unused-expressions */
|
|
/* eslint-env mocha */
|
|
import { expect, fixture, html } from '@open-wc/testing';
|
|
|
|
import '../lion-popup.js';
|
|
|
|
describe('lion-popup', () => {
|
|
describe('Basic', () => {
|
|
it('should not be shown by default', async () => {
|
|
const el = await fixture(html`
|
|
<lion-popup>
|
|
<div slot="content" class="popup">Hey there</div>
|
|
<lion-button slot="invoker">Popup button</lion-button>
|
|
</lion-popup>
|
|
`);
|
|
expect(el.querySelector('[slot="content"]').style.display).to.be.equal('none');
|
|
});
|
|
|
|
it('should toggle to show content on click', async () => {
|
|
const el = await fixture(html`
|
|
<lion-popup>
|
|
<div slot="content" class="popup">Hey there</div>
|
|
<lion-button slot="invoker">Popup button</lion-button>
|
|
</lion-popup>
|
|
`);
|
|
const invoker = el.querySelector('[slot="invoker"]');
|
|
const eventOnClick = new Event('click');
|
|
invoker.dispatchEvent(eventOnClick);
|
|
await el.updateComplete;
|
|
expect(el.querySelector('[slot="content"]').style.display).to.be.equal('inline-block');
|
|
invoker.dispatchEvent(eventOnClick);
|
|
await el.updateComplete;
|
|
expect(el.querySelector('[slot="content"]').style.display).to.be.equal('none');
|
|
});
|
|
|
|
it('should support popup containing html when specified in popup content body', async () => {
|
|
const el = await fixture(html`
|
|
<lion-popup>
|
|
<div slot="content">This is Popup using <strong id="click_overlay">overlay</strong></div>
|
|
<lion-button slot="invoker">Popup button</lion-button>
|
|
</lion-popup>
|
|
`);
|
|
const invoker = el.querySelector('[slot="invoker"]');
|
|
const event = new Event('click');
|
|
invoker.dispatchEvent(event);
|
|
await el.updateComplete;
|
|
expect(el.querySelector('strong')).to.not.be.undefined;
|
|
});
|
|
});
|
|
|
|
describe('Accessibility', () => {
|
|
it('should have aria-controls attribute set to the invoker', async () => {
|
|
const el = await fixture(html`
|
|
<lion-popup>
|
|
<div slot="content" class="popup">Hey there</div>
|
|
<lion-button slot="invoker">Popup button</lion-button>
|
|
</lion-popup>
|
|
`);
|
|
const invoker = el.querySelector('[slot="invoker"]');
|
|
expect(invoker.getAttribute('aria-controls')).to.not.be.null;
|
|
});
|
|
});
|
|
});
|