From 3b4d0652c4137c7cf2f00db9e6dd93cc8374eb75 Mon Sep 17 00:00:00 2001
From: Felix Becker <71324952+fbecker-complex@users.noreply.github.com>
Date: Mon, 24 Oct 2022 16:04:30 +0200
Subject: [PATCH] testing: components/skeleton (#951)

* add tests for SlSkeleton

* check base aria-properties too
---
 src/components/skeleton/skeleton.test.ts | 34 ++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/skeleton/skeleton.test.ts

diff --git a/src/components/skeleton/skeleton.test.ts b/src/components/skeleton/skeleton.test.ts
new file mode 100644
index 000000000..2f33ef3e5
--- /dev/null
+++ b/src/components/skeleton/skeleton.test.ts
@@ -0,0 +1,34 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import type SlSkeleton from './skeleton';
+
+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();
+
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const indicator = el.shadowRoot!.querySelector<HTMLElement>('[part="indicator"]')!;
+
+    expect(base.getAttribute('class')).to.equal(' skeleton ');
+    expect(base.getAttribute('aria-busy')).to.equal('true');
+    expect(base.getAttribute('aria-live')).to.equal('polite');
+    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> `);
+
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+
+    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> `);
+
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+
+    expect(base.getAttribute('class')).to.equal(' skeleton skeleton--sheen ');
+  });
+});