diff --git a/lib/public/components/common/form/inputs/DateTimeInputComponent.js b/lib/public/components/common/form/inputs/DateTimeInputComponent.js index 683eb62272..75d573f526 100644 --- a/lib/public/components/common/form/inputs/DateTimeInputComponent.js +++ b/lib/public/components/common/form/inputs/DateTimeInputComponent.js @@ -12,7 +12,6 @@ */ import { h, StatefulComponent } from '/js/src/index.js'; import { iconX } from '/js/src/icons.js'; -import { MILLISECONDS_IN_ONE_DAY } from '../../../../utilities/dateUtils.mjs'; import { formatTimestampForDateTimeInput } from '../../../../utilities/formatting/dateTimeInputFormatters.mjs'; /** @@ -22,12 +21,11 @@ import { formatTimestampForDateTimeInput } from '../../../../utilities/formattin /** * @typedef DateTimeInputComponentAttrs - * @property {DateTimeInputRawData} value the actual inputs values + * @property {string} value the datetime-local input value * @property {function} onChange function called with the new value when it changes - * @property {Partial} [defaults] the default raw values to use when partially updating inputs * @property {boolean} [seconds=false] states if the input has granularity up to seconds (if not, granularity is minutes) * @property {boolean} [milliseconds=false] states if the input has granularity up to milliseconds - * @property {boolean} [required] states if the inputs can be omitted + * @property {boolean} [required] states if the input can be omitted * @property {number} [min] the timestamp of the minimum date allowed by the input (included) * @property {number} [max] the timestamp of the maximum date allowed by the input (excluded) */ @@ -71,40 +69,29 @@ export class DateTimeInputComponent extends StatefulComponent { * @return {Component} the component */ view() { - const inputsMin = this._getInputsMin(this._minTimestamp, this._value); - const inputsMax = this._getInputsMax(this._maxTimestamp, this._value); + const inputMin = this._minTimestamp !== null + ? formatTimestampForDateTimeInput(this._minTimestamp, this._seconds || this._milliseconds, this._milliseconds) + : ''; + const inputMax = this._maxTimestamp !== null + ? formatTimestampForDateTimeInput(this._maxTimestamp, this._seconds || this._milliseconds, this._milliseconds) + : ''; return h('.flex-row.items-center.g2', [ h( 'input.form-control', { - type: 'date', - // Firefox shrinks the date inputs, apply a min-width to it - style: { minWidth: '9rem' }, + type: 'datetime-local', required: this._required, - value: this._value.date, - onchange: (e) => this._patchValue({ date: e.target.value }), - // Mithril do not remove min/max if previously set... - min: inputsMin?.date ?? '', - max: inputsMax?.date ?? '', - }, - ), - h( - 'input.form-control', - { - type: 'time', - required: this._required, - value: this._value.time, - step: this._milliseconds ? 0.001 : this._seconds ? 1 : undefined, - onchange: (e) => this._patchValue({ time: e.target.value }), - // Mithril do not remove min/max if previously set... - min: inputsMin?.time ?? '', - max: inputsMax?.time ?? '', + value: this._value, + step: this._milliseconds ? 0.001 : this._seconds ? 1 : 60, + onchange: (e) => this._onChange(e.target.value), + min: inputMin, + max: inputMax, }, ), h( '.btn.btn-pill.f7', - { disabled: this._value.date === '' && this._value.time === '', onclick: () => this._patchValue({ date: '', time: '' }) }, + { disabled: this._value === '', onclick: () => this._onChange('') }, iconX(), ), ]); @@ -118,8 +105,7 @@ export class DateTimeInputComponent extends StatefulComponent { * @private */ _updateAttrs(attrs) { - const { value, onChange, seconds, milliseconds, required = false, defaults = {}, min = null, max = null } = attrs; - const { date: defaultDate = '', time: defaultTime = '' } = defaults; + const { value, onChange, seconds, milliseconds, required = false, min = null, max = null } = attrs; this._value = value; this._onChange = onChange; @@ -129,105 +115,7 @@ export class DateTimeInputComponent extends StatefulComponent { this._required = required; - /** - * @type {DateTimeInputRawData} - * @private - */ - this._defaults = { - date: defaultDate, - time: defaultTime, - }; - this._minTimestamp = min; this._maxTimestamp = max; } - - /** - * Update the inputs values - * - * @param {Partial} patch the input values patch - * @return {void} - */ - _patchValue({ time, date }) { - if (date !== undefined) { - this._value.date = date; - if (time === undefined && !this._value.time) { - this._value.time = this._defaults.time; - } - } - - if (time !== undefined) { - this._value.time = time; - if (date === undefined && !this._value.date) { - this._value.date = this._defaults.date; - } - } - - this._onChange(this._value); - } - - /** - * Returns the min values to apply to the inputs - * - * @param {number|null} minTimestamp the minimal timestamp to represent in the inputs - * @param {DateTimeInputRawData} raw the current raw values - * @return {(Partial<{date: string, time: string}>|null)} the min values to apply to date and time inputs - */ - _getInputsMin(minTimestamp, raw) { - if (minTimestamp === null) { - return null; - } - - const rawDate = raw.date || null; - const rawTime = raw.time || null; - - const minDateAndTime = formatTimestampForDateTimeInput(minTimestamp, this._seconds || this._milliseconds, this._milliseconds); - const inputsMin = {}; - - if (rawDate !== null && rawDate === minDateAndTime.date) { - inputsMin.time = minDateAndTime.time; - } - - if (rawTime !== null && rawTime < minDateAndTime.time) { - inputsMin.date = formatTimestampForDateTimeInput( - minTimestamp + MILLISECONDS_IN_ONE_DAY, - this._seconds || this._milliseconds, - this._milliseconds, - ).date; - } else { - inputsMin.date = minDateAndTime.date; - } - - return inputsMin; - } - - /** - * Returns the max values to apply to the inputs - * - * @param {number|null} maxTimestamp the maximal timestamp to represent in the inputs - * @param {DateTimeInputRawData} raw the current raw values - * @return {(Partial<{date: string, time: string}>|null)} the max values - */ - _getInputsMax(maxTimestamp, raw) { - if (maxTimestamp === null) { - return null; - } - - const rawDate = raw.date || null; - const rawTime = raw.time || null; - - const maxDateAndTime = formatTimestampForDateTimeInput(maxTimestamp, this._seconds, this._milliseconds); - const inputsMax = {}; - - if (rawDate !== null && rawDate === maxDateAndTime.date) { - inputsMax.time = maxDateAndTime.time; - } - if (rawTime !== null && rawTime > maxDateAndTime.time) { - inputsMax.date = formatTimestampForDateTimeInput(maxTimestamp - MILLISECONDS_IN_ONE_DAY, this._seconds, this._milliseconds).date; - } else { - inputsMax.date = maxDateAndTime.date; - } - - return inputsMax; - } } diff --git a/lib/public/components/common/form/inputs/DateTimeInputModel.js b/lib/public/components/common/form/inputs/DateTimeInputModel.js index 91604692f7..8a1e9d8eda 100644 --- a/lib/public/components/common/form/inputs/DateTimeInputModel.js +++ b/lib/public/components/common/form/inputs/DateTimeInputModel.js @@ -17,18 +17,6 @@ import { } from '../../../../utilities/formatting/dateTimeInputFormatters.mjs'; import { Observable } from '/js/src/index.js'; -/** - * @typedef DateTimeInputRawData - * @property {string} date the raw date value - * @property {string} time the raw time value - */ - -/** - * @typedef DateTimeInputConfiguration - * @property {Partial} [defaults] the default raw values to use when partially updating inputs - * @property {boolean} [required] states if the input can be null - */ - /** * Store the state of a date time model */ @@ -47,10 +35,10 @@ export class DateTimeInputModel extends Observable { this._milliseconds = milliseconds; /** - * @type {DateTimeInputRawData} + * @type {string} * @private */ - this._raw = { date: '', time: '' }; + this._raw = ''; /** * @type {number|null} @@ -60,22 +48,21 @@ export class DateTimeInputModel extends Observable { } /** - * Update the inputs raw values + * Update the input raw value * - * @param {DateTimeInputRawData} raw the input raw values + * @param {string} raw the input raw value (datetime-local string) * @return {void} */ update(raw) { this._raw = raw; - const hasDateAndTime = raw.date && raw.time; try { - this._value = hasDateAndTime ? extractTimestampFromDateTimeInput(raw) : null; + this._value = raw ? extractTimestampFromDateTimeInput(raw) : null; } catch { this._value = null; } - hasDateAndTime && this.notify(); + this.notify(); } /** @@ -96,9 +83,9 @@ export class DateTimeInputModel extends Observable { } /** - * Returns the raw input values + * Returns the raw input value * - * @return {DateTimeInputRawData} the raw values + * @return {string} the raw datetime-local value */ get raw() { return this._raw; @@ -132,7 +119,7 @@ export class DateTimeInputModel extends Observable { this._value = value; this._raw = value !== null ? formatTimestampForDateTimeInput(value, this._seconds || this._milliseconds, this._milliseconds) - : { date: '', time: '' }; + : ''; !silent && this.notify(); } diff --git a/lib/public/components/common/form/inputs/TimestampInputComponent.js b/lib/public/components/common/form/inputs/TimestampInputComponent.js index f145319c7c..693e78d87b 100644 --- a/lib/public/components/common/form/inputs/TimestampInputComponent.js +++ b/lib/public/components/common/form/inputs/TimestampInputComponent.js @@ -43,10 +43,15 @@ export class TimestampInputComponent extends StatefulComponent { const { seconds = false, onChange, value = null } = attrs; /** - * @type {DateTimeInputRawData} + * @type {string} - format YYYY-MM-DDTHH:MM[:SS[.mmm]] + * @private + */ + this._raw = ''; + + /** + * @type {number|null} - timestamp in ms * @private */ - this._raw = { date: '', time: '' }; this._value = value; this._onChange = onChange; @@ -73,9 +78,9 @@ export class TimestampInputComponent extends StatefulComponent { } /** - * Handle change of date/time input and trigger the onChange + * Handle change of datetime-local input and trigger the onChange * - * @param {DateTimeInputRawData} raw the date/time input raw data + * @param {string} raw the datetime-local input value * @return {void} * @private */ @@ -83,7 +88,7 @@ export class TimestampInputComponent extends StatefulComponent { this._raw = raw; let value; try { - value = raw.date && raw.time ? extractTimestampFromDateTimeInput(raw) : null; + value = raw ? extractTimestampFromDateTimeInput(raw) : null; } catch { value = null; } diff --git a/lib/public/utilities/formatting/dateTimeInputFormatters.mjs b/lib/public/utilities/formatting/dateTimeInputFormatters.mjs index f26350c065..15a466c783 100644 --- a/lib/public/utilities/formatting/dateTimeInputFormatters.mjs +++ b/lib/public/utilities/formatting/dateTimeInputFormatters.mjs @@ -12,12 +12,13 @@ */ /** - * Returns the given date formatted in two parts, YYYY-MM-DD and HH:MM to fill in HTML date and time inputs (in the user's timezone) + * Returns the given timestamp formatted as a datetime-local input value string (YYYY-MM-DDTHH:MM[:SS[.mmm]], + * in the user's timezone) * * @param {number} timestamp the timestamp (ms) to format - * @param {boolean} enableSeconds states if the time input granularity is seconds (else, it is minutes) - * @param {boolean} enableMilliseconds states if the time input granularity is milliseconds - * @return {DateTimeInputRawData} the date expression to use as HTML input values + * @param {boolean} enableSeconds states if the input granularity is seconds (else, it is minutes) + * @param {boolean} enableMilliseconds states if the input granularity is milliseconds + * @return {string} the value to use as a datetime-local HTML input value */ export const formatTimestampForDateTimeInput = (timestamp, enableSeconds, enableMilliseconds) => { const date = new Date(timestamp); @@ -32,37 +33,26 @@ export const formatTimestampForDateTimeInput = (timestamp, enableSeconds, enable const year = date.getFullYear(); const month = pad(date.getMonth() + 1); const day = pad(date.getDate()); - const dateExpression = `${year}-${month}-${day}`; - const hours = pad(date.getHours()); const minutes = pad(date.getMinutes()); - let timeExpression = `${hours}:${minutes}`; - if (enableSeconds) { + + let value = `${year}-${month}-${day}T${hours}:${minutes}`; + if (enableSeconds || enableMilliseconds) { const seconds = pad(date.getSeconds()); - timeExpression = `${timeExpression}:${seconds}`; + value = `${value}:${seconds}`; } if (enableMilliseconds) { const milliseconds = `${date.getMilliseconds()}`.padStart(3, '0'); - timeExpression = `${timeExpression}.${milliseconds}`; + value = `${value}.${milliseconds}`; } - return { date: dateExpression, time: timeExpression }; + return value; }; /** - * Convert the given raw date-time (in the user's timezone) input to UNIX timestamp + * Convert the given datetime-local input value (in the user's timezone) to a UNIX timestamp * - * @param {DateTimeInputRawData} dateTime the date-time input's value + * @param {string} value the datetime-local input value (YYYY-MM-DDTHH:MM[:SS[.mmm]]) * @return {number} the resulting timestamp */ -export const extractTimestampFromDateTimeInput = ({ date, time }) => { - if (time.length === 5) { - // HH:MM -> HH:MM:SS.mmm - time = `${time}:00.000`; - } else if (time.length === 8) { - // HH:MM:SS -> HH:MM:SS.mmm - time = `${time}.000`; - } - - return Date.parse(`${date}T${time}`); -}; +export const extractTimestampFromDateTimeInput = (value) => Date.parse(value); diff --git a/test/public/Filters/FilteringModel.test.js b/test/public/Filters/FilteringModel.test.js index f6ba77b097..6c563d259d 100644 --- a/test/public/Filters/FilteringModel.test.js +++ b/test/public/Filters/FilteringModel.test.js @@ -75,7 +75,7 @@ module.exports = () => { const baseRowCount = 109; const startPopoverSelector = await getPopoverSelector(await page.$('.timeO2Start-filter .popover-trigger')); - const { fromDateSelector, fromTimeSelector } = getPeriodInputsSelectors(startPopoverSelector); + const { fromDateTimeSelector } = getPeriodInputsSelectors(startPopoverSelector); await checkSelectionFilters(runSelectionFiltersChecks, baseRowCount); @@ -105,10 +105,9 @@ module.exports = () => { await waitForTableTotalRowsCountToEqual(page, baseRowCount); // O2 Start Filter: - await fillInput(page, fromTimeSelector, '11:11', ['change']); - await fillInput(page, fromDateSelector, '2021-02-03', ['change']); + await fillInput(page, fromDateTimeSelector, '2021-02-03T11:11', ['change']); await waitForTableTotalRowsCountToEqual(page, 1); - await fillInput(page, fromDateSelector, '2020-02-03', ['change']); + await fillInput(page, fromDateTimeSelector, '2020-02-03T11:11', ['change']); await waitForTableTotalRowsCountToEqual(page, 2); await page.goBack(); await waitForTableTotalRowsCountToEqual(page, 1); diff --git a/test/public/Filters/filtersToUrl.test.js b/test/public/Filters/filtersToUrl.test.js index a8aa644af7..3040721618 100644 --- a/test/public/Filters/filtersToUrl.test.js +++ b/test/public/Filters/filtersToUrl.test.js @@ -82,16 +82,14 @@ module.exports = () => { await openFilteringPanel(page); const createdAtPopoverSelector = await getPopoverSelector(await page.$(popoverTrigger)); - const periodInputsSelectors = getPeriodInputsSelectors(createdAtPopoverSelector); + const {fromDateTimeSelector, toDateTimeSelector } = getPeriodInputsSelectors(createdAtPopoverSelector); await fillInput(page, '.runs-filter input', '10', ['change']); await fillInput(page, '.id-filter input', 'Dxi029djX, TDI59So3d', ['change']); await pressElement(page, '#checkboxes-checkbox-DESTROYED'); await fillInput(page, '.historyItems-filter input', 'C-R-D-X', ['change']); - await fillInput(page, periodInputsSelectors.fromDateSelector, '2019-08-09', ['change']); - await fillInput(page, periodInputsSelectors.toDateSelector, '2019-08-10', ['change']); - await fillInput(page, periodInputsSelectors.fromTimeSelector, '00:00', ['change']); - await fillInput(page, periodInputsSelectors.toTimeSelector, '23:59', ['change']); + await fillInput(page, fromDateTimeSelector, '2019-08-09T00:00', ['change']); + await fillInput(page, toDateTimeSelector, '2019-08-10T23:59', ['change']); const queryParameters = getQueryParameters(page); expect(queryParameters).to.deep.equal({ @@ -114,31 +112,23 @@ module.exports = () => { const sbEndPopOverSelector = await getPopoverSelector(await page.$(sbEndPopoverTrigger)); const filterSchemeNameInputField= '.fillingSchemeName-filter input'; const { - fromDateSelector: sbStartFromDateSelector, - toDateSelector: sbStartToDateSelector, - fromTimeSelector: sbStartFromTimeSelector, - toTimeSelector: sbStartToTimeSelector + fromDateTimeSelector: sbStartFromDateTimeSelector, + toDateTimeSelector: sbStartToDateTimeSelector } = getPeriodInputsSelectors(sbStartPopOverSelector); const { - fromDateSelector: sbEndFromDateSelector, - toDateSelector: sbEndToDateSelector, - fromTimeSelector: sbEndFromTimeSelector, - toTimeSelector: sbEndToTimeSelector + fromDateTimeSelector: sbEndFromDateTimeSelector, + toDateTimeSelector: sbEndToDateTimeSelector } = getPeriodInputsSelectors(sbEndPopOverSelector); await openFilteringPanel(page); await fillInput(page, '#beam-duration-filter-operand', '00:01:40', ['change']); await fillInput(page, '#run-duration-filter-operand', '00:00:00', ['change']); await pressElement(page, '#beam-types-checkbox-p-Pb'); - await fillInput(page, sbStartFromDateSelector, '2019-08-08', ['change']); - await fillInput(page, sbStartToDateSelector, '2019-08-08', ['change']); - await fillInput(page, sbStartFromTimeSelector, '10:00', ['change']); - await fillInput(page, sbStartToTimeSelector, '12:00', ['change']); - await fillInput(page, sbEndFromDateSelector, '2022-03-22', ['change']); - await fillInput(page, sbEndToDateSelector, '2022-03-22', ['change']); - await fillInput(page, sbEndFromTimeSelector, '01:00', ['change']); - await fillInput(page, sbEndToTimeSelector, '23:59', ['change']); + await fillInput(page, sbStartFromDateTimeSelector, '2019-08-08T10:00', ['change']); + await fillInput(page, sbStartToDateTimeSelector, '2019-08-08T12:00', ['change']); + await fillInput(page, sbEndFromDateTimeSelector, '2022-03-22T01:00', ['change']); + await fillInput(page, sbEndToDateTimeSelector, '2022-03-22T23:59', ['change']); await fillInput(page, filterSchemeNameInputField, 'Single_12b_8_1024_8_2018', ['change']); const queryParameters = getQueryParameters(page); @@ -165,17 +155,13 @@ module.exports = () => { const endPopoverSelector = await getPopoverSelector(await page.$('.timeO2End-filter .popover-trigger')); const { - fromDateSelector: startFromDateSelector, - toDateSelector: startToDateSelector, - fromTimeSelector: startFromTimeSelector, - toTimeSelector: startToTimeSelector + fromDateTimeSelector: startFromDateTimeSelector, + toDateTimeSelector: startToDateTimeSelector, } = getPeriodInputsSelectors(startPopoverSelector); const { - fromDateSelector: endFromDateSelector, - toDateSelector: endToDateSelector, - fromTimeSelector: endFromTimeSelector, - toTimeSelector: endToTimeSelector + fromDateTimeSelector: endFromDateTimeSelector, + toDateTimeSelector: endToDateTimeSelector, } = getPeriodInputsSelectors(endPopoverSelector); await openFilteringPanel(page); @@ -183,14 +169,10 @@ module.exports = () => { await pressElement(page, '#tag-dropdown-option-FOOD', true); await pressElement(page, '#run-definition-checkbox-PHYSICS', true); await pressElement(page, '.timeO2Start-filter .popover-trigger'); - await fillInput(page, startFromTimeSelector, '11:11', ['change']); - await fillInput(page, startToTimeSelector, '14:00', ['change']); - await fillInput(page, startFromDateSelector, '2021-02-03', ['change']); - await fillInput(page, startToDateSelector, '2021-02-03', ['change']); - await fillInput(page, endFromTimeSelector, '11:11', ['change']); - await fillInput(page, endToTimeSelector, '14:00', ['change']); - await fillInput(page, endFromDateSelector, '2021-02-03', ['change']); - await fillInput(page, endToDateSelector, '2021-02-03', ['change']); + await fillInput(page, startFromDateTimeSelector, '2021-02-03T11:11', ['change']); + await fillInput(page, startToDateTimeSelector, '2021-02-03T14:00', ['change']); + await fillInput(page, endFromDateTimeSelector, '2021-02-03T11:11', ['change']); + await fillInput(page, endToDateTimeSelector, '2021-02-03T14:00', ['change']); await fillInput(page, '#duration-operand', '1500', ['change']); await pressElement(page, `${dipolePopoverSelector} .dropdown-option:last-child`, true); await pressElement(page, '#checkboxes-checkbox-bad'); @@ -291,17 +273,13 @@ module.exports = () => { const dipolePopoverSelector = await getPopoverSelector(await page.$('.aliceL3AndDipoleCurrent-filter .popover-trigger')); const { - fromDateSelector: startFromDateSelector, - toDateSelector: startToDateSelector, - fromTimeSelector: startFromTimeSelector, - toTimeSelector: startToTimeSelector + fromDateTimeSelector: startFromDateTimeSelector, + toDateTimeSelector: startToDateTimeSelector, } = getPeriodInputsSelectors(startPopoverSelector); const { - fromDateSelector: endFromDateSelector, - toDateSelector: endToDateSelector, - fromTimeSelector: endFromTimeSelector, - toTimeSelector: endToTimeSelector + fromDateTimeSelector: endFromDateTimeSelector, + toDateTimeSelector: endToDateTimeSelector, } = getPeriodInputsSelectors(endPopoverSelector); await fillInput(page, '#inelasticInteractionRateAvg-operand', '100000', ['change']); @@ -310,14 +288,10 @@ module.exports = () => { await fillInput(page, '.fillNumbers-textFilter', '1, 3', ['change']); await pressElement(page, `${dipolePopoverSelector} .dropdown-option:last-child`, true); - await fillInput(page, startFromTimeSelector, '11:11', ['change']); - await fillInput(page, startToTimeSelector, '14:00', ['change']); - await fillInput(page, startFromDateSelector, '2021-02-03', ['change']); - await fillInput(page, startToDateSelector, '2021-02-03', ['change']); - await fillInput(page, endFromTimeSelector, '11:11', ['change']); - await fillInput(page, endToTimeSelector, '14:00', ['change']); - await fillInput(page, endFromDateSelector, '2021-02-03', ['change']); - await fillInput(page, endToDateSelector, '2021-02-03', ['change']); + await fillInput(page, startFromDateTimeSelector, '2021-02-03T11:11', ['change']); + await fillInput(page, startToDateTimeSelector, '2021-02-03T14:00', ['change']); + await fillInput(page, endFromDateTimeSelector, '2021-02-03T11:11', ['change']); + await fillInput(page, endToDateTimeSelector, '2021-02-03T14:00', ['change']); const queryParameters = getQueryParameters(page); @@ -392,29 +366,21 @@ module.exports = () => { const endPopoverSelector = await getPopoverSelector(await page.$('.timeO2End-filter .popover-trigger')); const { - fromDateSelector: startFromDateSelector, - toDateSelector: startToDateSelector, - fromTimeSelector: startFromTimeSelector, - toTimeSelector: startToTimeSelector + fromDateTimeSelector: startFromDateTimeSelector, + toDateTimeSelector: startToDateTimeSelector, } = getPeriodInputsSelectors(startPopoverSelector); const { - fromDateSelector: endFromDateSelector, - toDateSelector: endToDateSelector, - fromTimeSelector: endFromTimeSelector, - toTimeSelector: endToTimeSelector + fromDateTimeSelector: endFromDateTimeSelector, + toDateTimeSelector: endToDateTimeSelector, } = getPeriodInputsSelectors(endPopoverSelector); await openFilteringPanel(page); await pressElement(page, '.timeO2Start-filter .popover-trigger'); - await fillInput(page, startFromTimeSelector, '11:11', ['change']); - await fillInput(page, startToTimeSelector, '14:00', ['change']); - await fillInput(page, startFromDateSelector, '2021-02-03', ['change']); - await fillInput(page, startToDateSelector, '2021-02-03', ['change']); - await fillInput(page, endFromTimeSelector, '11:11', ['change']); - await fillInput(page, endToTimeSelector, '14:00', ['change']); - await fillInput(page, endFromDateSelector, '2021-02-03', ['change']); - await fillInput(page, endToDateSelector, '2021-02-03', ['change']); + await fillInput(page, startFromDateTimeSelector, '2021-02-03T11:11', ['change']); + await fillInput(page, startToDateTimeSelector, '2021-02-03T14:00', ['change']); + await fillInput(page, endFromDateTimeSelector, '2021-02-03T11:11', ['change']); + await fillInput(page, endToDateTimeSelector, '2021-02-03T14:00', ['change']); await fillInput(page, '.inelasticInteractionRateAtMid-filter input', '1', ['change']); await fillInput(page, '.inelasticInteractionRateAtEnd-filter input', '1', ['change']); await fillInput(page, '.inelasticInteractionRateAtStart-filter input', '1', ['change']); @@ -457,31 +423,23 @@ module.exports = () => { const endPopoverSelector = await getPopoverSelector(await page.$('.timeO2End-filter .popover-trigger')); const { - fromDateSelector: startFromDateSelector, - toDateSelector: startToDateSelector, - fromTimeSelector: startFromTimeSelector, - toTimeSelector: startToTimeSelector + fromDateTimeSelector: startFromDateTimeSelector, + toDateTimeSelector: startToDateTimeSelector } = getPeriodInputsSelectors(startPopoverSelector); const { - fromDateSelector: endFromDateSelector, - toDateSelector: endToDateSelector, - fromTimeSelector: endFromTimeSelector, - toTimeSelector: endToTimeSelector + fromDateTimeSelector: endFromDateTimeSelector, + toDateTimeSelector: endToDateTimeSelector } = getPeriodInputsSelectors(endPopoverSelector); await openFilteringPanel(page); await pressElement(page, '#detector-filter-dropdown-option-ITS', true); await pressElement(page, '#tag-dropdown-option-FOOD', true); await pressElement(page, '.timeO2Start-filter .popover-trigger'); - await fillInput(page, startFromTimeSelector, '11:11', ['change']); - await fillInput(page, startToTimeSelector, '14:00', ['change']); - await fillInput(page, startFromDateSelector, '2021-02-03', ['change']); - await fillInput(page, startToDateSelector, '2021-02-03', ['change']); - await fillInput(page, endFromTimeSelector, '11:11', ['change']); - await fillInput(page, endToTimeSelector, '14:00', ['change']); - await fillInput(page, endFromDateSelector, '2021-02-03', ['change']); - await fillInput(page, endToDateSelector, '2021-02-03', ['change']); + await fillInput(page, startFromDateTimeSelector, '2021-02-03T11:11', ['change']); + await fillInput(page, startToDateTimeSelector, '2021-02-03T14:00', ['change']); + await fillInput(page, endFromDateTimeSelector, '2021-02-03T11:11', ['change']); + await fillInput(page, endToDateTimeSelector, '2021-02-03T14:00', ['change']); await fillInput(page, '#duration-operand', '1500', ['change']); await fillInput(page, '.muInelasticInteractionRate-filter input', '1', ['change']); await fillInput(page, '.inelasticInteractionRateAvg-filter input', '1', ['change']); diff --git a/test/public/Filters/urlToFilter.test.js b/test/public/Filters/urlToFilter.test.js index 06eb280039..fabf28a775 100644 --- a/test/public/Filters/urlToFilter.test.js +++ b/test/public/Filters/urlToFilter.test.js @@ -45,7 +45,7 @@ module.exports = () => { await openFilteringPanel(page); const popOverSelector = await getPopoverSelector(await page.$(popoverTrigger)); - const { fromDateSelector, toDateSelector, fromTimeSelector, toTimeSelector } = getPeriodInputsSelectors(popOverSelector); + const { fromDateTimeSelector, toDateTimeSelector } = getPeriodInputsSelectors(popOverSelector); await expectInputValue(page, '.title-textFilter', 'bogusbogusbogus'); await expectInputValue(page, '#authorFilterText', 'Jane'); @@ -55,11 +55,8 @@ module.exports = () => { await expectInputValue(page, '.environments-filter input', '8E4aZTjY'); await expectInputValue(page, '.runNumbers-textFilter', '1,2'); await expectInputValue(page, '.fillNumbers-textFilter', '1, 6'); - await expectInputValue(page, fromDateSelector, '2020-02-02'); - await expectInputValue(page, toDateSelector, '2020-02-02'); - - await expectInputValue(page, fromTimeSelector, '10:00'); - await expectInputValue(page, toTimeSelector, '11:00'); + await expectInputValue(page, fromDateTimeSelector, '2020-02-02T10:00'); + await expectInputValue(page, toDateTimeSelector, '2020-02-02T11:00'); }); it('should set filters from EnvironmentsOverview to the URL', async () => { @@ -70,16 +67,14 @@ module.exports = () => { const popoverTrigger = '.createdAt-filter .popover-trigger'; const createdAtPopoverSelector = await getPopoverSelector(await page.$(popoverTrigger)); - const periodInputsSelectors = getPeriodInputsSelectors(createdAtPopoverSelector); + const { fromDateTimeSelector, toDateTimeSelector } = getPeriodInputsSelectors(createdAtPopoverSelector); await expectInputValue(page, '.runs-filter input', '10'); await expectInputValue(page, '.id-filter input', 'Dxi029djX, TDI59So3d'); await page.waitForSelector('#checkboxes-checkbox-DESTROYED:checked'); await expectInputValue(page, '.historyItems-filter input', 'C-R-D-X'); - await expectInputValue(page, periodInputsSelectors.fromDateSelector, '2019-08-08'); - await expectInputValue(page, periodInputsSelectors.toDateSelector, '2019-08-10'); - await expectInputValue(page, periodInputsSelectors.fromTimeSelector, '22:00'); - await expectInputValue(page, periodInputsSelectors.toTimeSelector, '21:59'); + await expectInputValue(page, fromDateTimeSelector, '2019-08-08T22:00'); + await expectInputValue(page, toDateTimeSelector, '2019-08-10T21:59'); }); it('should set filters from LhcFillsOverview to the URL', async () => { @@ -95,30 +90,24 @@ module.exports = () => { const sbEndPopOverSelector = await getPopoverSelector(await page.$(sbEndPopoverTrigger)); const filterSchemeNameInputField= '.fillingSchemeName-filter input'; const { - fromDateSelector: sbStartFromDateSelector, - toDateSelector: sbStartToDateSelector, - fromTimeSelector: sbStartFromTimeSelector, - toTimeSelector: sbStartToTimeSelector + fromDateTimeSelector: sbStartFromDateTimeSelector, + toDateTimeSelector: sbStartToDateTimeSelector } = getPeriodInputsSelectors(sbStartPopOverSelector); const { - fromDateSelector: sbEndFromDateSelector, - toDateSelector: sbEndToDateSelector, - fromTimeSelector: sbEndFromTimeSelector, - toTimeSelector: sbEndToTimeSelector + fromDateTimeSelector: sbEndFromDateTimeSelector, + toDateTimeSelector: sbEndToDateTimeSelector } = getPeriodInputsSelectors(sbEndPopOverSelector); await openFilteringPanel(page); await expectInputValue(page, '#beam-duration-filter-operand', '00:01:40'); await expectInputValue(page, '#run-duration-filter-operand', '00:00:00'); - await expectInputValue(page, sbStartFromDateSelector, '2019-08-08'); - await expectInputValue(page, sbStartToDateSelector, '2019-08-08'); - await expectInputValue(page, sbStartFromTimeSelector, '08:00'); - await expectInputValue(page, sbStartToTimeSelector, '10:00'); - await expectInputValue(page, sbEndFromDateSelector, '2022-03-22'); - await expectInputValue(page, sbEndToDateSelector, '2022-03-22'); - await expectInputValue(page, sbEndFromTimeSelector, '00:00'); - await expectInputValue(page, sbEndToTimeSelector, '22:59'); + await expectInputValue(page, sbStartFromDateTimeSelector, '2019-08-08T00:00'); + await expectInputValue(page, sbStartToDateTimeSelector, '2019-08-08T02:00'); + await expectInputValue(page, sbEndFromDateTimeSelector, '2019-08-08T08:00'); + await expectInputValue(page, sbEndToDateTimeSelector, '2019-08-08T10:00'); + await expectInputValue(page, sbEndFromDateTimeSelector, '2022-03-22T00:00'); + await expectInputValue(page, sbEndToDateTimeSelector, '2022-03-22T22:59'); await expectInputValue(page, filterSchemeNameInputField, 'Single_12b_8_1024_8_2018'); await page.waitForSelector('#beam-types-checkbox-p-Pb:checked'); }); @@ -139,17 +128,13 @@ module.exports = () => { const endPopoverSelector = await getPopoverSelector(await page.$('.timeO2End-filter .popover-trigger')); const { - fromDateSelector: startFromDateSelector, - toDateSelector: startToDateSelector, - fromTimeSelector: startFromTimeSelector, - toTimeSelector: startToTimeSelector + fromDateTimeSelector: startFromDateTimeSelector, + toDateTimeSelector: startToDateTimeSelector } = getPeriodInputsSelectors(startPopoverSelector); const { - fromDateSelector: endFromDateSelector, - toDateSelector: endToDateSelector, - fromTimeSelector: endFromTimeSelector, - toTimeSelector: endToTimeSelector + fromDateTimeSelector: endFromDateTimeSelector, + toDateTimeSelector: endToDateTimeSelector } = getPeriodInputsSelectors(endPopoverSelector); await openFilteringPanel(page); @@ -176,14 +161,10 @@ module.exports = () => { await expectInputValue(page, '#eorDescription', 'some'); await expectInputValue(page, '#eorTitles', 'CPV'); await expectInputValue(page, '#eorCategories', 'DETECTORS'); - await expectInputValue(page, startFromTimeSelector, '10:11'); - await expectInputValue(page, startToTimeSelector, '13:00'); - await expectInputValue(page, startFromDateSelector, '2021-02-03'); - await expectInputValue(page, startToDateSelector, '2021-02-03'); - await expectInputValue(page, endFromTimeSelector, '10:11'); - await expectInputValue(page, endToTimeSelector, '13:00'); - await expectInputValue(page, endFromDateSelector, '2021-02-03'); - await expectInputValue(page, endToDateSelector, '2021-02-03'); + await expectInputValue(page, startFromDateTimeSelector, '2021-02-03T10:11'); + await expectInputValue(page, startToDateTimeSelector, '2021-02-03T13:00'); + await expectInputValue(page, endFromDateTimeSelector, '2021-02-03T10:11'); + await expectInputValue(page, endToDateTimeSelector, '2021-02-03T13:00'); }); it('should set filters from lhcPriodOverview to the URL', async () => { @@ -215,31 +196,23 @@ module.exports = () => { const dipolePopoverSelector = await getPopoverSelector(await page.$('.aliceL3AndDipoleCurrent-filter .popover-trigger')); const { - fromDateSelector: startFromDateSelector, - toDateSelector: startToDateSelector, - fromTimeSelector: startFromTimeSelector, - toTimeSelector: startToTimeSelector + fromDateTimeSelector: startFromDateTimeSelector, + toDateTimeSelector: startToDateTimeSelector } = getPeriodInputsSelectors(startPopoverSelector); const { - fromDateSelector: endFromDateSelector, - toDateSelector: endToDateSelector, - fromTimeSelector: endFromTimeSelector, - toTimeSelector: endToTimeSelector + fromDateTimeSelector: endFromDateTimeSelector, + toDateTimeSelector: endToDateTimeSelector } = getPeriodInputsSelectors(endPopoverSelector); await expectInputValue(page, '#inelasticInteractionRateAvg-operand', '100000'); await expectInputValue(page, '#muInelasticInteractionRate-operand', '100000'); await expectInputValue(page, '#runOverviewFilter .runNumbers-textFilter', '101'); await expectInputValue(page, '.fillNumbers-textFilter', '1, 3'); - await expectInputValue(page, startFromTimeSelector, '10:11'); - await expectInputValue(page, startToTimeSelector, '13:00'); - await expectInputValue(page, startFromDateSelector, '2021-02-03'); - await expectInputValue(page, startToDateSelector, '2021-02-03'); - await expectInputValue(page, endFromTimeSelector, '10:11'); - await expectInputValue(page, endToTimeSelector, '13:00'); - await expectInputValue(page, endFromDateSelector, '2021-02-03'); - await expectInputValue(page, endToDateSelector, '2021-02-03'); + await expectInputValue(page, startFromDateTimeSelector, '2021-02-03T10:11'); + await expectInputValue(page, startToDateTimeSelector, '2021-02-03T13:00'); + await expectInputValue(page, endFromDateTimeSelector, '2021-02-03T10:11'); + await expectInputValue(page, endToDateTimeSelector, '2021-02-03T13:00'); await page.waitForSelector(`${dipolePopoverSelector} .dropdown-option:last-child input:checked`); }); @@ -283,31 +256,23 @@ module.exports = () => { const endPopoverSelector = await getPopoverSelector(await page.$('.timeO2End-filter .popover-trigger')); const { - fromDateSelector: startFromDateSelector, - toDateSelector: startToDateSelector, - fromTimeSelector: startFromTimeSelector, - toTimeSelector: startToTimeSelector + fromDateTimeSelector: startFromDateTimeSelector, + toDateTimeSelector: startToDateTimeSelector } = getPeriodInputsSelectors(startPopoverSelector); const { - fromDateSelector: endFromDateSelector, - toDateSelector: endToDateSelector, - fromTimeSelector: endFromTimeSelector, - toTimeSelector: endToTimeSelector + fromDateTimeSelector: endFromDateTimeSelector, + toDateTimeSelector: endToDateTimeSelector } = getPeriodInputsSelectors(endPopoverSelector); await openFilteringPanel(page); await expectInputValue(page, '.inelasticInteractionRateAtMid-filter input', '1'); await expectInputValue(page, '.inelasticInteractionRateAtEnd-filter input', '1'); await expectInputValue(page, '.inelasticInteractionRateAtStart-filter input', '1'); - await expectInputValue(page, startFromTimeSelector, '10:11'); - await expectInputValue(page, startToTimeSelector, '13:00'); - await expectInputValue(page, startFromDateSelector, '2021-02-03'); - await expectInputValue(page, startToDateSelector, '2021-02-03'); - await expectInputValue(page, endFromTimeSelector, '10:11'); - await expectInputValue(page, endToTimeSelector, '13:00'); - await expectInputValue(page, endFromDateSelector, '2021-02-03'); - await expectInputValue(page, endToDateSelector, '2021-02-03'); + await expectInputValue(page, startFromDateTimeSelector, '2021-02-03T10:11'); + await expectInputValue(page, startToDateTimeSelector, '2021-02-03T13:00'); + await expectInputValue(page, endFromDateTimeSelector, '2021-02-03T10:11'); + await expectInputValue(page, endToDateTimeSelector, '2021-02-03T13:00'); await page.waitForSelector(`${dipolePopoverSelector} .dropdown-option:last-child input:checked`); await page.waitForSelector('#mcReproducibleAsNotBadToggle input:checked'); @@ -333,28 +298,20 @@ module.exports = () => { const endPopoverSelector = await getPopoverSelector(await page.$('.timeO2End-filter .popover-trigger')); const { - fromDateSelector: startFromDateSelector, - toDateSelector: startToDateSelector, - fromTimeSelector: startFromTimeSelector, - toTimeSelector: startToTimeSelector + fromDateTimeSelector: startFromDateTimeSelector, + toDateTimeSelector: startToDateTimeSelector } = getPeriodInputsSelectors(startPopoverSelector); const { - fromDateSelector: endFromDateSelector, - toDateSelector: endToDateSelector, - fromTimeSelector: endFromTimeSelector, - toTimeSelector: endToTimeSelector + fromDateTimeSelector: endFromDateTimeSelector, + toDateTimeSelector: endToDateTimeSelector } = getPeriodInputsSelectors(endPopoverSelector); await openFilteringPanel(page); - await expectInputValue(page, startFromTimeSelector, '10:11'); - await expectInputValue(page, startToTimeSelector, '13:00'); - await expectInputValue(page, startFromDateSelector, '2021-02-03'); - await expectInputValue(page, startToDateSelector, '2021-02-03'); - await expectInputValue(page, endFromTimeSelector, '10:11'); - await expectInputValue(page, endToTimeSelector, '13:00'); - await expectInputValue(page, endFromDateSelector, '2021-02-03'); - await expectInputValue(page, endToDateSelector, '2021-02-03'); + await expectInputValue(page, startFromDateTimeSelector, '2021-02-03T10:11'); + await expectInputValue(page, startToDateTimeSelector, '2021-02-03T13:00'); + await expectInputValue(page, endFromDateTimeSelector, '2021-02-03T10:11'); + await expectInputValue(page, endToDateTimeSelector, '2021-02-03T13:00'); await expectInputValue(page, '#duration-operand', '1500'); await expectInputValue(page, '.muInelasticInteractionRate-filter input', '1'); await expectInputValue(page, '.inelasticInteractionRateAvg-filter input', '1'); diff --git a/test/public/defaults.js b/test/public/defaults.js index 9dac35f2bb..2c4504443d 100644 --- a/test/public/defaults.js +++ b/test/public/defaults.js @@ -961,15 +961,13 @@ module.exports.validateDate = (date, format = 'DD/MM/YYYY hh:mm:ss') => !isNaN(d * Return the selector for all the inputs composing a period inputs * * @param {string} popoverSelector the selector of the period inputs parent - * @return {{fromDateSelector: string, fromTimeSelector: string, toDateSelector: string, toTimeSelector: string}} the selectors + * @return {{fromDateTimeSelector: string, toDateTimeSelector: string}} the selectors */ module.exports.getPeriodInputsSelectors = (popoverSelector) => { const commonInputsAncestor = `${popoverSelector} > div > div > div > div`; return { - fromDateSelector: `${commonInputsAncestor} > div:nth-child(1) input:nth-child(1)`, - fromTimeSelector: `${commonInputsAncestor} > div:nth-child(1) input:nth-child(2)`, - toDateSelector: `${commonInputsAncestor} > div:nth-child(2) input:nth-child(1)`, - toTimeSelector: `${commonInputsAncestor} > div:nth-child(2) input:nth-child(2)`, + fromDateTimeSelector: `${commonInputsAncestor} > div:nth-child(1) input[type="datetime-local"]:nth-child(1)`, + toDateTimeSelector: `${commonInputsAncestor} > div:nth-child(2) input[type="datetime-local"]:nth-child(1)`, }; }; diff --git a/test/public/envs/overview.test.js b/test/public/envs/overview.test.js index 73eecd9a4f..097f3e982a 100644 --- a/test/public/envs/overview.test.js +++ b/test/public/envs/overview.test.js @@ -308,11 +308,9 @@ module.exports = () => { await fillInput(page, '.historyItems-filter input', 'C-R-D-X', ['change']); const createdAtPopoverSelector = await getPopoverSelector(await page.$('.createdAt-filter .popover-trigger')); - const periodInputsSelectors = getPeriodInputsSelectors(createdAtPopoverSelector); - await fillInput(page, periodInputsSelectors.fromDateSelector, '2019-08-09', ['change']); - await fillInput(page, periodInputsSelectors.toDateSelector, '2019-08-10', ['change']); - await fillInput(page, periodInputsSelectors.fromTimeSelector, '00:00', ['change']); - await fillInput(page, periodInputsSelectors.toTimeSelector, '23:59', ['change']); + const {fromDateTimeSelector, toDateTimeSelector} = getPeriodInputsSelectors(createdAtPopoverSelector); + await fillInput(page, fromDateTimeSelector, '2019-08-09T00:00', ['change']); + await fillInput(page, toDateTimeSelector, '2019-08-10T23:59', ['change']); await waitForTableLength(page, 1); expect(await page.$$eval('tbody tr', (rows) => rows.map((row) => row.id))).to.eql(['rowTDI59So3d']); diff --git a/test/public/eosReport/shift-leader-creation.test.js b/test/public/eosReport/shift-leader-creation.test.js index 843ee2d554..81d7a07814 100644 --- a/test/public/eosReport/shift-leader-creation.test.js +++ b/test/public/eosReport/shift-leader-creation.test.js @@ -83,10 +83,10 @@ module.exports = () => { const { formatTimestampForDateTimeInput } = await import('../../../lib/public/utilities/formatting/dateTimeInputFormatters.mjs'); const magnet1Timestamp = currentShift.start + 3600 * 4 * 1000; - const { date: magnet1Date, time: magnet1Time } = formatTimestampForDateTimeInput(magnet1Timestamp, true); + const magnet1DateTime = formatTimestampForDateTimeInput(magnet1Timestamp, true); const magnet2Timestamp = currentShift.start + 3600 * 2 * 1000; - const { date: magnet2Date, time: magnet2Time } = formatTimestampForDateTimeInput(magnet2Timestamp, true); + const magnet2DateTime = formatTimestampForDateTimeInput(magnet2Timestamp, true); const magnetEnd = formatShiftDate(currentShift.end, { time: true }); @@ -119,15 +119,13 @@ module.exports = () => { await page.waitForSelector('#type-specific #magnets-0 .btn-danger'); await page.click('#type-specific #magnets-0 .btn-danger'); - await fillInput(page, '#type-specific #magnets-1 > div:nth-of-type(2) > div > input:nth-of-type(1)', magnet1Date, ['change']); - await fillInput(page, '#type-specific #magnets-1 > div:nth-of-type(2) > div > input:nth-of-type(2)', magnet1Time, ['change']); + await fillInput(page, '#type-specific #magnets-1 > div:nth-of-type(2) > div > input:nth-of-type(1)', magnet1DateTime, ['change']); await page.focus('#type-specific #magnets-1 > div:nth-of-type(2) > div:nth-of-type(3) > input'); await page.keyboard.type('dipole-1'); await page.focus('#type-specific #magnets-1 > div:nth-of-type(2) > div:nth-of-type(5) > input'); await page.keyboard.type('solenoid-1'); - await fillInput(page, '#type-specific #magnets-2 > div:nth-of-type(2) > div > input:nth-of-type(1)', magnet2Date, ['change']); - await fillInput(page, '#type-specific #magnets-2 > div:nth-of-type(2) > div > input:nth-of-type(2)', magnet2Time, ['change']); + await fillInput(page, '#type-specific #magnets-2 > div:nth-of-type(2) > div > input:nth-of-type(1)', magnet2DateTime, ['change']); await page.focus('#type-specific #magnets-2 > div:nth-of-type(2) > div:nth-of-type(3) > input'); await page.keyboard.type('dipole-2'); await page.focus('#type-specific #magnets-2 > div:nth-of-type(2) > div:nth-of-type(5) > input'); diff --git a/test/public/lhcFills/overview.test.js b/test/public/lhcFills/overview.test.js index dca414570f..e5acd2c10e 100644 --- a/test/public/lhcFills/overview.test.js +++ b/test/public/lhcFills/overview.test.js @@ -372,12 +372,10 @@ module.exports = () => { await openFilteringPanel(page); const popOverSelector = await getPopoverSelector(await page.$(popoverTrigger)); - const { fromDateSelector, toDateSelector, fromTimeSelector, toTimeSelector } = getPeriodInputsSelectors(popOverSelector); - - await fillInput(page, fromDateSelector, '2019-08-08', ['change']); - await fillInput(page, toDateSelector, '2019-08-08', ['change']); - await fillInput(page, fromTimeSelector, '10:00', ['change']); - await fillInput(page, toTimeSelector, '12:00', ['change']); + const { fromDateTimeSelector, toDateTimeSelector } = getPeriodInputsSelectors(popOverSelector); + + await fillInput(page, fromDateTimeSelector, '2019-08-08T10:00', ['change']); + await fillInput(page, toDateTimeSelector, '2019-08-08T12:00', ['change']); await openFilteringPanel(page); await pressElement(page, popoverTrigger); @@ -393,12 +391,10 @@ module.exports = () => { await openFilteringPanel(page); const popOverSelector = await getPopoverSelector(await page.$(popoverTrigger)); - const { fromDateSelector, toDateSelector, fromTimeSelector, toTimeSelector } = getPeriodInputsSelectors(popOverSelector); + const { fromDateTimeSelector, toDateTimeSelector } = getPeriodInputsSelectors(popOverSelector); - await fillInput(page, fromDateSelector, '2022-03-22', ['change']); - await fillInput(page, toDateSelector, '2022-03-22', ['change']); - await fillInput(page, fromTimeSelector, '01:00', ['change']); - await fillInput(page, toTimeSelector, '23:59', ['change']); + await fillInput(page, fromDateTimeSelector, '2022-03-22T01:00', ['change']); + await fillInput(page, toDateTimeSelector, '2022-03-22T23:59', ['change']); await openFilteringPanel(page); await pressElement(page, popoverTrigger); await waitForTableLength(page, 3); diff --git a/test/public/logs/create.test.js b/test/public/logs/create.test.js index 50f6eb0151..d4d5669b00 100644 --- a/test/public/logs/create.test.js +++ b/test/public/logs/create.test.js @@ -657,16 +657,12 @@ ${actions}\ const { getLocaleDateAndTime, formatFullDate } = await import('../../../lib/public/utilities/dateUtils.mjs'); const magnetTimestamp = new Date() - 10000; - const { date: magnetDate, time: magnetTime } = formatTimestampForDateTimeInput(magnetTimestamp, true); + const magnetDateTime = formatTimestampForDateTimeInput(magnetTimestamp, true); - const [magnet0Date, magnet0Time] = await Promise.all([ - getInputValue(page, '#magnets-0 > div > div > input:nth-of-type(1)'), - getInputValue(page, '#magnets-0 > div > div > input:nth-of-type(2)'), - ]); - const magnet0DateTime = getLocaleDateAndTime(extractTimestampFromDateTimeInput({ date: magnet0Date, time: magnet0Time })); + const magnet0DateTimeRaw = await getInputValue(page, '#magnets-0 > div > div > input'); + const magnet0DateTime = getLocaleDateAndTime(extractTimestampFromDateTimeInput(magnet0DateTimeRaw)); - await fillInput(page, '#magnets-1 > div:nth-of-type(2) > div > input:nth-of-type(1)', magnetDate, ['change']); - await fillInput(page, '#magnets-1 > div:nth-of-type(2) > div > input:nth-of-type(2)', magnetTime, ['change']); + await fillInput(page, '#magnets-1 > div:nth-of-type(2) > div > input', magnetDateTime, ['change']); await page.focus('#magnets-1 > div:nth-of-type(2) > div:nth-of-type(3) > input'); await page.keyboard.type('dipole-1'); await page.focus('#magnets-1 > div:nth-of-type(2) > div:nth-of-type(5) > input'); diff --git a/test/public/logs/overview.test.js b/test/public/logs/overview.test.js index a4a9f7a58b..8d942f837a 100644 --- a/test/public/logs/overview.test.js +++ b/test/public/logs/overview.test.js @@ -422,14 +422,12 @@ module.exports = () => { await waitForTableTotalRowsCountToEqual(page, 119); - const { fromDateSelector, toDateSelector, fromTimeSelector, toTimeSelector } = getPeriodInputsSelectors(popOverSelector); + const { fromDateTimeSelector, toDateTimeSelector } = getPeriodInputsSelectors(popOverSelector); const limit = '2020-02-02'; - await fillInput(page, fromDateSelector, limit, ['change']); - await fillInput(page, toDateSelector, limit, ['change']); - await fillInput(page, fromTimeSelector, '11:00', ['change']); - await fillInput(page, toTimeSelector, '12:00', ['change']); + await fillInput(page, fromDateTimeSelector, '2020-02-02T11:00', ['change']); + await fillInput(page, toDateTimeSelector, '2020-02-02T12:00', ['change']); await waitForTableLength(page, 1); }); diff --git a/test/public/qcFlags/forDataPassCreation.test.js b/test/public/qcFlags/forDataPassCreation.test.js index fdd2c12abb..3c49eb4bde 100644 --- a/test/public/qcFlags/forDataPassCreation.test.js +++ b/test/public/qcFlags/forDataPassCreation.test.js @@ -104,7 +104,7 @@ module.exports = () => { await page.waitForSelector('button#submit[disabled]'); await expectInnerText(page, 'table > tbody > tr > td:nth-child(3) > div', '08/08/2019\n13:00:00.000'); await expectInnerText(page, 'table > tbody > tr > td:nth-child(4) > div', '09/08/2019\n14:00:00.000'); - await page.waitForSelector('input[type="time"]', { hidden: true, timeout: 250 }); + await page.waitForSelector('input[type="datetime-local"]', { hidden: true, timeout: 250 }); await pressElement(page, '#flag-type-panel .popover-trigger'); await pressElement(page, '#flag-type-dropdown-option-2', true); @@ -136,7 +136,7 @@ module.exports = () => { await page.waitForSelector('button#submit[disabled]'); await expectInnerText(page, 'table > tbody > tr > td:nth-child(3) > div', '08/08/2019\n13:00:00.000'); await expectInnerText(page, 'table > tbody > tr > td:nth-child(4) > div', '09/08/2019\n14:00:00.000'); - await page.waitForSelector('input[type="time"]', { hidden: true }); + await page.waitForSelector('input[type="datetime-local"]', { hidden: true }); await pressElement(page, '#flag-type-panel .popover-trigger'); await pressElement(page, '#flag-type-dropdown-option-11', true); @@ -144,8 +144,8 @@ module.exports = () => { await page.waitForSelector('button#submit[disabled]', { hidden: true }); await pressElement(page, '#time-based-toggle', true); - await fillInput(page, 'div:nth-child(1) > div > input:nth-child(2)', '13:01:01.123', ['change']); - await fillInput(page, 'div:nth-child(2) > div > input:nth-child(2)', '13:50:59.456', ['change']); + await fillInput(page, 'div:nth-child(1) > div > input[type=datetime-local]', '2019-08-08T13:01:01.123', ['change']); + await fillInput(page, 'div:nth-child(2) > div > input[type=datetime-local]', '2019-08-09T13:50:59.456', ['change']); await waitForNavigation(page, () => pressElement(page, 'button#submit')); expectUrlParams(page, { @@ -177,7 +177,7 @@ module.exports = () => { 'Missing start/stop, the flag will be applied on the full run', ); await page.waitForSelector('button#submit[disabled]'); - await page.waitForSelector('input[type="time"]', { hidden: true, timeout: 250 }); + await page.waitForSelector('input[type="datetime-local"]', { hidden: true, timeout: 250 }); await pressElement(page, '#flag-type-panel .popover-trigger'); await pressElement(page, '#flag-type-dropdown-option-2', true); await page.waitForSelector('button#submit[disabled]', { hidden: true, timeout: 250 }); @@ -245,7 +245,7 @@ module.exports = () => { await waitForNavigation(page, () => pressElement(page, '#set-qc-flags-trigger')); await expectInnerText(page, 'div.panel.flex-grow.items-center > div > em', 'The selected runs don\'t have overlapping start/stop times'); - await page.waitForSelector('input[type="time"]', { hidden: true }); + await page.waitForSelector('input[type="datetime-local"]', { hidden: true }); }); it('should set the timebased unavailable if at least one run has no end time and multiple are selected', async () => { diff --git a/test/public/qcFlags/forSimulationPassCreation.test.js b/test/public/qcFlags/forSimulationPassCreation.test.js index 799a3c936b..e4cdf84a6a 100644 --- a/test/public/qcFlags/forSimulationPassCreation.test.js +++ b/test/public/qcFlags/forSimulationPassCreation.test.js @@ -100,7 +100,7 @@ module.exports = () => { await page.waitForSelector('button#submit[disabled]'); await expectInnerText(page, 'table > tbody > tr > td:nth-child(3) > div', '08/08/2019\n13:00:00.000'); await expectInnerText(page, 'table > tbody > tr > td:nth-child(4) > div', '09/08/2019\n14:00:00.000'); - await page.waitForSelector('input[type="time"]', { hidden: true, timeout: 250 }); + await page.waitForSelector('input[type="datetime-local"]', { hidden: true, timeout: 250 }); await pressElement(page, '#flag-type-panel .popover-trigger'); await pressElement(page, '#flag-type-dropdown-option-2', true); @@ -132,7 +132,7 @@ module.exports = () => { await page.waitForSelector('button#submit[disabled]'); await expectInnerText(page, 'table > tbody > tr > td:nth-child(3) > div', '08/08/2019\n13:00:00.000'); await expectInnerText(page, 'table > tbody > tr > td:nth-child(4) > div', '09/08/2019\n14:00:00.000'); - await page.waitForSelector('input[type="time"]', { hidden: true, timeout: 250 }); + await page.waitForSelector('input[type="datetime-local"]', { hidden: true, timeout: 250 }); await pressElement(page, '#flag-type-panel .popover-trigger'); await pressElement(page, '#flag-type-dropdown-option-11', true); @@ -140,8 +140,8 @@ module.exports = () => { await page.waitForSelector('button#submit[disabled]', { hidden: true, timeout: 250 }); await pressElement(page, '#time-based-toggle', true); - await fillInput(page, '.flex-column.g1:nth-of-type(1) > div input[type="time"]', '13:01:01.123', ['change']); - await fillInput(page, '.flex-column.g1:nth-of-type(2) > div input[type="time"]', '13:50:59.456', ['change']); + await fillInput(page, '.flex-column.g1:nth-of-type(1) > div input[type=datetime-local]', '2019-08-08T13:01:01.123', ['change']); + await fillInput(page, '.flex-column.g1:nth-of-type(2) > div input[type=datetime-local]', '2019-08-09T13:50:59.456', ['change']); await waitForNavigation(page, () => pressElement(page, 'button#submit')); expectUrlParams(page, { @@ -173,7 +173,7 @@ module.exports = () => { 'Missing start/stop, the flag will be applied on the full run', ); await page.waitForSelector('button#submit[disabled]'); - await page.waitForSelector('input[type="time"]', { hidden: true }); + await page.waitForSelector('input[type="datetime-local"]', { hidden: true }); await pressElement(page, '#flag-type-panel .popover-trigger'); await pressElement(page, '#flag-type-dropdown-option-2', true); await page.waitForSelector('button#submit[disabled]', { hidden: true }); diff --git a/test/public/runs/overview.test.js b/test/public/runs/overview.test.js index 66333186d8..e67cecaee1 100644 --- a/test/public/runs/overview.test.js +++ b/test/public/runs/overview.test.js @@ -487,30 +487,21 @@ module.exports = () => { await pressElement(page, '.timeO2Start-filter .popover-trigger'); const o2StartPopoverSelector = await getPopoverSelector(await page.$('.timeO2Start-filter .popover-trigger')); - const periodInputsSelectors = getPeriodInputsSelectors(o2StartPopoverSelector); + const { fromDateTimeSelector, toDateTimeSelector } = getPeriodInputsSelectors(o2StartPopoverSelector); - await fillInput(page, periodInputsSelectors.fromTimeSelector, '11:11', ['change']); - await fillInput(page, periodInputsSelectors.toTimeSelector, '14:00', ['change']); - - // American style input - await fillInput(page, periodInputsSelectors.fromDateSelector, '2021-02-03', ['change']); - await fillInput(page, periodInputsSelectors.toDateSelector, '2021-02-03', ['change']); + await fillInput(page, fromDateTimeSelector, '2021-02-03T11:11', ['change']); + await fillInput(page, toDateTimeSelector, '2021-02-03T14:00', ['change']); // Wait for page to be refreshed - await expectAttributeValue(page, periodInputsSelectors.toTimeSelector, 'min', '11:12'); - await expectAttributeValue(page, periodInputsSelectors.toDateSelector, 'min', '2021-02-03'); - - await expectAttributeValue(page, periodInputsSelectors.fromTimeSelector, 'max', '13:59'); - await expectAttributeValue(page, periodInputsSelectors.fromDateSelector, 'max', '2021-02-03'); + await expectAttributeValue(page, toDateTimeSelector, 'min', '2021-02-03T11:12'); + await expectAttributeValue(page, fromDateTimeSelector, 'max', '2021-02-03T13:59'); // Setting different dates, still american style input - await fillInput(page, periodInputsSelectors.toDateSelector, '2021-02-05', ['change']); - - await expectAttributeValue(page, periodInputsSelectors.toTimeSelector, 'min', ''); - await expectAttributeValue(page, periodInputsSelectors.toDateSelector, 'min', '2021-02-03'); + await fillInput(page, toDateTimeSelector, '2021-02-05T14:00', ['change']); - await expectAttributeValue(page, periodInputsSelectors.fromTimeSelector, 'max', ''); - await expectAttributeValue(page, periodInputsSelectors.fromDateSelector, 'max', '2021-02-05'); + await expectInputValue(page, toDateTimeSelector, '2021-02-05T14:00'); + await expectAttributeValue(page, toDateTimeSelector, 'min', '2021-02-03T11:12'); + await expectAttributeValue(page, fromDateTimeSelector, 'max', '2021-02-05T13:59'); }); it('should successfully filter on duration', async () => {