From c025208bf5b469682373e5e3fe8fb7b5201a92b1 Mon Sep 17 00:00:00 2001
From: Christos Hrousis <christos.hrousis@gmail.com>
Date: Mon, 20 Sep 2021 18:11:00 +1000
Subject: [PATCH] test: first pass for badge test

---
 src/components/badge/badge.test.ts | 77 ++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 src/components/badge/badge.test.ts

diff --git a/src/components/badge/badge.test.ts b/src/components/badge/badge.test.ts
new file mode 100644
index 0000000000..ba1a09626c
--- /dev/null
+++ b/src/components/badge/badge.test.ts
@@ -0,0 +1,77 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import '../../../dist/shoelace.js';
+import type SlBadge from './badge';
+
+describe('<sl-badge>', () => {
+  let el;
+
+  describe('when provided no parameters', async () => {
+    before(async () => {
+      el = await fixture<SlBadge>(html` <sl-badge>Badge</sl-badge> `);
+    });
+
+    it('should render a component that passes accessibility test, with a role of status on the base part.', async () => {
+      await expect(el).to.be.accessible();
+
+      const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
+      expect(part.getAttribute('role')).to.eq('status');
+    });
+
+    it('should render the child content provided', async () => {
+      expect(el.innerText).to.eq('Badge');
+    });
+
+    it('should default to square styling, with the primary color', async () => {
+      const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
+      expect(part.classList.value).to.eq('badge badge--primary');
+    });
+  });
+
+  describe('when provided a pill parameter', async () => {
+    before(async () => {
+      el = await fixture<SlBadge>(html` <sl-badge pill>Badge</sl-badge> `);
+    });
+
+    it('should render a component that passes accessibility test', async () => {
+      await expect(el).to.be.accessible();
+    });
+
+    it('should append the pill class to the classlist to render a pill', async () => {
+      const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
+      expect(part.classList.value).to.eq('badge badge--primary badge--pill');
+    });
+  });
+
+  describe('when provided a pulse parameter', async () => {
+    before(async () => {
+      el = await fixture<SlBadge>(html` <sl-badge pulse>Badge</sl-badge> `);
+    });
+
+    it('should render a component that passes accessibility test', async () => {
+      await expect(el).to.be.accessible();
+    });
+
+    it('should append the pulse class to the classlist to render a pulse', async () => {
+      const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
+      expect(part.classList.value).to.eq('badge badge--primary badge--pulse');
+    });
+  });
+
+  ['primary', 'success', 'neutral', 'warning', 'danger'].forEach(type => {
+    describe(`when passed a type attribute ${type}`, () => {
+      before(async () => {
+        el = await fixture<SlBadge>(html`<sl-badge type="${type}">Badge</sl-badge>`);
+      });
+
+      it('should render a component that passes accessibility test', async () => {
+        await expect(el).to.be.accessible();
+      });
+
+      it('should default to square styling, with the primary color', async () => {
+        const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
+        expect(part.classList.value).to.eq(`badge badge--${type}`);
+      });
+    });
+  });
+});