kopia lustrzana https://github.com/shoelace-style/shoelace
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 ignorecalendar
Michael Warren
GitHub
rodzic
99e746ba81
commit
3144c45688
|
|
@ -7,3 +7,4 @@ examples
|
|||
node_modules
|
||||
src/react
|
||||
scripts
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -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;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
Ładowanie…
Reference in New Issue