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

fix(input-date): serialize Date as iso string without time information

Browse source
This commit is contained in:
Thijs Louisse 2020-02-20 14:43:22 +01:00
parent 583a1820d6
commit ffa4da9649
3 changed files with 49 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,4 @@
import { LocalizeMixin, formatDate, parseDate } from '@lion/localize';
import { FieldCustomMixin } from '@lion/field';
import { LionInput } from '@lion/input';
import { IsDate } from '@lion/validate';
@ -10,7 +9,7 @@ import { IsDate } from '@lion/validate';
* @customElement lion-input-date
* @extends {LionInput}
*/
export class LionInputDate extends FieldCustomMixin(LocalizeMixin(LionInput)) {
export class LionInputDate extends LocalizeMixin(LionInput) {
static get properties() {
return {
modelValue: Date,
@ -36,4 +35,17 @@ export class LionInputDate extends FieldCustomMixin(LocalizeMixin(LionInput)) {
super.connectedCallback();
this.type = 'text';
}
// eslint-disable-next-line class-methods-use-this
serializer(modelValue) {
if (!(modelValue instanceof Date)) {
return '';
}
return modelValue.toISOString().slice(0, 10);
}
// eslint-disable-next-line class-methods-use-this
deserializer(serializedValue) {
return new Date(serializedValue);
}
}

1
packages/input-date/test/lion-input-date-integrations.test.js
View file

@ -3,7 +3,6 @@ import { runFormatMixinSuite } from '@lion/field/test-suites/FormatMixin.suite.j
import '../lion-input-date.js';
const tagString = 'lion-input-date';
describe('<lion-input-date> integrations', () => {
runInteractionStateMixinSuite({
tagString,

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

@ -13,17 +13,29 @@ describe('<lion-input-date>', () => {
});
it('returns undefined when value is empty string', async () => {
const el = await fixture(`<lion-input-date></lion-input-date>`);
const el = await fixture(
html`
<lion-input-date></lion-input-date>
`,
);
expect(el.parser('')).to.equal(undefined);
});
it('has type="text" to activate default keyboard on mobile with all necessary symbols', async () => {
const el = await fixture(`<lion-input-date></lion-input-date>`);
const el = await fixture(
html`
<lion-input-date></lion-input-date>
`,
);
expect(el._inputNode.type).to.equal('text');
});
it('has validator "isDate" applied by default', async () => {
const el = await fixture(`<lion-input-date></lion-input-date>`);
const el = await fixture(
html`
<lion-input-date></lion-input-date>
`,
);
el.modelValue = '2005/11/10';
expect(el.hasFeedbackFor).to.include('error');
expect(el.validationStates).to.have.a.property('error');
@ -99,24 +111,39 @@ describe('<lion-input-date>', () => {
it('is accessible', async () => {
const el = await fixture(
`<lion-input-date><label slot="label">Label</label></lion-input-date>`,
html`
<lion-input-date><label slot="label">Label</label></lion-input-date>
`,
);
await expect(el).to.be.accessible();
});
it('is accessible when readonly', async () => {
const el = await fixture(
`<lion-input-date readonly .modelValue=${new Date(
'2017/06/15',
)}><label slot="label">Label</label></lion-input-date>`,
html`
<lion-input-date readonly .modelValue=${new Date('2017/06/15')}
><label slot="label">Label</label></lion-input-date
>
`,
);
await expect(el).to.be.accessible();
});
it('is accessible when disabled', async () => {
const el = await fixture(
`<lion-input-date disabled><label slot="label">Label</label></lion-input-date>`,
html`
<lion-input-date disabled><label slot="label">Label</label></lion-input-date>
`,
);
await expect(el).to.be.accessible();
});
it('serializes to iso format', async () => {
const el = await fixture(
html`
<lion-input-date .modelValue="${new Date('2000-12-12')}"></lion-input-date>
`,
);
expect(el.serializedValue).to.equal('2000-12-12');
});
});