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

* add test for SlTag

* add all classes (even not test relevant ones) to fix failing tests
---
 src/components/tag/tag.test.ts | 64 ++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/components/tag/tag.test.ts

diff --git a/src/components/tag/tag.test.ts b/src/components/tag/tag.test.ts
new file mode 100644
index 000000000..67bb6df2d
--- /dev/null
+++ b/src/components/tag/tag.test.ts
@@ -0,0 +1,64 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import sinon from 'sinon';
+import type SlTag from './tag';
+
+describe('<sl-tag>', () => {
+  it('should render default tag', async () => {
+    const el = await fixture<SlTag>(html` <sl-tag>Test</sl-tag> `);
+
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+
+    expect(el.getAttribute('size')).to.equal('medium');
+    expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--medium ');
+  });
+
+  it('should set variant by attribute', async () => {
+    const el = await fixture<SlTag>(html` <sl-tag variant="danger">Test</sl-tag> `);
+
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+
+    expect(base.getAttribute('class')).to.equal(' tag tag--danger tag--medium ');
+  });
+
+  it('should set size by attribute', async () => {
+    const el = await fixture<SlTag>(html` <sl-tag size="large">Test</sl-tag> `);
+
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+
+    expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--large ');
+  });
+
+  it('should set pill-attribute by attribute', async () => {
+    const el = await fixture<SlTag>(html` <sl-tag pill>Test</sl-tag> `);
+
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+
+    expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--medium tag--pill ');
+  });
+
+  it('should set removable by attribute', async () => {
+    const el = await fixture<SlTag>(html` <sl-tag removable>Test</sl-tag> `);
+
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const removeButton = el.shadowRoot!.querySelector('[part="remove-button"]');
+
+    expect(el.removable).to.equal(true);
+    expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--medium tag--removable ');
+    expect(removeButton).not.to.be.null;
+  });
+
+  describe('removable', () => {
+    it('should emit remove event when remove button clicked', async () => {
+      const el = await fixture<SlTag>(html` <sl-tag removable>Test</sl-tag> `);
+
+      const removeButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part="remove-button"]')!;
+      const spy = sinon.spy();
+
+      el.addEventListener('sl-remove', spy, { once: true });
+
+      removeButton.click();
+
+      expect(spy.called).to.equal(true);
+    });
+  });
+});