2023-06-13 19:43:21 +00:00
|
|
|
import '../../../dist/shoelace.js';
|
2022-10-24 14:04:30 +00:00
|
|
|
import { expect, fixture, html } from '@open-wc/testing';
|
2023-12-08 17:30:31 +00:00
|
|
|
import type SlSkeleton from './skeleton.js';
|
2022-10-24 14:04:30 +00:00
|
|
|
|
|
|
|
describe('<sl-skeleton>', () => {
|
|
|
|
it('should render default skeleton', async () => {
|
|
|
|
const el = await fixture<SlSkeleton>(html` <sl-skeleton></sl-skeleton> `);
|
|
|
|
|
|
|
|
await expect(el).to.be.accessible();
|
|
|
|
|
2022-11-17 14:35:44 +00:00
|
|
|
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
|
|
|
|
const indicator = el.shadowRoot!.querySelector<HTMLElement>('[part~="indicator"]')!;
|
2022-10-24 14:04:30 +00:00
|
|
|
|
|
|
|
expect(base.getAttribute('class')).to.equal(' skeleton ');
|
|
|
|
expect(indicator.getAttribute('class')).to.equal('skeleton__indicator');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should set pulse effect by attribute', async () => {
|
|
|
|
const el = await fixture<SlSkeleton>(html` <sl-skeleton effect="pulse"></sl-skeleton> `);
|
|
|
|
|
2022-11-17 14:35:44 +00:00
|
|
|
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
|
2022-10-24 14:04:30 +00:00
|
|
|
|
|
|
|
expect(base.getAttribute('class')).to.equal(' skeleton skeleton--pulse ');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should set sheen effect by attribute', async () => {
|
|
|
|
const el = await fixture<SlSkeleton>(html` <sl-skeleton effect="sheen"></sl-skeleton> `);
|
|
|
|
|
2022-11-17 14:35:44 +00:00
|
|
|
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
|
2022-10-24 14:04:30 +00:00
|
|
|
|
|
|
|
expect(base.getAttribute('class')).to.equal(' skeleton skeleton--sheen ');
|
|
|
|
});
|
|
|
|
});
|