Skip to content

Commit 33442e9

Browse files
unazkounazko
authored
fix(ui5-daterange-picker): all tests are now enabled (#2506)
The ui5-daterange-picker tests are now stable and don't introduce timing issues due to rendering of the component. The ui5-daterange-picker value in the input field gets updated properly on focus out or "Enter" keyboard key press. Fixes: #2475
1 parent d73ce38 commit 33442e9

File tree

2 files changed

+71
-152
lines changed

2 files changed

+71
-152
lines changed

‎packages/main/src/DateRangePicker.js

+24-44
Original file line numberDiff line numberDiff line change
@@ -211,23 +211,25 @@ class DateRangePicker extends DatePicker {
211211
}
212212
this.valueState = ValueState.None;
213213

214-
const firstDate = this.getFormat().parse(dates[0]);
215-
const secondDate = this.getFormat().parse(dates[1]);
214+
let firstDate = this.getFormat().parse(dates[0]);
215+
let lastDate;
216216

217-
this._firstDateTimestamp = Date.UTC(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate(), firstDate.getHours()) / 1000;
218-
this._lastDateTimestamp = Date.UTC(secondDate.getFullYear(), secondDate.getMonth(), secondDate.getDate(), secondDate.getHours()) / 1000;
217+
if (dates.length > 1) {
218+
lastDate = this.getFormat().parse(dates[1]);
219219

220-
if (this._firstDateTimestamp > this._lastDateTimestamp) {
221-
const temp = this._firstDateTimestamp;
222-
this._firstDateTimestamp = this._lastDateTimestamp;
223-
this._lastDateTimestamp = temp;
220+
if (firstDate > lastDate) {
221+
const temp = firstDate;
222+
firstDate = lastDate;
223+
lastDate = temp;
224+
}
225+
this._lastDateTimestamp = CalendarDate.fromLocalJSDate(lastDate, this._primaryCalendarType).valueOf() / 1000;
224226
}
225-
227+
this._firstDateTimestamp = CalendarDate.fromLocalJSDate(firstDate, this._primaryCalendarType).valueOf() / 1000;
226228
this._calendar.selectedDates = this.dateIntervalArrayBuilder(this._firstDateTimestamp * 1000, this._lastDateTimestamp * 1000);
227229

228-
this.value = this._formatValue(firstDate.valueOf() / 1000, secondDate.valueOf() / 1000);
230+
this.value = this._formatValue(firstDate, lastDate);
229231
this.realValue = this.value;
230-
this._prevValue = this.realValue;
232+
this._prevValue = this.value;
231233
}
232234

233235
_changeCalendarSelection(focusTimestamp) {
@@ -430,7 +432,7 @@ class DateRangePicker extends DatePicker {
430432
lastDate = this._changeDateValue(lastDate, forward, years, months, days, step);
431433
}
432434

433-
this.value = this._formatValue(firstDate.valueOf() / 1000, lastDate.valueOf() / 1000);
435+
this.value = this._formatValue(firstDate, lastDate);
434436

435437
await RenderScheduler.whenFinished();
436438
// Return the caret on the previous position after rendering
@@ -444,37 +446,15 @@ class DateRangePicker extends DatePicker {
444446
const innerInput = this.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
445447
const caretPos = this._getCaretPosition(innerInput);
446448

447-
this._confirmInput();
449+
this._setValue(this.value);
448450

449451
await RenderScheduler.whenFinished();
450452
// Return the caret on the previous position after rendering
451453
this._setCaretPosition(innerInput, caretPos);
452454
}
453455

454456
_onfocusout() {
455-
this._confirmInput();
456-
}
457-
458-
_confirmInput() {
459-
const emptyValue = this.value === "";
460-
461-
if (emptyValue) {
462-
return;
463-
}
464-
465-
const dates = this._splitValueByDelimiter(this.value);
466-
let firstDate = this.getFormat().parse(dates[0]);
467-
let lastDate = this.getFormat().parse(dates[1]);
468-
469-
if (firstDate > lastDate) {
470-
const temp = firstDate;
471-
firstDate = lastDate;
472-
lastDate = temp;
473-
}
474-
475-
const newValue = this._formatValue(firstDate.valueOf() / 1000, lastDate.valueOf() / 1000);
476-
477-
this._setValue(newValue);
457+
this._setValue(this.value);
478458
}
479459

480460
/**
@@ -554,28 +534,28 @@ class DateRangePicker extends DatePicker {
554534

555535
// Collect both dates and merge them into one
556536
if (this._firstDateTimestamp !== this._lastDateTimestamp || this._oneTimeStampSelected) {
557-
this.value = this._formatValue(calStartDate.toLocalJSDate().valueOf() / 1000, calEndDate.toLocalJSDate().valueOf() / 1000);
537+
this.value = this._formatValue(calStartDate.toLocalJSDate(), calEndDate.toLocalJSDate());
558538
}
559539

560-
this.realValue = this._formatValue(calStartDate.toLocalJSDate().valueOf() / 1000, calEndDate.toLocalJSDate().valueOf() / 1000);
540+
this.realValue = this._formatValue(calStartDate.toLocalJSDate(), calEndDate.toLocalJSDate());
561541
this._prevValue = this.realValue;
562542
}
563543

564544
/**
565545
* Combines the start and end dates of a range into a formated string
566546
*
567-
* @param {int} firstDateValue locale start date timestamp
568-
* @param {int} lastDateValue locale end date timestamp
547+
* @param {int} firstDate locale start date
548+
* @param {int} lastDate locale end date
569549
* @returns {string} formated start to end date range
570550
*/
571-
_formatValue(firstDateValue, lastDateValue) {
551+
_formatValue(firstDate, lastDate) {
572552
let value = "";
573553
const delimiter = this.delimiter,
574554
format = this.getFormat(),
575-
firstDateString = format.format(new Date(firstDateValue * 1000)),
576-
lastDateString = format.format(new Date(lastDateValue * 1000));
555+
firstDateString = firstDate && format.format(firstDate),
556+
lastDateString = lastDate && format.format(lastDate);
577557

578-
if (firstDateValue) {
558+
if (firstDateString) {
579559
if (delimiter && delimiter !== "" && lastDateString) {
580560
value = firstDateString.concat(" ", delimiter, " ", lastDateString);
581561
} else {

‎packages/main/test/specs/DateRangePicker.spec.js

+47-108
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ describe("DateRangePicker general interaction", () => {
1717
const daterangepicker = browser.$("#daterange-picker3");
1818

1919
daterangepicker.click();
20-
daterangepicker.keys("\b\b\b\b\b\b\b\b\b\b\b\b\b");
20+
daterangepicker.keys(["Control", "A"]);
2121
daterangepicker.keys("09/09/2020 - 10/10/2020");
2222
daterangepicker.keys("Enter");
2323

@@ -42,9 +42,9 @@ describe("DateRangePicker general interaction", () => {
4242
const daterangepicker = browser.$("#daterange-picker4");
4343

4444
daterangepicker.click();
45-
daterangepicker.keys("\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b");
46-
daterangepicker.keys("27/09/2019 - 10/10/2019");
47-
daterangepicker.keys("Enter");
45+
browser.keys(["Control", "A"]);
46+
browser.keys("27/09/2019 - 10/10/2019");
47+
browser.keys("Enter");
4848

4949
const res = browser.execute(() => {
5050
const myDRP = document.getElementById("daterange-picker4");
@@ -80,7 +80,7 @@ describe("DateRangePicker general interaction", () => {
8080
const daterangepicker = browser.$("#daterange-picker1");
8181

8282
daterangepicker.click();
83-
daterangepicker.keys("F4");
83+
browser.keys("F4");
8484

8585
dayOne.click();
8686
dayTwo.click();
@@ -89,145 +89,84 @@ describe("DateRangePicker general interaction", () => {
8989
});
9090

9191
it("Page up/down increments/decrements day value", () => {
92-
const dateRange = browser.$("#daterange-picker5");
93-
94-
browser.execute(() => {
95-
const dateRange = document.getElementById("daterange-picker5");
96-
const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
97-
dateRange._setValue("Jul 16, 2020 @ Jul 29, 2020");
98-
innerInput.click();
99-
dateRange._setCaretPosition(innerInput, 15);
100-
});
92+
const dateRangePicker = browser.$("#daterange-picker5");
93+
dateRangePicker.setAttribute("value", "Jul 16, 2020 @ Jul 29, 2020");
94+
dateRangePicker.click();
95+
browser.keys("End");
10196

10297
browser.keys('PageDown');
103-
assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 28, 2020");
98+
assert.strictEqual(dateRangePicker.getAttribute("value"), "Jul 16, 2020 @ Jul 28, 2020");
10499

105100
browser.keys('PageUp');
106-
assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 29, 2020");
107-
108-
browser.execute(() => {
109-
const dateRange = document.getElementById("daterange-picker5");
110-
const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
111-
dateRange._setCaretPosition(innerInput, 5);
112-
});
101+
assert.strictEqual(dateRangePicker.getAttribute("value"), "Jul 16, 2020 @ Jul 29, 2020");
113102

103+
browser.keys("Home");
114104
browser.keys('PageDown');
115-
assert.strictEqual(dateRange.getProperty("value"), "Jul 15, 2020 @ Jul 29, 2020");
105+
assert.strictEqual(dateRangePicker.getAttribute("value"), "Jul 15, 2020 @ Jul 29, 2020");
116106

117107
browser.keys('PageUp');
118-
assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 29, 2020");
108+
assert.strictEqual(dateRangePicker.getAttribute("value"), "Jul 16, 2020 @ Jul 29, 2020");
119109
});
120110

121111
it("Page up/down increments/decrements month value", () => {
122-
const dateRange = browser.$("#daterange-picker5");
123-
124-
browser.execute(() => {
125-
const dateRange = document.getElementById("daterange-picker5");
126-
const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
127-
dateRange._setValue("Jul 16, 2020 @ Jul 29, 2020");
128-
innerInput.click();
129-
dateRange._setCaretPosition(innerInput, 15);
130-
});
112+
const dateRangePicker = browser.$("#daterange-picker5");
113+
dateRangePicker.setAttribute("value", "Jul 16, 2020 @ Jul 29, 2020");
114+
dateRangePicker.click();
115+
browser.keys("End");
131116

132117
browser.keys(['Shift', 'PageUp']);
133-
assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Aug 29, 2020");
118+
assert.strictEqual(dateRangePicker.getAttribute("value"), "Jul 16, 2020 @ Aug 29, 2020");
134119

135120
browser.keys(['Shift', 'PageDown']);
136-
assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 29, 2020");
137-
138-
browser.execute(() => {
139-
const dateRange = document.getElementById("daterange-picker5");
140-
const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
141-
dateRange._setCaretPosition(innerInput, 5);
142-
});
121+
assert.strictEqual(dateRangePicker.getAttribute("value"), "Jul 16, 2020 @ Jul 29, 2020");
143122

123+
browser.keys("Home");
144124
browser.keys(['Shift', 'PageDown']);
145-
assert.strictEqual(dateRange.getProperty("value"), "Jun 16, 2020 @ Jul 29, 2020");
125+
assert.strictEqual(dateRangePicker.getAttribute("value"), "Jun 16, 2020 @ Jul 29, 2020");
146126

147127
browser.keys(['Shift', 'PageUp']);
148-
assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 29, 2020");
128+
assert.strictEqual(dateRangePicker.getAttribute("value"), "Jul 16, 2020 @ Jul 29, 2020");
149129
});
150130

151131
it("Page up/down increments/decrements year value", () => {
152-
const dateRange = browser.$("#daterange-picker5");
153-
154-
browser.execute(() => {
155-
const dateRange = document.getElementById("daterange-picker5");
156-
const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
157-
dateRange._setValue("Jul 16, 2020 @ Jul 29, 2020");
158-
innerInput.click();
159-
dateRange._setCaretPosition(innerInput, 15);
160-
});
132+
const dateRangePicker = browser.$("#daterange-picker5");
133+
dateRangePicker.setAttribute("value", "Jul 16, 2020 @ Jul 29, 2020");
134+
dateRangePicker.click();
135+
browser.keys("End");
161136

162137
browser.keys(['Control', 'Shift', 'PageUp']);
163-
assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 29, 2021");
138+
assert.strictEqual(dateRangePicker.getAttribute("value"), "Jul 16, 2020 @ Jul 29, 2021");
164139

165140
browser.keys(['Control', 'Shift', 'PageDown']);
166-
assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 29, 2020");
167-
168-
browser.execute(() => {
169-
const dateRange = document.getElementById("daterange-picker5");
170-
const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
171-
dateRange._setCaretPosition(innerInput, 5);
172-
});
141+
assert.strictEqual(dateRangePicker.getAttribute("value"), "Jul 16, 2020 @ Jul 29, 2020");
173142

143+
browser.keys("Home");
174144
browser.keys(['Control', 'Shift', 'PageDown']);
175-
assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2019 @ Jul 29, 2020");
145+
assert.strictEqual(dateRangePicker.getAttribute("value"), "Jul 16, 2019 @ Jul 29, 2020");
176146

177147
browser.keys(['Control', 'Shift', 'PageUp']);
178-
assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 29, 2020");
148+
assert.strictEqual(dateRangePicker.getAttribute("value"), "Jul 16, 2020 @ Jul 29, 2020");
179149
});
180150

181151
it("Enter keyboard key confirms the date range in the input field", () => {
182-
const dateRange = browser.$("#daterange-picker5");
183-
184-
browser.execute(() => {
185-
const dateRange = document.getElementById("daterange-picker5");
186-
const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
187-
dateRange._setValue("Jul 16, 2020 @ Jul 16, 2020");
188-
});
189-
190-
browser.execute(() => {
191-
const dateRange = document.getElementById("daterange-picker5");
192-
const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
193-
innerInput.click();
194-
dateRange._setCaretPosition(innerInput, 0);
195-
});
196-
197-
browser.keys('PageUp');
198-
assert.strictEqual(dateRange.getAttribute("value"), "Jul 17, 2020 @ Jul 16, 2020");
199-
200-
browser.keys('Enter');
201-
assert.strictEqual(dateRange.getAttribute("value"), "Jul 16, 2020 @ Jul 17, 2020");
152+
const dateRangePicker = browser.$("#daterange-picker5");
153+
dateRangePicker.click();
154+
155+
browser.keys(["Control", "A"]);
156+
browser.keys("Jul 17, 2020 @ Jul 16, 2020");
157+
158+
browser.keys("Enter");
159+
assert.strictEqual(dateRangePicker.getAttribute("value"), "Jul 16, 2020 @ Jul 17, 2020");
202160
});
203161

204-
/*
205162
it("Focus out of the input field confirms the date range", () => {
206-
const dateRange = browser.$("#daterange-picker5");
207-
208-
browser.execute(() => {
209-
const dateRange = document.getElementById("daterange-picker5");
210-
const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
211-
dateRange._setValue("Jul 16, 2020 @ Jul 16, 2020");
212-
});
163+
const dateRangePicker = browser.$("#daterange-picker5");
164+
dateRangePicker.click();
165+
browser.keys(["Control", "A"]);
166+
browser.keys("Jul 17, 2020 @ Jul 16, 2020");
213167

214-
browser.execute(() => {
215-
const dateRange = document.getElementById("daterange-picker5");
216-
const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
217-
innerInput.click();
218-
dateRange._setCaretPosition(innerInput, 0);
219-
});
220-
221-
browser.keys('PageUp');
222-
assert.strictEqual(dateRange.getAttribute("value"), "Jul 17, 2020 @ Jul 16, 2020");
223-
224-
browser.execute(() => {
225-
const dateRange = document.getElementById("daterange-picker4");
226-
const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
227-
innerInput.click();
228-
dateRange._setCaretPosition(innerInput, 0);
229-
});
230-
assert.strictEqual(dateRange.getAttribute("value"), "Jul 16, 2020 @ Jul 17, 2020");
168+
browser.keys("Tab");
169+
assert.strictEqual(dateRangePicker.getAttribute("value"), "Jul 16, 2020 @ Jul 17, 2020");
231170
});
232-
*/
171+
233172
});

0 commit comments

Comments
 (0)