js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

added tests for details

Browse Source
This commit is contained in:
Cory LaViska
2021-05-28 21:53:38 -04:00
parent 95e3f5e0e8
commit b13e637593
1 changed files with 152 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/components/details/details.test.ts Normal file
View File

@@ -0,0 +1,152 @@
import { expect, fixture, html, waitUntil } from '@open-wc/testing';
import sinon from 'sinon';
import '../../../dist/shoelace.js';
import type SlDetails from './details';
describe('<sl-details>', () => {
it('should be visible with the open attribute', async () => {
const el = await fixture(html`
<sl-details open>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</sl-details>
`);
const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
expect(body.hidden).to.be.false;
});
it('should not be visible without the open attribute', async () => {
const el = await fixture(html`
<sl-details>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</sl-details>
`);
const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
expect(body.hidden).to.be.true;
});
it('should emit sl-show and sl-after-show when calling show()', async () => {
const el = (await fixture(html`
<sl-details>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</sl-details>
`)) as SlDetails;
const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
el.addEventListener('sl-show', showHandler);
el.addEventListener('sl-after-show', afterShowHandler);
el.show();
await waitUntil(() => showHandler.calledOnce);
await waitUntil(() => afterShowHandler.calledOnce);
expect(showHandler).to.have.been.calledOnce;
expect(afterShowHandler).to.have.been.calledOnce;
expect(body.hidden).to.be.false;
});
it('should emit sl-hide and sl-after-hide when calling hide()', async () => {
const el = (await fixture(html`
<sl-details open>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</sl-details>
`)) as SlDetails;
const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
el.addEventListener('sl-hide', hideHandler);
el.addEventListener('sl-after-hide', afterHideHandler);
el.hide();
await waitUntil(() => hideHandler.calledOnce);
await waitUntil(() => afterHideHandler.calledOnce);
expect(hideHandler).to.have.been.calledOnce;
expect(afterHideHandler).to.have.been.calledOnce;
expect(body.hidden).to.be.true;
});
it('should emit sl-show and sl-after-show when adding the open attribute', async () => {
const el = (await fixture(html`
<sl-details>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</sl-details>
`)) as SlDetails;
const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
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(body.hidden).to.be.false;
});
it('should emit sl-hide and sl-after-hide when removing the open attribute', async () => {
const el = (await fixture(html`
<sl-details open>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</sl-details>
`)) as SlDetails;
const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
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(body.hidden).to.be.true;
});
it('should be the correct size after opening more than one instance', async () => {
const el = await fixture(html`
<div>
<sl-details>
<div style="height: 200px;"></div>
</sl-details>
<sl-details>
<div style="height: 400px;"></div>
</sl-details>
</div>
`);
const first = el.querySelectorAll('sl-details')[0];
const second = el.querySelectorAll('sl-details')[1];
const firstBody = first.shadowRoot?.querySelector('.details__body');
const secondBody = second.shadowRoot?.querySelector('.details__body');
await first.show();
await second.show();
expect(firstBody!.clientHeight).to.equal(200);
expect(secondBody!.clientHeight).to.equal(400);
});
});