ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(input-date): do not throw for invalid date instances

Browse source
This commit is contained in:
Thomas Allmer 2020-03-09 12:37:04 +01:00 committed by Thomas Allmer
parent 54c4432b81
commit 2ef69f8e02
2 changed files with 39 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/input-date/src/LionInputDate.js
View file

@ -2,6 +2,12 @@ import { LionInput } from '@lion/input';
import { formatDate, LocalizeMixin, parseDate } from '@lion/localize'; import { formatDate, LocalizeMixin, parseDate } from '@lion/localize';
import { IsDate } from '@lion/validate'; import { IsDate } from '@lion/validate';
function isValidDate(date) {
// to make sure it is a valid date we use isNaN and not Number.isNaN
// eslint-disable-next-line no-restricted-globals
return date instanceof Date && !isNaN(date);
}
/** /**
* `LionInputDate` has a .modelValue of type Date. It parses, formats and validates based * `LionInputDate` has a .modelValue of type Date. It parses, formats and validates based
* on locale. * on locale.
@ -38,7 +44,7 @@ export class LionInputDate extends LocalizeMixin(LionInput) {
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
serializer(modelValue) { serializer(modelValue) {
if (!(modelValue instanceof Date)) { if (!isValidDate(modelValue)) {
return ''; return '';
} }
// modelValue is localized, so we take the timezone offset in milliseconds and subtract it // modelValue is localized, so we take the timezone offset in milliseconds and subtract it

69
packages/input-date/test/lion-input-date.test.js
View file

@ -13,29 +13,23 @@ describe('<lion-input-date>', () => {
}); });
it('returns undefined when value is empty string', async () => { it('returns undefined when value is empty string', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-input-date></lion-input-date>
<lion-input-date></lion-input-date> `);
`,
);
expect(el.parser('')).to.equal(undefined); expect(el.parser('')).to.equal(undefined);
}); });
it('has type="text" to activate default keyboard on mobile with all necessary symbols', async () => { it('has type="text" to activate default keyboard on mobile with all necessary symbols', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-input-date></lion-input-date>
<lion-input-date></lion-input-date> `);
`,
);
expect(el._inputNode.type).to.equal('text'); expect(el._inputNode.type).to.equal('text');
}); });
it('has validator "isDate" applied by default', async () => { it('has validator "isDate" applied by default', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-input-date></lion-input-date>
<lion-input-date></lion-input-date> `);
`,
);
el.modelValue = '2005/11/10'; el.modelValue = '2005/11/10';
expect(el.hasFeedbackFor).to.include('error'); expect(el.hasFeedbackFor).to.include('error');
expect(el.validationStates).to.have.a.property('error'); expect(el.validationStates).to.have.a.property('error');
@ -47,6 +41,15 @@ describe('<lion-input-date>', () => {
expect(el.validationStates.error).not.to.have.a.property('IsDate'); expect(el.validationStates.error).not.to.have.a.property('IsDate');
}); });
it("does not throw on invalid dates like new Date('foo')", async () => {
const el = await fixture(html`
<lion-input-date></lion-input-date>
`);
expect(() => {
el.modelValue = new Date('foo');
}).to.not.throw();
});
it('gets validated by "MaxDate" correctly', async () => { it('gets validated by "MaxDate" correctly', async () => {
const el = await fixture(html` const el = await fixture(html`
<lion-input-date <lion-input-date
@ -110,40 +113,32 @@ describe('<lion-input-date>', () => {
}); });
it('is accessible', async () => { it('is accessible', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-input-date><label slot="label">Label</label></lion-input-date>
<lion-input-date><label slot="label">Label</label></lion-input-date> `);
`,
);
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
}); });
it('is accessible when readonly', async () => { it('is accessible when readonly', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-input-date readonly .modelValue=${new Date('2017/06/15')}
<lion-input-date readonly .modelValue=${new Date('2017/06/15')} ><label slot="label">Label</label></lion-input-date
><label slot="label">Label</label></lion-input-date >
> `);
`,
);
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
}); });
it('is accessible when disabled', async () => { it('is accessible when disabled', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-input-date disabled><label slot="label">Label</label></lion-input-date>
<lion-input-date disabled><label slot="label">Label</label></lion-input-date> `);
`,
);
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
}); });
it('serializes to iso format', async () => { it('serializes to iso format', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-input-date .modelValue="${new Date('2000/12/15')}"></lion-input-date>
<lion-input-date .modelValue="${new Date('2000/12/15')}"></lion-input-date> `);
`,
);
expect(el.serializedValue).to.equal('2000-12-15'); expect(el.serializedValue).to.equal('2000-12-15');
}); });
}); });