kopia lustrzana https://github.com/shoelace-style/shoelace
92 wiersze
3.5 KiB
TypeScript
92 wiersze
3.5 KiB
TypeScript
import { expect, fixture, html, waitUntil } from '@open-wc/testing';
|
|
import sinon from 'sinon';
|
|
import type SlAlert from './alert';
|
|
|
|
describe('<sl-alert>', () => {
|
|
it('should be visible with the open attribute', async () => {
|
|
const el = await fixture<SlAlert>(html` <sl-alert open>I am an alert</sl-alert> `);
|
|
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
|
|
|
|
expect(base.hidden).to.be.false;
|
|
});
|
|
|
|
it('should not be visible without the open attribute', async () => {
|
|
const el = await fixture<SlAlert>(html` <sl-alert>I am an alert</sl-alert> `);
|
|
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
|
|
|
|
expect(base.hidden).to.be.true;
|
|
});
|
|
|
|
it('should emit sl-show and sl-after-show when calling show()', async () => {
|
|
const el = await fixture<SlAlert>(html` <sl-alert>I am an alert</sl-alert> `);
|
|
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
|
|
const showHandler = sinon.spy();
|
|
const afterShowHandler = sinon.spy();
|
|
|
|
el.addEventListener('sl-show', showHandler);
|
|
el.addEventListener('sl-after-show', afterShowHandler);
|
|
void el.show();
|
|
|
|
await waitUntil(() => showHandler.calledOnce);
|
|
await waitUntil(() => afterShowHandler.calledOnce);
|
|
|
|
expect(showHandler).to.have.been.calledOnce;
|
|
expect(afterShowHandler).to.have.been.calledOnce;
|
|
expect(base.hidden).to.be.false;
|
|
});
|
|
|
|
it('should emit sl-hide and sl-after-hide when calling hide()', async () => {
|
|
const el = await fixture<SlAlert>(html` <sl-alert open>I am an alert</sl-alert> `);
|
|
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
|
|
const hideHandler = sinon.spy();
|
|
const afterHideHandler = sinon.spy();
|
|
|
|
el.addEventListener('sl-hide', hideHandler);
|
|
el.addEventListener('sl-after-hide', afterHideHandler);
|
|
void el.hide();
|
|
|
|
await waitUntil(() => hideHandler.calledOnce);
|
|
await waitUntil(() => afterHideHandler.calledOnce);
|
|
|
|
expect(hideHandler).to.have.been.calledOnce;
|
|
expect(afterHideHandler).to.have.been.calledOnce;
|
|
expect(base.hidden).to.be.true;
|
|
});
|
|
|
|
it('should emit sl-show and sl-after-show when setting open = true', async () => {
|
|
const el = await fixture<SlAlert>(html` <sl-alert>I am an alert</sl-alert> `);
|
|
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
|
|
const showHandler = sinon.spy();
|
|
const afterShowHandler = sinon.spy();
|
|
|
|
el.addEventListener('sl-show', showHandler);
|
|
el.addEventListener('sl-after-show', afterShowHandler);
|
|
el.open = true;
|
|
|
|
await waitUntil(() => showHandler.calledOnce);
|
|
await waitUntil(() => afterShowHandler.calledOnce);
|
|
|
|
expect(showHandler).to.have.been.calledOnce;
|
|
expect(afterShowHandler).to.have.been.calledOnce;
|
|
expect(base.hidden).to.be.false;
|
|
});
|
|
|
|
it('should emit sl-hide and sl-after-hide when setting open = false', async () => {
|
|
const el = await fixture<SlAlert>(html` <sl-alert open>I am an alert</sl-alert> `);
|
|
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
|
|
const hideHandler = sinon.spy();
|
|
const afterHideHandler = sinon.spy();
|
|
|
|
el.addEventListener('sl-hide', hideHandler);
|
|
el.addEventListener('sl-after-hide', afterHideHandler);
|
|
el.open = false;
|
|
|
|
await waitUntil(() => hideHandler.calledOnce);
|
|
await waitUntil(() => afterHideHandler.calledOnce);
|
|
|
|
expect(hideHandler).to.have.been.calledOnce;
|
|
expect(afterHideHandler).to.have.been.calledOnce;
|
|
expect(base.hidden).to.be.true;
|
|
});
|
|
});
|