From 3144c456881610e10f3a1b6103f5cdd62caa5dc3 Mon Sep 17 00:00:00 2001
From: Michael Warren <michaelwarren1106@gmail.com>
Date: Fri, 11 Mar 2022 08:56:24 -0500
Subject: [PATCH] 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
---
 .eslintignore                                 |   1 +
 .../button-group/button-group.test.ts         |  87 ++++++++
 src/components/button/button.test.ts          | 109 ++++++++++
 src/components/divider/divider.test.ts        |  36 ++++
 .../format-bytes/format-bytes.test.ts         | 125 ++++++++++++
 .../format-date/format-date.test.ts           | 193 ++++++++++++++++++
 .../format-number/format-number.test.ts       | 130 ++++++++++++
 7 files changed, 681 insertions(+)
 create mode 100644 src/components/button-group/button-group.test.ts
 create mode 100644 src/components/button/button.test.ts
 create mode 100644 src/components/divider/divider.test.ts
 create mode 100644 src/components/format-bytes/format-bytes.test.ts
 create mode 100644 src/components/format-date/format-date.test.ts
 create mode 100644 src/components/format-number/format-number.test.ts

diff --git a/.eslintignore b/.eslintignore
index 54363834..74acbbb5 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -7,3 +7,4 @@ examples
 node_modules
 src/react
 scripts
+
diff --git a/src/components/button-group/button-group.test.ts b/src/components/button-group/button-group.test.ts
new file mode 100644
index 00000000..3f2e2567
--- /dev/null
+++ b/src/components/button-group/button-group.test.ts
@@ -0,0 +1,87 @@
+import { expect, fixture, html, elementUpdated } from '@open-wc/testing';
+import type SlButtonGroup from './button-group';
+
+describe('<sl-button-group>', () => {
+
+  describe('defaults ', () => {
+    it('passes accessibility test', async () => {
+      const group = await fixture<SlButtonGroup>(html` <sl-button-group>
+        <sl-button>Button 1 Label</sl-button>
+        <sl-button>Button 2 Label</sl-button>
+        <sl-button>Button 3 Label</sl-button>
+      </sl-button-group> `);
+      await expect(group).to.be.accessible();
+    });
+
+    it('default label empty', async () => {
+      const group = await fixture<SlButtonGroup>(html` <sl-button-group>
+        <sl-button>Button 1 Label</sl-button>
+        <sl-button>Button 2 Label</sl-button>
+        <sl-button>Button 3 Label</sl-button>
+      </sl-button-group> `);
+      expect(group.label).to.equal('');
+    });
+  });
+
+  describe('slotted button classes', () => {
+
+    it('slotted buttons have the right classes applied based on their order', async () => {
+      const group = await fixture<SlButtonGroup>(html` <sl-button-group>
+        <sl-button>Button 1 Label</sl-button>
+        <sl-button>Button 2 Label</sl-button>
+        <sl-button>Button 3 Label</sl-button>
+      </sl-button-group> `);
+
+      const allButtons = group.querySelectorAll('sl-button');
+      const hasGroupClass = Array.from(allButtons).every((button) => button.classList.contains('sl-button-group__button'));
+      expect(hasGroupClass).to.be.true;
+
+      expect(allButtons[0]).to.have.class('sl-button-group__button--first');
+      expect(allButtons[1]).to.have.class('sl-button-group__button--inner');
+      expect(allButtons[2]).to.have.class('sl-button-group__button--last');
+
+    });
+  });
+
+  describe('focus and blur events', () => {
+    it('toggles focus class to slotted buttons on focus/blur', async () => {
+      const group = await fixture<SlButtonGroup>(html` <sl-button-group>
+        <sl-button>Button 1 Label</sl-button>
+        <sl-button>Button 2 Label</sl-button>
+        <sl-button>Button 3 Label</sl-button>
+      </sl-button-group> `);
+
+
+      const allButtons = group.querySelectorAll('sl-button');
+      allButtons[0].dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+
+      await elementUpdated(allButtons[0]);
+      expect(allButtons[0].classList.contains('sl-button-group__button--focus')).to.be.true;
+
+      allButtons[0].dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
+      await elementUpdated(allButtons[0]);
+      expect(allButtons[0].classList.contains('sl-button-group__button--focus')).not.to.be.true;
+    });
+  });
+
+  describe('mouseover and mouseout events', () => {
+    it('toggles hover class to slotted buttons on mouseover/mouseout', async () => {
+      const group = await fixture<SlButtonGroup>(html` <sl-button-group>
+        <sl-button>Button 1 Label</sl-button>
+        <sl-button>Button 2 Label</sl-button>
+        <sl-button>Button 3 Label</sl-button>
+      </sl-button-group> `);
+
+      const allButtons = group.querySelectorAll('sl-button');
+
+      allButtons[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+      await elementUpdated(allButtons[0]);
+      expect(allButtons[0].classList.contains('sl-button-group__button--hover')).to.be.true;
+
+      allButtons[0].dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
+      await elementUpdated(allButtons[0]);
+      expect(allButtons[0].classList.contains('sl-button-group__button--hover')).not.to.be.true;
+    });
+  });
+
+});
diff --git a/src/components/button/button.test.ts b/src/components/button/button.test.ts
new file mode 100644
index 00000000..43677116
--- /dev/null
+++ b/src/components/button/button.test.ts
@@ -0,0 +1,109 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import sinon from 'sinon';
+import type SlButton from './button';
+
+describe('<sl-button>', () => {
+
+  describe('when provided no parameters', () => {
+
+    it('passes accessibility test', async () => {
+      const el = await fixture<SlButton>(html` <sl-button>Button Label</sl-button> `);
+      await expect(el).to.be.accessible();
+    });
+
+    it('default values are set correctly', async () => {
+      const el = await fixture<SlButton>(html` <sl-button>Button Label</sl-button> `);
+
+      expect(el.variant).to.equal('default');
+      expect(el.size).to.equal('medium');
+      expect(el.disabled).to.equal(false);
+      expect(el.caret).to.equal(false);
+      expect(el.loading).to.equal(false);
+      expect(el.outline).to.equal(false);
+      expect(el.pill).to.equal(false);
+      expect(el.circle).to.equal(false);
+    });
+
+    it('should render as a <button>', async () => {
+      const el = await fixture<SlButton>(html` <sl-button>Button Label</sl-button> `);
+      expect(el.shadowRoot!.querySelector('button')).to.exist;
+      expect(el.shadowRoot!.querySelector('a')).not.to.exist;
+    });
+
+    it('should not have a spinner present', async () => {
+      const el = await fixture<SlButton>(html` <sl-button>Button Label</sl-button> `);
+      expect(el.shadowRoot!.querySelector('sl-spinner')).not.to.exist;
+    });
+
+    it('should not have a caret present', async () => {
+      const el = await fixture<SlButton>(html` <sl-button>Button Label</sl-button> `);
+      expect(el.shadowRoot?.querySelector('[part="caret"]')).not .to.exist;
+    });
+  });
+
+  describe('when disabled', () => {
+
+    it('passes accessibility test', async () => {
+      const el = await fixture<SlButton>(html` <sl-button disabled>Button Label</sl-button> `);
+      await expect(el).to.be.accessible();
+    });
+
+    it('should disable the native <button> when rendering a <button>', async () => {
+      const el = await fixture<SlButton>(html` <sl-button disabled>Button Label</sl-button> `);
+      expect(el.shadowRoot!.querySelector('button[disabled]')).to.exist;
+    });
+
+    it('should not disable the native <a> when rendering an <a>', async () => {
+      const el = await fixture<SlButton>(html` <sl-button href="some/path" disabled>Button Label</sl-button> `);
+      expect(el.shadowRoot!.querySelector('a[disabled]')).not.to.exist;
+    });
+
+    it('should not bubble up clicks', async () => {
+      const button = await fixture<SlButton>(html` <sl-button disabled>Button Label</sl-button> `);
+      const handleClick = sinon.spy();
+      button.addEventListener('click', handleClick);
+      button.click();
+
+      expect(handleClick).not.to.have.been.called;
+
+      button.shadowRoot!.querySelector('button')!.click();
+      expect(handleClick).not.to.have.been.called;
+
+      const buttonLink = await fixture<SlButton>(html` <sl-button href="some/path" disabled>Button Label</sl-button> `);
+      buttonLink.addEventListener('click', handleClick);
+      buttonLink.click();
+
+      expect(handleClick).not.to.have.been.called;
+
+      buttonLink.shadowRoot!.querySelector('a')!.click();
+      expect(handleClick).not.to.have.been.called;
+    });
+  });
+
+  describe('when loading', () => {
+
+    it('should have a spinner present', async () => {
+      const el = await fixture<SlButton>(html` <sl-button loading>Button Label</sl-button> `);
+      expect(el.shadowRoot!.querySelector('sl-spinner')).to.exist;
+    });
+
+  });
+
+  describe('when caret', () => {
+
+    it('should have a caret present', async () => {
+      const el = await fixture<SlButton>(html` <sl-button caret>Button Label</sl-button> `);
+      expect(el.shadowRoot!.querySelector('[part="caret"]')).to.exist;
+    });
+
+  });
+
+  describe('when href is present', () => {
+
+    it('should render as an <a>', async () => {
+      const el = await fixture<SlButton>(html` <sl-button href="some/path">Button Label</sl-button> `);
+      expect(el.shadowRoot!.querySelector('a')).to.exist;
+      expect(el.shadowRoot!.querySelector('button')).not.to.exist;
+    });
+  });
+});
diff --git a/src/components/divider/divider.test.ts b/src/components/divider/divider.test.ts
new file mode 100644
index 00000000..17456446
--- /dev/null
+++ b/src/components/divider/divider.test.ts
@@ -0,0 +1,36 @@
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import type SlDivider from './divider';
+
+describe('<sl-divider>', () => {
+
+  describe('defaults ', () => {
+    it('passes accessibility test', async () => {
+      const el = await fixture<SlDivider>(html` <sl-divider></sl-divider> `);
+      await expect(el).to.be.accessible();
+    });
+
+    it('default properties', async () => {
+      const el = await fixture<SlDivider>(html` <sl-divider></sl-divider> `);
+
+      expect(el.vertical).to.be.false;
+      expect(el.getAttribute('role')).to.equal('separator');
+      expect(el.getAttribute('aria-orientation')).to.equal('horizontal');
+    });
+  });
+
+  describe('vertical property change ', () => {
+
+    it('aria-orientation is updated', async () => {
+      const el = await fixture<SlDivider>(html` <sl-divider></sl-divider> `);
+
+      el.vertical = true;
+      await elementUpdated(el);
+
+      expect(el.getAttribute('aria-orientation')).to.equal('vertical');
+    });
+  });
+
+
+
+
+});
diff --git a/src/components/format-bytes/format-bytes.test.ts b/src/components/format-bytes/format-bytes.test.ts
new file mode 100644
index 00000000..3409a77e
--- /dev/null
+++ b/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);
+      });
+    });
+
+  });
+
+});
diff --git a/src/components/format-date/format-date.test.ts b/src/components/format-date/format-date.test.ts
new file mode 100644
index 00000000..93ae1e1d
--- /dev/null
+++ b/src/components/format-date/format-date.test.ts
@@ -0,0 +1,193 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import sinon from 'sinon';
+import type SlFormatDate from './format-date';
+
+describe('<sl-format-date>', () => {
+
+  describe('defaults ', () => {
+    let clock;
+
+    beforeEach(() => {
+      // fake timer so `new Date()` can be tested
+      clock = sinon.useFakeTimers({
+        now: new Date()
+      });
+    });
+
+    afterEach(() => {
+      clock.restore();
+    });
+
+    it('default properties', async () => {
+      const el = await fixture<SlFormatDate>(html` <sl-format-date></sl-format-date> `);
+      expect(el.date).to.deep.equal(new Date());
+
+      expect(el.lang).to.be.undefined;
+      expect(el.weekday).to.be.undefined;
+      expect(el.era).to.be.undefined;
+      expect(el.year).to.be.undefined;
+      expect(el.month).to.be.undefined;
+      expect(el.day).to.be.undefined;
+      expect(el.hour).to.be.undefined;
+      expect(el.minute).to.be.undefined;
+      expect(el.second).to.be.undefined;
+      expect(el.timeZoneName).to.be.undefined;
+      expect(el.timeZone).to.be.undefined;
+      expect(el.hourFormat).to.equal('auto');
+
+    });
+  });
+
+  describe('lang property', () => {
+    const results = [
+      { lang: 'de', result: `1.1.${new Date().getFullYear()}`},
+      { lang: 'de-CH', result: `1.1.${new Date().getFullYear()}`},
+      { lang: 'fr', result: `01/01/${new Date().getFullYear()}`},
+      { lang: 'es', result: `1/1/${new Date().getFullYear()}`},
+      { lang: 'he', result: `1.1.${new Date().getFullYear()}`},
+      { lang: 'ja', result: `${new Date().getFullYear()}/1/1`},
+      { lang: 'nl', result: `1-1-${new Date().getFullYear()}`},
+      { lang: 'pl', result: `1.01.${new Date().getFullYear()}`},
+      { lang: 'pt', result: `01/01/${new Date().getFullYear()}`},
+      { lang: 'ru', result: `01.01.${new Date().getFullYear()}`},
+    ]
+    results.forEach((setup) => {
+      it(`date has correct language format: ${setup.lang}`, async () => {
+        const el = await fixture<SlFormatDate>(html` <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" lang="${setup.lang}"></sl-format-date> `);
+        expect(el.shadowRoot?.textContent).to.equal(setup.result);
+      });
+    });
+  });
+
+  describe('weekday property', () => {
+    const weekdays = [ 'narrow', 'short', 'long'];
+    weekdays.forEach((weekdayFormat: 'narrow' | 'short' | 'long') => {
+      it(`date has correct weekday format: ${weekdayFormat}`, async () => {
+        const el = await fixture<SlFormatDate>(html` <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" weekday="${weekdayFormat}"></sl-format-date> `);
+
+        const expected = new Intl.DateTimeFormat('en-US', { weekday: weekdayFormat}).format(new Date(new Date().getFullYear(), 0, 1))
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('era property', () => {
+    const eras = [ 'narrow', 'short', 'long'];
+    eras.forEach((eraFormat: 'narrow' | 'short' | 'long') => {
+      it(`date has correct era format: ${eraFormat}`, async () => {
+        const el = await fixture<SlFormatDate>(html` <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" era="${eraFormat}"></sl-format-date> `);
+
+        const expected = new Intl.DateTimeFormat('en-US', { era: eraFormat}).format(new Date(new Date().getFullYear(), 0, 1))
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('year property', () => {
+    const yearFormats = [ 'numeric', '2-digit'];
+    yearFormats.forEach((yearFormat: 'numeric' | '2-digit') => {
+      it(`date has correct year format: ${yearFormats}`, async () => {
+        const el = await fixture<SlFormatDate>(html` <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" year="${yearFormat}"></sl-format-date> `);
+
+        const expected = new Intl.DateTimeFormat('en-US', { year: yearFormat}).format(new Date(new Date().getFullYear(), 0, 1))
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('month property', () => {
+    const monthFormats = [ 'numeric', '2-digit', 'narrow', 'short', 'long'];
+    monthFormats.forEach((monthFormat: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long') => {
+      it(`date has correct month format: ${monthFormats}`, async () => {
+        const el = await fixture<SlFormatDate>(html` <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" month="${monthFormat}"></sl-format-date> `);
+
+        const expected = new Intl.DateTimeFormat('en-US', { month: monthFormat}).format(new Date(new Date().getFullYear(), 0, 1))
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('day property', () => {
+    const dayFormats = [ 'numeric', '2-digit'];
+    dayFormats.forEach((dayFormat: 'numeric' | '2-digit') => {
+      it(`date has correct day format: ${dayFormats}`, async () => {
+        const el = await fixture<SlFormatDate>(html` <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" day="${dayFormat}"></sl-format-date> `);
+
+        const expected = new Intl.DateTimeFormat('en-US', { day: dayFormat}).format(new Date(new Date().getFullYear(), 0, 1))
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('hour property', () => {
+    const hourFormats = [ 'numeric', '2-digit'];
+    hourFormats.forEach((hourFormat: 'numeric' | '2-digit') => {
+      it(`date has correct hour format: ${hourFormats}`, async () => {
+        const el = await fixture<SlFormatDate>(html` <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" hour="${hourFormat}"></sl-format-date> `);
+
+        const expected = new Intl.DateTimeFormat('en-US', { hour: hourFormat}).format(new Date(new Date().getFullYear(), 0, 1))
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('minute property', () => {
+    const minuteFormats = [ 'numeric', '2-digit'];
+    minuteFormats.forEach((minuteFormat: 'numeric' | '2-digit') => {
+      it(`date has correct minute format: ${minuteFormats}`, async () => {
+        const el = await fixture<SlFormatDate>(html` <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" minute="${minuteFormat}"></sl-format-date> `);
+
+        const expected = new Intl.DateTimeFormat('en-US', { minute: minuteFormat}).format(new Date(new Date().getFullYear(), 0, 1))
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('second property', () => {
+    const secondFormats = [ 'numeric', '2-digit'];
+    secondFormats.forEach((secondFormat: 'numeric' | '2-digit') => {
+      it(`date has correct second format: ${secondFormats}`, async () => {
+        const el = await fixture<SlFormatDate>(html` <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" second="${secondFormat}"></sl-format-date> `);
+
+        const expected = new Intl.DateTimeFormat('en-US', { second: secondFormat}).format(new Date(new Date().getFullYear(), 0, 1))
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('timeZoneName property', () => {
+    const timeZoneNameFormats = [ 'short', 'long'];
+    timeZoneNameFormats.forEach((timeZoneNameFormat: 'short' | 'long') => {
+      it(`date has correct timeZoneName format: ${timeZoneNameFormats}`, async () => {
+        const el = await fixture<SlFormatDate>(html` <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" time-zone-name="${timeZoneNameFormat}"></sl-format-date> `);
+
+        const expected = new Intl.DateTimeFormat('en-US', { timeZoneName: timeZoneNameFormat}).format(new Date(new Date().getFullYear(), 0, 1))
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('timeZone property', () => {
+    const timeZones = [ 'America/New_York', 'America/Los_Angeles', 'Europe/Zurich'];
+    timeZones.forEach((timeZone) => {
+      it(`date has correct timeZoneName format: ${timeZone}`, async () => {
+        const el = await fixture<SlFormatDate>(html` <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" time-zone="${timeZone}"></sl-format-date> `);
+
+        const expected = new Intl.DateTimeFormat('en-US', { timeZone: timeZone}).format(new Date(new Date().getFullYear(), 0, 1))
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('hourFormat property', () => {
+    const hourFormatValues = [ 'auto', '12', '24'];
+    hourFormatValues.forEach((hourFormatValue) => {
+      it(`date has correct hourFormat format: ${hourFormatValue}`, async () => {
+        const el = await fixture<SlFormatDate>(html` <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" hour-format="${hourFormatValue}"></sl-format-date> `);
+
+        const expected = new Intl.DateTimeFormat('en-US', { hour12: hourFormatValue === 'auto' ? undefined : hourFormatValue === '12'}).format(new Date(new Date().getFullYear(), 0, 1))
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+});
diff --git a/src/components/format-number/format-number.test.ts b/src/components/format-number/format-number.test.ts
new file mode 100644
index 00000000..23157b83
--- /dev/null
+++ b/src/components/format-number/format-number.test.ts
@@ -0,0 +1,130 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import type SlFormatNumber from './format-number';
+
+describe('<sl-format-number>', () => {
+
+  describe('defaults ', () => {
+    it('default properties', async () => {
+      const el = await fixture<SlFormatNumber>(html` <sl-format-number></sl-format-number> `);
+      expect(el.value).to.equal(0);
+
+      expect(el.lang).to.be.undefined;
+      expect(el.type).to.equal('decimal');
+      expect(el.noGrouping).to.be.false;
+      expect(el.currency).to.equal('USD');
+      expect(el.currencyDisplay).to.equal('symbol');
+      expect(el.minimumIntegerDigits).to.be.undefined;
+      expect(el.minimumFractionDigits).to.be.undefined;
+      expect(el.maximumFractionDigits).to.be.undefined;
+      expect(el.minimumSignificantDigits).to.be.undefined;
+      expect(el.maximumSignificantDigits).to.be.undefined;
+
+    });
+  });
+
+  describe('lang property', () => {
+    [ 'de', 'de-CH', 'fr', 'es', 'he', 'ja', 'nl', 'pl', 'pt', 'ru' ].forEach((lang) => {
+      it(`number has correct language format: ${lang}`, async () => {
+        const el = await fixture<SlFormatNumber>(html` <sl-format-number value="1000" lang="${lang}"></sl-format-date> `);
+        const expected = new Intl.NumberFormat(lang, { style: 'decimal', useGrouping: true }).format(1000);
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('type property', () => {
+    [ 'currency', 'decimal', 'percent' ].forEach((type) => {
+      it(`number has correct type format: ${type}`, async () => {
+        const el = await fixture<SlFormatNumber>(html` <sl-format-number value="1000" type="${type}"></sl-format-date> `);
+        const expected = new Intl.NumberFormat('en-US', { style: type, currency: 'USD'}).format(1000);
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('noGrouping property', () => {
+
+    it(`number has correct grouping format: no grouping`, async () => {
+      const el = await fixture<SlFormatNumber>(html` <sl-format-number value="1000" no-grouping></sl-format-date> `);
+      const expected = new Intl.NumberFormat('en-US', { useGrouping: false} ).format(1000);
+      expect(el.shadowRoot?.textContent).to.equal(expected);
+    });
+
+    it(`number has correct grouping format: grouping`, async () => {
+      const el = await fixture<SlFormatNumber>(html` <sl-format-number value="1000"></sl-format-date> `);
+      const expected = new Intl.NumberFormat('en-US', { useGrouping: true }).format(1000);
+      expect(el.shadowRoot?.textContent).to.equal(expected);
+    });
+  });
+
+  describe('currency property', () => {
+    [ 'USD', 'CAD', 'AUD', 'UAH' ].forEach((currency) => {
+      it(`number has correct type format: ${currency}`, async () => {
+        const el = await fixture<SlFormatNumber>(html` <sl-format-number value="1000" currency="${currency}"></sl-format-date> `);
+        const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currency: currency}).format(1000);
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('currencyDisplay property', () => {
+    [ 'symbol', 'narrowSymbol', 'code', 'name' ].forEach((currencyDisplay) => {
+      it(`number has correct type format: ${currencyDisplay}`, async () => {
+        const el = await fixture<SlFormatNumber>(html` <sl-format-number value="1000" currency-display="${currencyDisplay}"></sl-format-date> `);
+        const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currencyDisplay: currencyDisplay}).format(1000);
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('minimumIntegerDigits property', () => {
+    [ 4, 5, 6 ].forEach((minDigits) => {
+      it(`number has correct type format: ${minDigits}`, async () => {
+        const el = await fixture<SlFormatNumber>(html` <sl-format-number value="1000" minimum-integer-digits="${minDigits}"></sl-format-date> `);
+        const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currencyDisplay: 'symbol', minimumIntegerDigits: minDigits}).format(1000);
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('minimumFractionDigits property', () => {
+    [ 4, 5, 6 ].forEach((minFractionDigits) => {
+      it(`number has correct type format: ${minFractionDigits}`, async () => {
+        const el = await fixture<SlFormatNumber>(html` <sl-format-number value="1000" minimum-fraction-digits="${minFractionDigits}"></sl-format-date> `);
+        const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currencyDisplay: 'symbol', minimumFractionDigits: minFractionDigits}).format(1000);
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('maximumFractionDigits property', () => {
+    [ 4, 5, 6 ].forEach((maxFractionDigits) => {
+      it(`number has correct type format: ${maxFractionDigits}`, async () => {
+        const el = await fixture<SlFormatNumber>(html` <sl-format-number value="1000" maximum-fraction-digits="${maxFractionDigits}"></sl-format-date> `);
+        const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currencyDisplay: 'symbol', maximumFractionDigits: maxFractionDigits}).format(1000);
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('minimumSignificantDigits property', () => {
+    [ 4, 5, 6 ].forEach((minSignificantDigits) => {
+      it(`number has correct type format: ${minSignificantDigits}`, async () => {
+        const el = await fixture<SlFormatNumber>(html` <sl-format-number value="1000" minimum-significant-digits="${minSignificantDigits}"></sl-format-date> `);
+        const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currencyDisplay: 'symbol', minimumSignificantDigits: minSignificantDigits}).format(1000);
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+  describe('maximumSignificantDigits property', () => {
+    [ 4, 5, 6 ].forEach((maxSignificantDigits) => {
+      it(`number has correct type format: ${maxSignificantDigits}`, async () => {
+        const el = await fixture<SlFormatNumber>(html` <sl-format-number value="1000" maximum-significant-digits="${maxSignificantDigits}"></sl-format-date> `);
+        const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currencyDisplay: 'symbol', maximumSignificantDigits: maxSignificantDigits}).format(1000);
+        expect(el.shadowRoot?.textContent).to.equal(expected);
+      });
+    });
+  });
+
+});