Button tests (#667)

* initial button tests and setup helpers

* fix as many linting errors as I could

* switch back to regular fixtures

* test(button|button-group|divider|format-bytes) add tests for more components

* add tests for format util components

* finish format-number tests

* remove unnecessary ignore

src/components/format-bytes/format-bytes.test.ts

@@ -0,0 +1,125 @@
+import { expect, fixture, html, elementUpdated } from '@open-wc/testing';
+import type SlFormatBytes from './format-bytes';
+
+describe('<sl-format-bytes>', () => {
+
+  describe('defaults ', () => {
+
+    it('default properties', async () => {
+      const el = await fixture<SlFormatBytes>(html` <sl-format-bytes></sl-format-bytes> `);
+
+      expect(el.value).to.equal(0);
+      expect(el.unit).to.equal('byte');
+      expect(el.display).to.equal('short');
+      expect(el.lang).to.be.undefined;
+    });
+  });
+
+  describe('bytes', () => {
+
+    const results = [
+      {
+        value: 12,
+        short: '12 byte',
+        long: '12 bytes',
+        narrow: '12B',
+      },
+      {
+        value: 1200,
+        short: '1.2 kB',
+        long: '1.2 kilobytes',
+        narrow: '1.2kB',
+      },
+      {
+        value: 1200000,
+        short: '1.2 MB',
+        long: '1.2 megabytes',
+        narrow: '1.2MB',
+      },
+      {
+        value: 1200000000,
+        short: '1.2 GB',
+        long: '1.2 gigabytes',
+        narrow: '1.2GB',
+      }
+    ];
+
+
+    results.forEach((expected) => {
+      it('bytes : display formats', async () => {
+        const el = await fixture<SlFormatBytes>(html` <sl-format-bytes></sl-format-bytes> `);
+        // short
+        el.value = expected.value;
+        await elementUpdated(el);
+        expect(el.shadowRoot?.textContent).to.equal(expected.short);
+
+        // long
+        el.display = 'long';
+        el.value = expected.value;
+        await elementUpdated(el);
+        expect(el.shadowRoot?.textContent).to.equal(expected.long);
+
+        // narrow
+        el.display = 'narrow';
+        el.value = expected.value;
+        await elementUpdated(el);
+        expect(el.shadowRoot?.textContent).to.equal(expected.narrow);
+      });
+    });
+
+  });
+
+  describe('bits', () => {
+    const results = [
+      {
+        value: 12,
+        short: '12 bit',
+        long: '12 bits',
+        narrow: '12bit',
+      },
+      {
+        value: 1200,
+        short: '1.2 kb',
+        long: '1.2 kilobits',
+        narrow: '1.2kb',
+      },
+      {
+        value: 1200000,
+        short: '1.2 Mb',
+        long: '1.2 megabits',
+        narrow: '1.2Mb',
+      },
+      {
+        value: 1200000000,
+        short: '1.2 Gb',
+        long: '1.2 gigabits',
+        narrow: '1.2Gb',
+      }
+    ];
+
+
+    results.forEach((expected) => {
+      it('bits : display formats', async () => {
+        const el = await fixture<SlFormatBytes>(html` <sl-format-bytes unit="bit"></sl-format-bytes> `);
+        // short
+        el.value = expected.value;
+        await elementUpdated(el);
+        expect(el.shadowRoot?.textContent).to.equal(expected.short);
+
+        // long
+        el.display = 'long';
+        el.value = expected.value;
+        await elementUpdated(el);
+        expect(el.shadowRoot?.textContent).to.equal(expected.long);
+
+        // narrow
+        el.display = 'narrow';
+        el.value = expected.value;
+        await elementUpdated(el);
+        expect(el.shadowRoot?.textContent).to.equal(expected.narrow);
+      });
+    });
+
+  });
+
+});