js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 11:09:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

prettier + tag fix

Browse Source
This commit is contained in:
Cory LaViska
2022-03-11 09:14:17 -05:00
parent 3144c45688
commit 469c03f5e7
6 changed files with 255 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/button-group/button-group.test.ts
View File

@@ -2,55 +2,61 @@ 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> `);
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> `);
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 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'));
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 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 }));
@@ -66,11 +72,13 @@ describe('<sl-button-group>', () => {
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 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');
@@ -83,5 +91,4 @@ describe('<sl-button-group>', () => {
expect(allButtons[0].classList.contains('sl-button-group__button--hover')).not.to.be.true;
});
});
});

10
src/components/button/button.test.ts
View File

@@ -3,9 +3,7 @@ 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();
@@ -37,12 +35,11 @@ describe('<sl-button>', () => {
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;
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();
@@ -81,25 +78,20 @@ describe('<sl-button>', () => {
});
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;

6
src/components/divider/divider.test.ts
View File

@@ -2,7 +2,6 @@ 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> `);
@@ -19,7 +18,6 @@ describe('<sl-divider>', () => {
});
describe('vertical property change ', () => {
it('aria-orientation is updated', async () => {
const el = await fixture<SlDivider>(html` <sl-divider></sl-divider> `);
@@ -29,8 +27,4 @@ describe('<sl-divider>', () => {
expect(el.getAttribute('aria-orientation')).to.equal('vertical');
});
});
});

28
src/components/format-bytes/format-bytes.test.ts
View File

@@ -2,9 +2,7 @@ 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> `);
@@ -16,36 +14,34 @@ describe('<sl-format-bytes>', () => {
});
describe('bytes', () => {
const results = [
{
value: 12,
short: '12 byte',
long: '12 bytes',
narrow: '12B',
narrow: '12B'
},
{
value: 1200,
short: '1.2 kB',
long: '1.2 kilobytes',
narrow: '1.2kB',
narrow: '1.2kB'
},
{
value: 1200000,
short: '1.2 MB',
long: '1.2 megabytes',
narrow: '1.2MB',
narrow: '1.2MB'
},
{
value: 1200000000,
short: '1.2 GB',
long: '1.2 gigabytes',
narrow: '1.2GB',
narrow: '1.2GB'
}
];
results.forEach((expected) => {
results.forEach(expected => {
it('bytes : display formats', async () => {
const el = await fixture<SlFormatBytes>(html` <sl-format-bytes></sl-format-bytes> `);
// short
@@ -66,7 +62,6 @@ describe('<sl-format-bytes>', () => {
expect(el.shadowRoot?.textContent).to.equal(expected.narrow);
});
});
});
describe('bits', () => {
@@ -75,30 +70,29 @@ describe('<sl-format-bytes>', () => {
value: 12,
short: '12 bit',
long: '12 bits',
narrow: '12bit',
narrow: '12bit'
},
{
value: 1200,
short: '1.2 kb',
long: '1.2 kilobits',
narrow: '1.2kb',
narrow: '1.2kb'
},
{
value: 1200000,
short: '1.2 Mb',
long: '1.2 megabits',
narrow: '1.2Mb',
narrow: '1.2Mb'
},
{
value: 1200000000,
short: '1.2 Gb',
long: '1.2 gigabits',
narrow: '1.2Gb',
narrow: '1.2Gb'
}
];
results.forEach((expected) => {
results.forEach(expected => {
it('bits : display formats', async () => {
const el = await fixture<SlFormatBytes>(html` <sl-format-bytes unit="bit"></sl-format-bytes> `);
// short
@@ -119,7 +113,5 @@ describe('<sl-format-bytes>', () => {
expect(el.shadowRoot?.textContent).to.equal(expected.narrow);
});
});
});
});

183
src/components/format-date/format-date.test.ts
View File

@@ -3,7 +3,6 @@ import sinon from 'sinon';
import type SlFormatDate from './format-date';
describe('<sl-format-date>', () => {
describe('defaults ', () => {
let clock;
@@ -34,158 +33,242 @@ describe('<sl-format-date>', () => {
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) => {
{ 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> `);
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'];
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 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))
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'];
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 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))
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'];
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 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))
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'];
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 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))
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'];
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 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))
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'];
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 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))
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'];
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 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))
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'];
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 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))
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'];
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 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))
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) => {
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 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))
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) => {
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 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))
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);
});
});

106
src/components/format-number/format-number.test.ts
View File

@@ -2,7 +2,6 @@ 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> `);
@@ -18,14 +17,15 @@ describe('<sl-format-number>', () => {
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) => {
['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 el = await fixture<SlFormatNumber>(
html` <sl-format-number value="1000" lang="${lang}"></sl-format-number> `
);
const expected = new Intl.NumberFormat(lang, { style: 'decimal', useGrouping: true }).format(1000);
expect(el.shadowRoot?.textContent).to.equal(expected);
});
@@ -33,98 +33,138 @@ describe('<sl-format-number>', () => {
});
describe('type property', () => {
[ 'currency', 'decimal', 'percent' ].forEach((type) => {
['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);
const el = await fixture<SlFormatNumber>(
html` <sl-format-number value="1000" type="${type}"></sl-format-number> `
);
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);
const el = await fixture<SlFormatNumber>(html` <sl-format-number value="1000" no-grouping></sl-format-number> `);
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 el = await fixture<SlFormatNumber>(html` <sl-format-number value="1000"></sl-format-number> `);
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) => {
['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);
const el = await fixture<SlFormatNumber>(
html` <sl-format-number value="1000" currency="${currency}"></sl-format-number> `
);
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) => {
['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);
const el = await fixture<SlFormatNumber>(
html` <sl-format-number value="1000" currency-display="${currencyDisplay}"></sl-format-number> `
);
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) => {
[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);
const el = await fixture<SlFormatNumber>(
html` <sl-format-number value="1000" minimum-integer-digits="${minDigits}"></sl-format-number> `
);
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) => {
[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);
const el = await fixture<SlFormatNumber>(
html` <sl-format-number value="1000" minimum-fraction-digits="${minFractionDigits}"></sl-format-number> `
);
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) => {
[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);
const el = await fixture<SlFormatNumber>(
html` <sl-format-number value="1000" maximum-fraction-digits="${maxFractionDigits}"></sl-format-number> `
);
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) => {
[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);
const el = await fixture<SlFormatNumber>(
html`
<sl-format-number value="1000" minimum-significant-digits="${minSignificantDigits}"></sl-format-number>
`
);
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) => {
[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);
const el = await fixture<SlFormatNumber>(
html`
<sl-format-number value="1000" maximum-significant-digits="${maxSignificantDigits}"></sl-format-number>
`
);
const expected = new Intl.NumberFormat('en-US', {
style: 'decimal',
currencyDisplay: 'symbol',
maximumSignificantDigits: maxSignificantDigits
}).format(1000);
expect(el.shadowRoot?.textContent).to.equal(expected);
});
});
});
});