Skip to content

Commit

Permalink
fix(datetime-picker): values are not update synchronously (#59)
Browse files Browse the repository at this point in the history
  • Loading branch information
@goremikins
goremikins authored Nov 8, 2021
1 parent 65bfa44 commit 55500a3
Show file tree
Hide file tree
Showing 7 changed files with 66 additions and 61 deletions.
7 changes: 7 additions & 0 deletions packages/elements/src/datetime-picker/__snapshots__/DOMStructure.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@
aria-disabled="false"
aria-readonly="false"
id="calendar"
lang="en-gb"
part="calendar"
tabindex="0"
>
Expand Down Expand Up @@ -148,6 +149,7 @@
aria-disabled="false"
aria-readonly="false"
id="calendar"
lang="en-gb"
part="calendar"
range=""
tabindex="0"
Expand Down Expand Up @@ -214,6 +216,7 @@
aria-disabled="false"
aria-readonly="false"
id="calendar"
lang="en-gb"
part="calendar"
tabindex="0"
>
Expand All @@ -222,6 +225,7 @@
aria-disabled="false"
aria-readonly="false"
id="calendar-to"
lang="en-gb"
part="calendar"
tabindex="0"
>
Expand Down Expand Up @@ -287,6 +291,7 @@
aria-disabled="false"
aria-readonly="false"
id="calendar"
lang="en-gb"
part="calendar"
tabindex="0"
>
Expand Down Expand Up @@ -362,6 +367,7 @@
aria-disabled="false"
aria-readonly="false"
id="calendar"
lang="en-gb"
part="calendar"
tabindex="0"
>
Expand Down Expand Up @@ -449,6 +455,7 @@
aria-disabled="false"
aria-readonly="false"
id="calendar"
lang="en-gb"
part="calendar"
range=""
tabindex="0"
Expand Down
16 changes: 8 additions & 8 deletions packages/elements/src/datetime-picker/__test__/datetime-picker.default.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,31 +41,31 @@ describe('datetime-picker/DatetimePicker', () => {
});

it('date format is correct', async () => {
const el = await fixture('<ef-datetime-picker value="2020-04-21"></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" value="2020-04-21"></ef-datetime-picker>');
expect(el.format).to.be.equal(INPUT_FORMAT.DATE, 'Date format is wrong');
expect(el.inputEl.value).to.be.equal('21-Apr-2020', 'Date format is not applied');
});

it('date-time format is correct', async () => {
const el = await fixture('<ef-datetime-picker timepicker value="2020-04-21T14:58"></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" timepicker value="2020-04-21T14:58"></ef-datetime-picker>');
expect(el.format).to.be.equal(INPUT_FORMAT.DATETIME, 'Datetime format is wrong');
expect(el.inputEl.value).to.be.equal('21-Apr-2020 14:58', 'Datetime format is not applied');
});

it('date-time-am-pm format is correct', async () => {
const el = await fixture('<ef-datetime-picker timepicker am-pm value="2020-04-21T14:58"></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" timepicker am-pm value="2020-04-21T14:58"></ef-datetime-picker>');
expect(el.format).to.be.equal(INPUT_FORMAT.DATETIME_AM_PM, 'Datetime AM-PM format is wrong');
expect(el.inputEl.value).to.be.equal('21-Apr-2020 02:58 pm', 'Datetime AM-PM format is not applied');
});

it('date-time-seconds format is correct', async () => {
const el = await fixture('<ef-datetime-picker timepicker show-seconds value="2020-04-21T14:58:59"></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" timepicker show-seconds value="2020-04-21T14:58:59"></ef-datetime-picker>');
expect(el.format).to.be.equal(INPUT_FORMAT.DATETIME_SECONDS, 'Datetime with seconds format is wrong');
expect(el.inputEl.value).to.be.equal('21-Apr-2020 14:58:59', 'Datetime with seconds format is not applied');
});

it('date-time-am-pm-seconds format is correct', async () => {
const el = await fixture('<ef-datetime-picker timepicker show-seconds am-pm value="2020-04-21T14:58:59"></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" timepicker show-seconds am-pm value="2020-04-21T14:58:59"></ef-datetime-picker>');
expect(el.format).to.be.equal(INPUT_FORMAT.DATETIME_SECONDS_AM_PM, 'Datetime AM-PM with seconds format is wrong');
expect(el.inputEl.value).to.be.equal('21-Apr-2020 02:58:59 pm', 'Datetime AM-PM with seconds format is not applied');
});
Expand All @@ -78,22 +78,22 @@ describe('datetime-picker/DatetimePicker', () => {

it('Can change format', async () => {
const customFormat = 'dd-MM-yy HH:mm:ss';
const el = await fixture(`<ef-datetime-picker format="${customFormat}" timepicker show-seconds value="2020-04-21T14:58:59"></ef-datetime-picker>`);
const el = await fixture(`<ef-datetime-picker lang="en-gb" format="${customFormat}" timepicker show-seconds value="2020-04-21T14:58:59"></ef-datetime-picker>`);
expect(el.format).to.be.equal(customFormat, 'Custom format is not passed');
expect(el.inputEl.value).to.be.equal('21-04-20 14:58:59', 'Custom format is not applied');
});
});
describe('Placeholder Test', () => {
it('Default Placeholder', async () => {
const el = await fixture('<ef-datetime-picker duplex></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" duplex></ef-datetime-picker>');
expect(el.placeholder).to.be.equal(INPUT_FORMAT.DATE);
const input = el.inputEl;
expect(input.placeholder).to.be.equal(INPUT_FORMAT.DATE, 'Default placeholder is not passed to to input');
});

it('Can set custom placeholder', async () => {
const placeholder = 'Test';
const el = await fixture('<ef-datetime-picker range></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" range></ef-datetime-picker>');
el.placeholder = placeholder;
await elementUpdated(el);
const inputFrom = el.inputEl;
Expand Down
22 changes: 11 additions & 11 deletions packages/elements/src/datetime-picker/__test__/datetime-picker.navigation.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import '@refinitiv-ui/elemental-theme/light/ef-datetime-picker';
describe('datetime-picker/Navigation', () => {
describe('Navigation', () => {
it('Clicking on datetime picker icon should open/close calendar and fire opened-changed event', async () => {
const el = await fixture('<ef-datetime-picker></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb"></ef-datetime-picker>');
const iconEl = el.iconEl;

setTimeout(() => iconEl.click());
Expand All @@ -29,7 +29,7 @@ describe('datetime-picker/Navigation', () => {
expect(event.detail.value).to.be.equal(false, 'opened-changed event is wrong');
});
it('Clicking on datetime picker should open calendar', async () => {
const el = await fixture('<ef-datetime-picker></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb"></ef-datetime-picker>');
el.click();
await elementUpdated(el);
expect(el.opened).to.be.equal(true, 'Clicking on calendar area should open calendar');
Expand All @@ -38,7 +38,7 @@ describe('datetime-picker/Navigation', () => {
expect(el.opened).to.be.equal(true, 'Clicking on calendar area again should not close calendar');
});
it('Arrow Down/Up should open/close calendar', async () => {
const el = await fixture('<ef-datetime-picker></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb"></ef-datetime-picker>');
fireKeydownEvent(el, 'ArrowDown');
await elementUpdated(el);
expect(el.opened).to.be.equal(true, 'Arrow down should open calendar');
Expand All @@ -53,48 +53,48 @@ describe('datetime-picker/Navigation', () => {
expect(el.opened).to.be.equal(false, 'Up should close calendar');
});
it('Esc should close calendar', async () => {
const el = await fixture('<ef-datetime-picker opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" opened></ef-datetime-picker>');
fireKeydownEvent(el.calendarEl, 'Esc');
await elementUpdated(el);
expect(el.opened).to.be.equal(false, 'Esc should close calendar');
});
it('Escape should close calendar', async () => {
const el = await fixture('<ef-datetime-picker opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" opened></ef-datetime-picker>');
fireKeydownEvent(el.calendarEl, 'Escape');
await elementUpdated(el);
expect(el.opened).to.be.equal(false, 'Escape should close calendar');
});
it('Esc on input should close calendar', async () => {
const el = await fixture('<ef-datetime-picker opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" opened></ef-datetime-picker>');
fireKeydownEvent(el.inputEl, 'Esc');
await elementUpdated(el);
expect(el.opened).to.be.equal(false, 'Esc should close calendar');
});
it('Escape on input should close calendar', async () => {
const el = await fixture('<ef-datetime-picker opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" opened></ef-datetime-picker>');
fireKeydownEvent(el.inputEl, 'Escape');
await elementUpdated(el);
expect(el.opened).to.be.equal(false, 'Escape should close calendar');
});
it('Enter key on input should open calendar', async () => {
const el = await fixture('<ef-datetime-picker></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb"></ef-datetime-picker>');
fireKeydownEvent(el.inputEl, 'Enter');
await elementUpdated(el);
expect(el.opened).to.be.equal(true, 'Enter should open calendar');
});
it('Clicking on outside should close calendar', async () => {
const el = await fixture('<ef-datetime-picker opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" opened></ef-datetime-picker>');
document.dispatchEvent(new CustomEvent('tapstart'));
await elementUpdated(el);
expect(el.opened).to.be.equal(false, 'Clicking on document body should close calendar');
});
it('It should not be possible to open disabled calendar', async () => {
const el = await fixture('<ef-datetime-picker disabled></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" disabled></ef-datetime-picker>');
el.click();
expect(el.opened).to.be.equal(false, 'Clicking on disabled should do nothing');
});
it('Calendar should close itself if becomes disabled', async () => {
const el = await fixture('<ef-datetime-picker opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" opened></ef-datetime-picker>');
el.disabled = true;
await elementUpdated(el);
expect(el.opened).to.be.equal(false, 'Setting disabled should close calendar');
Expand Down
14 changes: 7 additions & 7 deletions packages/elements/src/datetime-picker/__test__/datetime-picker.snapshot.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,42 +8,42 @@ import '@refinitiv-ui/elemental-theme/light/ef-datetime-picker';
describe('datetime-picker/DOMStructure', () => {
describe('DOM Structure', () => {
it('DOM structure is correct', async () => {
const el = await fixture('<ef-datetime-picker view="2020-04"></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" view="2020-04"></ef-datetime-picker>');
await nextFrame();
expect(el).shadowDom.to.equalSnapshot(snapshotIgnore);
});
it('DOM structure is correct when opened', async () => {
const el = await fixture('<ef-datetime-picker view="2020-04" opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" view="2020-04" opened></ef-datetime-picker>');
await nextFrame();
await nextFrame(); /* second frame required for IE11 as popup opened might not fit into one frame */
expect(el).shadowDom.to.equalSnapshot(snapshotIgnore);
});
it('DOM structure is correct when range', async () => {
const el = await fixture('<ef-datetime-picker view="2020-04" range opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" view="2020-04" range opened></ef-datetime-picker>');
await nextFrame();
await nextFrame();
expect(el).shadowDom.to.equalSnapshot(snapshotIgnore);
});
it('DOM structure is correct when duplex', async () => {
const el = await fixture('<ef-datetime-picker view="2020-04" duplex opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" view="2020-04" duplex opened></ef-datetime-picker>');
await nextFrame();
await nextFrame();
expect(el).shadowDom.to.equalSnapshot(snapshotIgnore);
});
it('DOM structure is correct when timepicker', async () => {
const el = await fixture('<ef-datetime-picker view="2020-04" timepicker opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" view="2020-04" timepicker opened></ef-datetime-picker>');
await nextFrame();
await nextFrame();
expect(el).shadowDom.to.equalSnapshot(snapshotIgnore);
});
it('DOM structure is correct when timepicker and with-seconds', async () => {
const el = await fixture('<ef-datetime-picker view="2020-04" timepicker with-seconds opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" view="2020-04" timepicker with-seconds opened></ef-datetime-picker>');
await nextFrame();
await nextFrame();
expect(el).shadowDom.to.equalSnapshot(snapshotIgnore);
});
it('DOM structure is correct when range timepicker', async () => {
const el = await fixture('<ef-datetime-picker view="2020-04" timepicker range opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" view="2020-04" timepicker range opened></ef-datetime-picker>');
await nextFrame();
await nextFrame();
expect(el).shadowDom.to.equalSnapshot(snapshotIgnore);
Expand Down
24 changes: 12 additions & 12 deletions packages/elements/src/datetime-picker/__test__/datetime-picker.value.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import '@refinitiv-ui/elemental-theme/light/ef-datetime-picker';
describe('datetime-picker/Value', () => {
describe('Value Test', () => {
it('Changing the value should fire value-changed event', async () => {
const el = await fixture('<ef-datetime-picker opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" opened></ef-datetime-picker>');
setTimeout(() => typeText(el.inputEl, '21-Apr-2020'));
const { detail: { value } } = await oneEvent(el, 'value-changed');
await elementUpdated();
Expand All @@ -17,19 +17,19 @@ describe('datetime-picker/Value', () => {
expect(value).to.be.equal('2020-04-21', 'value-changed event should be fired when changing input');
});
it('It should be possible to set min/max', async () => {
const el = await fixture('<ef-datetime-picker min="2020-04-01" max="2020-04-30" opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" min="2020-04-01" max="2020-04-30" opened></ef-datetime-picker>');
expect(el.min).to.be.equal('2020-04-01', 'min getter is wrong');
expect(el.max).to.be.equal('2020-04-30', 'max getter is wrong');
expect(el.calendarEl.min).to.be.equal('2020-04-01', 'calendar min getter is wrong');
expect(el.calendarEl.max).to.be.equal('2020-04-30', 'calendar min getter is wrong');
});
it('It should not be possible to set invalid min/max', async () => {
const el = await fixture('<ef-datetime-picker min="2020-04" max="2020-04"></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" min="2020-04" max="2020-04"></ef-datetime-picker>');
expect(el.min).to.be.equal('', 'Invalid min should reset min');
expect(el.max).to.be.equal('', 'Invalid max should reset max');
});
it('Typing invalid value in input should mark datetime picker as invalid and error-changed event is fired', async () => {
const el = await fixture('<ef-datetime-picker opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" opened></ef-datetime-picker>');
setTimeout(() => typeText(el.inputEl, 'Invalid Value'));
const { detail: { value } } = await oneEvent(el, 'error-changed');
await elementUpdated();
Expand All @@ -39,23 +39,23 @@ describe('datetime-picker/Value', () => {
expect(value).to.be.equal(true, 'error-changed event should be fired when user puts invalid value');
});
it('It should not be possible to set from value after to', async () => {
const el = await fixture('<ef-datetime-picker range values="2020-04-30,2020-04-01"></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" range values="2020-04-30,2020-04-01"></ef-datetime-picker>');
expect(el.error).to.be.equal(true);
});
it('It should not be possible to set value before min', async () => {
const el = await fixture('<ef-datetime-picker min="2020-04-22" value="2020-04-21"></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" min="2020-04-22" value="2020-04-21"></ef-datetime-picker>');
expect(el.error).to.be.equal(true);
});
it('It should not be possible to set value after max', async () => {
const el = await fixture('<ef-datetime-picker max="2020-04-20" value="2020-04-21"></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" max="2020-04-20" value="2020-04-21"></ef-datetime-picker>');
expect(el.error).to.be.equal(true);
});
it('While typing the value calendar input should not randomly update value', async function () {
if (isIE()) {
this.skip();
}
// this test becomes invalid if date-fns ever supports strict formatting
const el = await fixture('<ef-datetime-picker opened></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" opened></ef-datetime-picker>');
const input = el.inputEl;
await triggerFocusFor(input);
typeText(el.inputEl, '21-A-2020');
Expand All @@ -66,7 +66,7 @@ describe('datetime-picker/Value', () => {
expect(el.inputEl.value).to.be.equal('21-Apr-2020', 'On blur input values becomes formatted value');
});
it('It should be possible to select value by clicking on calendar', async () => {
const el = await fixture('<ef-datetime-picker opened view="2020-04" lang="en-gb"></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" opened view="2020-04"></ef-datetime-picker>');
const calendarEl = el.calendarEl;
const cell = calendarEl.shadowRoot.querySelectorAll('div[tabindex="0"]')[2]; // 2020-04-01
cell.click();
Expand All @@ -75,7 +75,7 @@ describe('datetime-picker/Value', () => {
expect(el.inputEl.value).to.be.equal('01-Apr-2020', 'Input value has not updated');
});
it('It should be possible to select value in range duplex mode', async () => {
const el = await fixture('<ef-datetime-picker opened range duplex lang="en-gb"></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" opened range duplex></ef-datetime-picker>');
el.views = ['2020-04', '2020-05'];
await elementUpdated(el);
await nextFrame();
Expand All @@ -100,14 +100,14 @@ describe('datetime-picker/Value', () => {
expect(el.inputToEl.value).to.be.equal('01-May-2020', 'Input to value has not updated');
});
it('Timepicker value is populated', async () => {
const el = await fixture('<ef-datetime-picker opened timepicker with-seconds value="2020-04-21T13:14:15"></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" opened timepicker with-seconds value="2020-04-21T13:14:15"></ef-datetime-picker>');
const timePicker = el.timepickerEl;
expect(timePicker.hours).to.equal(13);
expect(timePicker.minutes).to.equal(14);
expect(timePicker.seconds).to.equal(15);
});
it('It should be possible to change timepicker value', async () => {
const el = await fixture('<ef-datetime-picker opened timepicker with-seconds value="2020-04-21T13:14:15"></ef-datetime-picker>');
const el = await fixture('<ef-datetime-picker lang="en-gb" opened timepicker with-seconds value="2020-04-21T13:14:15"></ef-datetime-picker>');
const timePicker = el.timepickerEl;
typeText(timePicker, '16:17:18');
expect(el.value).to.equal('2020-04-21T16:17:18');
Expand Down
Loading

0 comments on commit 55500a3

Please sign in to comment.