Skip to content

G
gitlab-ce
Commit 3de45054 authored by Illya Klymov's avatar Illya Klymov
Browse files
Options

Merge branch '214370-utc-support-date-time-picker' into 'master' 

Add UTC setting for the date time picker

See merge request gitlab-org/gitlab!33039
parents 3102e946 edf6f2d2
Hide whitespace changes
Inline Side-by-side
Showing with 405 additions and 228 deletions
app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
View file @ 3de45054
<script>
import { GlDeprecatedButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
import { GlIcon, GlDeprecatedButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
import { __, sprintf } from '~/locale';
import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range';
import Icon from '~/vue_shared/components/icon.vue';
import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
import DateTimePickerInput from './date_time_picker_input.vue';
import {
defaultTimeRanges,
defaultTimeRange,
isValidDate,
stringToISODate,
ISODateToString,
truncateZerosInDateTime,
isDateTimePickerInputValid,
isValidInputString,
inputStringToIsoDate,
isoDateToInputString,
} from './date_time_picker_lib';
const events = {
......@@ -24,13 +21,13 @@ const events = {
export default {
components: {
Icon,
TooltipOnTruncate,
DateTimePickerInput,
GlFormGroup,
GlIcon,
GlDeprecatedButton,
GlDropdown,
GlDropdownItem,
GlFormGroup,
TooltipOnTruncate,
DateTimePickerInput,
},
props: {
value: {
......@@ -48,20 +45,41 @@ export default {
required: false,
default: true,
},
utc: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
timeRange: this.value,
startDate: '',
endDate: '',
/**
* Valid start iso date string, null if not valid value
*/
startDate: null,
/**
* Invalid start date string as input by the user
*/
startFallbackVal: '',
/**
* Valid end iso date string, null if not valid value
*/
endDate: null,
/**
* Invalid end date string as input by the user
*/
endFallbackVal: '',
};
},
computed: {
startInputValid() {
return isValidDate(this.startDate);
return isValidInputString(this.startDate);
},
endInputValid() {
return isValidDate(this.endDate);
return isValidInputString(this.endDate);
},
isValid() {
return this.startInputValid && this.endInputValid;
......@@ -69,21 +87,31 @@ export default {
startInput: {
get() {
return this.startInputValid ? this.formatDate(this.startDate) : this.startDate;
return this.dateToInput(this.startDate) || this.startFallbackVal;
},
set(val) {
// Attempt to set a formatted date if possible
this.startDate = isDateTimePickerInputValid(val) ? stringToISODate(val) : val;
try {
this.startDate = this.inputToDate(val);
this.startFallbackVal = null;
} catch (e) {
this.startDate = null;
this.startFallbackVal = val;
}
this.timeRange = null;
},
},
endInput: {
get() {
return this.endInputValid ? this.formatDate(this.endDate) : this.endDate;
return this.dateToInput(this.endDate) || this.endFallbackVal;
},
set(val) {
// Attempt to set a formatted date if possible
this.endDate = isDateTimePickerInputValid(val) ? stringToISODate(val) : val;
try {
this.endDate = this.inputToDate(val);
this.endFallbackVal = null;
} catch (e) {
this.endDate = null;
this.endFallbackVal = val;
}
this.timeRange = null;
},
},
......@@ -96,10 +124,10 @@ export default {
}
const { start, end } = convertToFixedRange(this.value);
if (isValidDate(start) && isValidDate(end)) {
if (isValidInputString(start) && isValidInputString(end)) {
return sprintf(__('%{start} to %{end}'), {
start: this.formatDate(start),
end: this.formatDate(end),
start: this.stripZerosInDateTime(this.dateToInput(start)),
end: this.stripZerosInDateTime(this.dateToInput(end)),
});
}
} catch {
......@@ -107,6 +135,13 @@ export default {
}
return '';
},
customLabel() {
if (this.utc) {
return __('Custom range (UTC)');
}
return __('Custom range');
},
},
watch: {
value(newValue) {
......@@ -132,8 +167,17 @@ export default {
}
},
methods: {
formatDate(date) {
return truncateZerosInDateTime(ISODateToString(date));
dateToInput(date) {
if (date === null) {
return null;
}
return isoDateToInputString(date, this.utc);
},
inputToDate(value) {
return inputStringToIsoDate(value, this.utc);
},
stripZerosInDateTime(str = '') {
return str.replace(' 00:00:00', '');
},
closeDropdown() {
this.$refs.dropdown.hide();
......@@ -169,10 +213,16 @@ export default {
menu-class="date-time-picker-menu"
toggle-class="date-time-picker-toggle text-truncate"
>
<template #button-content>
<span class="gl-flex-grow-1 text-truncate">{{ timeWindowText }}</span>
<span v-if="utc" class="text-muted gl-font-weight-bold gl-font-sm">{{ __('UTC') }}</span>
<gl-icon class="gl-dropdown-caret" name="chevron-down" aria-hidden="true" />
</template>
<div class="d-flex justify-content-between gl-p-2-deprecated-no-really-do-not-use-me">
<gl-form-group
v-if="customEnabled"
:label="__('Custom range')"
:label="customLabel"
label-for="custom-from-time"
label-class="gl-pb-1-deprecated-no-really-do-not-use-me"
class="custom-time-range-form-group col-md-7 gl-pl-1-deprecated-no-really-do-not-use-me gl-pr-0 m-0"
......@@ -214,7 +264,7 @@ export default {
active-class="active"
@click="setQuickRange(option)"
>
<icon
<gl-icon
name="mobile-issue-close"
class="align-bottom"
:class="{ invisible: !isOptionActive(option) }"
......
app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_input.vue
View file @ 3de45054
......@@ -6,9 +6,9 @@ import { dateFormats } from './date_time_picker_lib';
const inputGroupText = {
invalidFeedback: sprintf(__('Format: %{dateFormat}'), {
dateFormat: dateFormats.stringDate,
dateFormat: dateFormats.inputFormat,
}),
placeholder: dateFormats.stringDate,
placeholder: dateFormats.inputFormat,
};
export default {
......
app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_lib.js
View file @ 3de45054
import dateformat from 'dateformat';
import { __ } from '~/locale';
/**
* Valid strings for this regex are
* 2019-10-01 and 2019-10-01 01:02:03
*/
const dateTimePickerRegex = /^(\d{4})-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])(?: (0[0-9]|1[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9]))?$/;
/**
* Default time ranges for the date picker.
* @see app/assets/javascripts/lib/utils/datetime_range.js
......@@ -34,23 +28,33 @@ export const defaultTimeRanges = [
export const defaultTimeRange = defaultTimeRanges.find(tr => tr.default);
export const dateFormats = {
ISODate: "yyyy-mm-dd'T'HH:MM:ss'Z'",
stringDate: 'yyyy-mm-dd HH:MM:ss',
/**
* Format used by users to input dates
*
* Note: Should be a format that can be parsed by Date.parse.
*/
inputFormat: 'yyyy-mm-dd HH:MM:ss',
/**
* Format used to strip timezone from inputs
*/
stripTimezoneFormat: "yyyy-mm-dd'T'HH:MM:ss'Z'",
};
/**
* The URL params start and end need to be validated
* before passing them down to other components.
* Returns true if the date can be parsed succesfully after
* being typed by a user.
*
* @param {string} dateString
* @returns true if the string is a valid date, false otherwise
* It allows some ambiguity so validation is not strict.
*
* @param {string} value - Value as typed by the user
* @returns true if the value can be parsed as a valid date, false otherwise
*/
export const isValidDate = dateString => {
export const isValidInputString = value => {
try {
// dateformat throws error that can be caught.
// This is better than using `new Date()`
if (dateString && dateString.trim()) {
dateformat(dateString, 'isoDateTime');
if (value && value.trim()) {
dateformat(value, 'isoDateTime');
return true;
}
return false;
......@@ -60,25 +64,30 @@ export const isValidDate = dateString => {
};
/**
* Convert the input in Time picker component to ISO date.
* Convert the input in time picker component to an ISO date.
*
* @param {string} val
* @returns {string}
* @param {string} value
* @param {Boolean} utc - If true, it forces the date to by
* formatted using UTC format, ignoring the local time.
* @returns {Date}
*/
export const stringToISODate = val =>
dateformat(new Date(val.replace(/-/g, '/')), dateFormats.ISODate, true);
export const inputStringToIsoDate = (value, utc = false) => {
let date = new Date(value);
if (utc) {
// Forces date to be interpreted as UTC by stripping the timezone
// by formatting to a string with 'Z' and skipping timezone
date = dateformat(date, dateFormats.stripTimezoneFormat);
}
return dateformat(date, 'isoUtcDateTime');
};
/**
* Convert the ISO date received from the URL to string
* for the Time picker component.
* Converts a iso date string to a formatted string for the Time picker component.
*
* @param {Date} date
* @param {String} ISO Formatted date
* @returns {string}
*/
export const ISODateToString = date => dateformat(date, dateFormats.stringDate);
export const truncateZerosInDateTime = datetime => datetime.replace(' 00:00:00', '');
export const isDateTimePickerInputValid = val => dateTimePickerRegex.test(val);
export const isoDateToInputString = (date, utc = false) =>
dateformat(date, dateFormats.inputFormat, utc);
export default {};
locale/gitlab.pot
View file @ 3de45054
......@@ -6665,6 +6665,9 @@ msgstr ""
msgid "Custom range"
msgstr ""
msgid "Custom range (UTC)"
msgstr ""
msgid "CustomCycleAnalytics|Add a stage"
msgstr ""
......@@ -23477,6 +23480,9 @@ msgstr ""
msgid "URL or request ID"
msgstr ""
msgid "UTC"
msgstr ""
msgid "Unable to apply suggestions to a deleted line."
msgstr ""
......
spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js
View file @ 3de45054
import * as dateTimePickerLib from '~/vue_shared/components/date_time_picker/date_time_picker_lib';
import timezoneMock from 'timezone-mock';
import {
isValidInputString,
inputStringToIsoDate,
isoDateToInputString,
} from '~/vue_shared/components/date_time_picker/date_time_picker_lib';
describe('date time picker lib', () => {
describe('isValidDate', () => {
describe('isValidInputString', () => {
[
{
input: '2019-09-09T00:00:00.000Z',
......@@ -48,121 +54,137 @@ describe('date time picker lib', () => {
output: false,
},
].forEach(({ input, output }) => {
it(`isValidDate return ${output} for ${input}`, () => {
expect(dateTimePickerLib.isValidDate(input)).toBe(output);
it(`isValidInputString return ${output} for ${input}`, () => {
expect(isValidInputString(input)).toBe(output);
});
});
});
describe('stringToISODate', () => {
['', 'null', undefined, 'abc'].forEach(input => {
describe('inputStringToIsoDate', () => {
[
'',
'null',
undefined,
'abc',
'xxxx-xx-xx',
'9999-99-19',
'2019-19-23',
'2019-09-23 x',
'2019-09-29 24:24:24',
].forEach(input => {
it(`throws error for invalid input like ${input}`, () => {
expect(() => dateTimePickerLib.stringToISODate(input)).toThrow();
expect(() => inputStringToIsoDate(input)).toThrow();
});
});
[
{
input: '2019-09-09 01:01:01',
output: '2019-09-09T01:01:01Z',
input: '2019-09-08 01:01:01',
output: '2019-09-08T01:01:01Z',
},
{
input: '2019-09-09 00:00:00',
output: '2019-09-09T00:00:00Z',
input: '2019-09-08 00:00:00',
output: '2019-09-08T00:00:00Z',
},
{
input: '2019-09-09 23:59:59',
output: '2019-09-09T23:59:59Z',
input: '2019-09-08 23:59:59',
output: '2019-09-08T23:59:59Z',
},
{
input: '2019-09-09',
output: '2019-09-09T00:00:00Z',
input: '2019-09-08',
output: '2019-09-08T00:00:00Z',
},
].forEach(({ input, output }) => {
it(`returns ${output} from ${input}`, () => {
expect(dateTimePickerLib.stringToISODate(input)).toBe(output);
});
});
});
describe('truncateZerosInDateTime', () => {
[
{
input: '',
output: '',
input: '2019-09-08',
output: '2019-09-08T00:00:00Z',
},
{
input: '2019-10-10',
output: '2019-10-10',
input: '2019-09-08 00:00:00',
output: '2019-09-08T00:00:00Z',
},
{
input: '2019-10-10 00:00:01',
output: '2019-10-10 00:00:01',
input: '2019-09-08 23:24:24',
output: '2019-09-08T23:24:24Z',
},
{
input: '2019-10-10 00:00:00',
output: '2019-10-10',
input: '2019-09-08 0:0:0',
output: '2019-09-08T00:00:00Z',
},
].forEach(({ input, output }) => {
it(`truncateZerosInDateTime return ${output} for ${input}`, () => {
expect(dateTimePickerLib.truncateZerosInDateTime(input)).toBe(output);
it(`returns ${output} from ${input}`, () => {
expect(inputStringToIsoDate(input)).toBe(output);
});
});
describe('timezone formatting', () => {
const value = '2019-09-08 01:01:01';
const utcResult = '2019-09-08T01:01:01Z';
const localResult = '2019-09-08T08:01:01Z';
test.each`
val | locatTimezone | utc | result
${value} | ${'UTC'} | ${undefined} | ${utcResult}
${value} | ${'UTC'} | ${false} | ${utcResult}
${value} | ${'UTC'} | ${true} | ${utcResult}
${value} | ${'US/Pacific'} | ${undefined} | ${localResult}
${value} | ${'US/Pacific'} | ${false} | ${localResult}
${value} | ${'US/Pacific'} | ${true} | ${utcResult}
`(
'when timezone is $locatTimezone, formats $result for utc = $utc',
({ val, locatTimezone, utc, result }) => {
timezoneMock.register(locatTimezone);
expect(inputStringToIsoDate(val, utc)).toBe(result);
timezoneMock.unregister();
},
);
});
});
describe('isDateTimePickerInputValid', () => {
describe('isoDateToInputString', () => {
[
{
input: null,
output: false,
},
{
input: '',
output: false,
input: '2019-09-08T01:01:01Z',
output: '2019-09-08 01:01:01',
},
{
input: 'xxxx-xx-xx',
output: false,
input: '2019-09-08T01:01:01.999Z',
output: '2019-09-08 01:01:01',
},
{
input: '9999-99-19',
output: false,
},
{
input: '2019-19-23',
output: false,
},
{
input: '2019-09-23',
output: true,
},
{
input: '2019-09-23 x',
output: false,
},
{
input: '2019-09-29 0:0:0',
output: false,
},
{
input: '2019-09-29 00:00:00',
output: true,
},
{
input: '2019-09-29 24:24:24',
output: false,
},
{
input: '2019-09-29 23:24:24',
output: true,
},
{
input: '2019-09-29 23:24:24 ',
output: false,
input: '2019-09-08T00:00:00Z',
output: '2019-09-08 00:00:00',
},
].forEach(({ input, output }) => {
it(`returns ${output} for ${input}`, () => {
expect(dateTimePickerLib.isDateTimePickerInputValid(input)).toBe(output);
expect(isoDateToInputString(input)).toBe(output);
});
});
describe('timezone formatting', () => {
const value = '2019-09-08T08:01:01Z';
const utcResult = '2019-09-08 08:01:01';
const localResult = '2019-09-08 01:01:01';
test.each`
val | locatTimezone | utc | result
${value} | ${'UTC'} | ${undefined} | ${utcResult}
${value} | ${'UTC'} | ${false} | ${utcResult}
${value} | ${'UTC'} | ${true} | ${utcResult}
${value} | ${'US/Pacific'} | ${undefined} | ${localResult}
${value} | ${'US/Pacific'} | ${false} | ${localResult}
${value} | ${'US/Pacific'} | ${true} | ${utcResult}
`(
'when timezone is $locatTimezone, formats $result for utc = $utc',
({ val, locatTimezone, utc, result }) => {
timezoneMock.register(locatTimezone);
expect(isoDateToInputString(val, utc)).toBe(result);
timezoneMock.unregister();
},
);
});
});
});
spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js
View file @ 3de45054
import { mount } from '@vue/test-utils';
import timezoneMock from 'timezone-mock';
import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
import {
defaultTimeRanges,
......@@ -8,16 +9,16 @@ import {
const optionsCount = defaultTimeRanges.length;
describe('DateTimePicker', () => {
let dateTimePicker;
let wrapper;
const dropdownToggle = () => dateTimePicker.find('.dropdown-toggle');
const dropdownMenu = () => dateTimePicker.find('.dropdown-menu');
const applyButtonElement = () => dateTimePicker.find('button.btn-success').element;
const findQuickRangeItems = () => dateTimePicker.findAll('.dropdown-item');
const cancelButtonElement = () => dateTimePicker.find('button.btn-secondary').element;
const dropdownToggle = () => wrapper.find('.dropdown-toggle');
const dropdownMenu = () => wrapper.find('.dropdown-menu');
const applyButtonElement = () => wrapper.find('button.btn-success').element;
const findQuickRangeItems = () => wrapper.findAll('.dropdown-item');
const cancelButtonElement = () => wrapper.find('button.btn-secondary').element;
const createComponent = props => {
dateTimePicker = mount(DateTimePicker, {
wrapper = mount(DateTimePicker, {
propsData: {
...props,
},
......@@ -25,54 +26,86 @@ describe('DateTimePicker', () => {
};
afterEach(() => {
dateTimePicker.destroy();
wrapper.destroy();
});
it('renders dropdown toggle button with selected text', done => {
it('renders dropdown toggle button with selected text', () => {
createComponent();
dateTimePicker.vm.$nextTick(() => {
return wrapper.vm.$nextTick(() => {
expect(dropdownToggle().text()).toBe(defaultTimeRange.label);
done();
});
});
it('renders dropdown toggle button with selected text and utc label', () => {
createComponent({ utc: true });
return wrapper.vm.$nextTick(() => {
expect(dropdownToggle().text()).toContain(defaultTimeRange.label);
expect(dropdownToggle().text()).toContain('UTC');
});
});
it('renders dropdown with 2 custom time range inputs', () => {
createComponent();
dateTimePicker.vm.$nextTick(() => {
expect(dateTimePicker.findAll('input').length).toBe(2);
return wrapper.vm.$nextTick(() => {
expect(wrapper.findAll('input').length).toBe(2);
});
});
it('renders inputs with h/m/s truncated if its all 0s', done => {
createComponent({
value: {
describe('renders label with h/m/s truncated if possible', () => {
[
{
start: '2019-10-10T00:00:00.000Z',
end: '2019-10-10T00:00:00.000Z',
label: '2019-10-10 to 2019-10-10',
},
{
start: '2019-10-10T00:00:00.000Z',
end: '2019-10-14T00:10:00.000Z',
label: '2019-10-10 to 2019-10-14 00:10:00',
},
});
dateTimePicker.vm.$nextTick(() => {
expect(dateTimePicker.find('#custom-time-from').element.value).toBe('2019-10-10');
expect(dateTimePicker.find('#custom-time-to').element.value).toBe('2019-10-14 00:10:00');
done();
{
start: '2019-10-10T00:00:00.000Z',
end: '2019-10-10T00:00:01.000Z',
label: '2019-10-10 to 2019-10-10 00:00:01',
},
{
start: '2019-10-10T00:00:01.000Z',
end: '2019-10-10T00:00:01.000Z',
label: '2019-10-10 00:00:01 to 2019-10-10 00:00:01',
},
{
start: '2019-10-10T00:00:01.000Z',
end: '2019-10-10T00:00:01.000Z',
utc: true,
label: '2019-10-10 00:00:01 to 2019-10-10 00:00:01 UTC',
},
].forEach(({ start, end, utc, label }) => {
it(`for start ${start}, end ${end}, and utc ${utc}, label is ${label}`, () => {
createComponent({
value: { start, end },
utc,
});
return wrapper.vm.$nextTick(() => {
expect(dropdownToggle().text()).toBe(label);
});
});
});
});
it(`renders dropdown with ${optionsCount} (default) items in quick range`, done => {
it(`renders dropdown with ${optionsCount} (default) items in quick range`, () => {
createComponent();
dropdownToggle().trigger('click');
dateTimePicker.vm.$nextTick(() => {
return wrapper.vm.$nextTick(() => {
expect(findQuickRangeItems().length).toBe(optionsCount);
done();
});
});
it('renders dropdown with a default quick range item selected', done => {
it('renders dropdown with a default quick range item selected', () => {
createComponent();
dropdownToggle().trigger('click');
dateTimePicker.vm.$nextTick(() => {
expect(dateTimePicker.find('.dropdown-item.active').exists()).toBe(true);
expect(dateTimePicker.find('.dropdown-item.active').text()).toBe(defaultTimeRange.label);
done();
return wrapper.vm.$nextTick(() => {
expect(wrapper.find('.dropdown-item.active').exists()).toBe(true);
expect(wrapper.find('.dropdown-item.active').text()).toBe(defaultTimeRange.label);
});
});
......@@ -86,78 +119,128 @@ describe('DateTimePicker', () => {
describe('user input', () => {
const fillInputAndBlur = (input, val) => {
dateTimePicker.find(input).setValue(val);
return dateTimePicker.vm.$nextTick().then(() => {
dateTimePicker.find(input).trigger('blur');
return dateTimePicker.vm.$nextTick();
wrapper.find(input).setValue(val);
return wrapper.vm.$nextTick().then(() => {
wrapper.find(input).trigger('blur');
return wrapper.vm.$nextTick();
});
};
beforeEach(done => {
beforeEach(() => {
createComponent();
dateTimePicker.vm.$nextTick(done);
return wrapper.vm.$nextTick();
});
it('displays inline error message if custom time range inputs are invalid', done => {
fillInputAndBlur('#custom-time-from', '2019-10-01abc')
it('displays inline error message if custom time range inputs are invalid', () => {
return fillInputAndBlur('#custom-time-from', '2019-10-01abc')
.then(() => fillInputAndBlur('#custom-time-to', '2019-10-10abc'))
.then(() => {
expect(dateTimePicker.findAll('.invalid-feedback').length).toBe(2);
done();
})
.catch(done);
expect(wrapper.findAll('.invalid-feedback').length).toBe(2);
});
});
it('keeps apply button disabled with invalid custom time range inputs', done => {
fillInputAndBlur('#custom-time-from', '2019-10-01abc')
it('keeps apply button disabled with invalid custom time range inputs', () => {
return fillInputAndBlur('#custom-time-from', '2019-10-01abc')
.then(() => fillInputAndBlur('#custom-time-to', '2019-09-19'))
.then(() => {
expect(applyButtonElement().getAttribute('disabled')).toBe('disabled');
done();
})
.catch(done);
});
});
it('enables apply button with valid custom time range inputs', done => {
fillInputAndBlur('#custom-time-from', '2019-10-01')
it('enables apply button with valid custom time range inputs', () => {
return fillInputAndBlur('#custom-time-from', '2019-10-01')
.then(() => fillInputAndBlur('#custom-time-to', '2019-10-19'))
.then(() => {
expect(applyButtonElement().getAttribute('disabled')).toBeNull();
done();
})
.catch(done.fail);
});
});
it('emits dates in an object when apply is clicked', done => {
fillInputAndBlur('#custom-time-from', '2019-10-01')
.then(() => fillInputAndBlur('#custom-time-to', '2019-10-19'))
.then(() => {
applyButtonElement().click();
expect(dateTimePicker.emitted().input).toHaveLength(1);
expect(dateTimePicker.emitted().input[0]).toEqual([
{
end: '2019-10-19T00:00:00Z',
start: '2019-10-01T00:00:00Z',
},
]);
done();
})
.catch(done.fail);
describe('when "apply" is clicked', () => {
it('emits iso dates', () => {
return fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00')
.then(() => fillInputAndBlur('#custom-time-to', '2019-10-19 00:00:00'))
.then(() => {
applyButtonElement().click();
expect(wrapper.emitted().input).toHaveLength(1);
expect(wrapper.emitted().input[0]).toEqual([
{
end: '2019-10-19T00:00:00Z',
start: '2019-10-01T00:00:00Z',
},
]);
});
});
it('emits iso dates, for dates without time of day', () => {
return fillInputAndBlur('#custom-time-from', '2019-10-01')
.then(() => fillInputAndBlur('#custom-time-to', '2019-10-19'))
.then(() => {
applyButtonElement().click();
expect(wrapper.emitted().input).toHaveLength(1);
expect(wrapper.emitted().input[0]).toEqual([
{
end: '2019-10-19T00:00:00Z',
start: '2019-10-01T00:00:00Z',
},
]);
});
});
describe('when timezone is different', () => {
beforeAll(() => {
timezoneMock.register('US/Pacific');
});
afterAll(() => {
timezoneMock.unregister();
});
it('emits iso dates', () => {
return fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00')
.then(() => fillInputAndBlur('#custom-time-to', '2019-10-19 12:00:00'))
.then(() => {
applyButtonElement().click();
expect(wrapper.emitted().input).toHaveLength(1);
expect(wrapper.emitted().input[0]).toEqual([
{
start: '2019-10-01T07:00:00Z',
end: '2019-10-19T19:00:00Z',
},
]);
});
});
it('emits iso dates with utc format', () => {
wrapper.setProps({ utc: true });
return wrapper.vm
.$nextTick()
.then(() => fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00'))
.then(() => fillInputAndBlur('#custom-time-to', '2019-10-19 12:00:00'))
.then(() => {
applyButtonElement().click();
expect(wrapper.emitted().input).toHaveLength(1);
expect(wrapper.emitted().input[0]).toEqual([
{
start: '2019-10-01T00:00:00Z',
end: '2019-10-19T12:00:00Z',
},
]);
});
});
});
});
it('unchecks quick range when text is input is clicked', done => {
it('unchecks quick range when text is input is clicked', () => {
const findActiveItems = () => findQuickRangeItems().filter(w => w.is('.active'));
expect(findActiveItems().length).toBe(1);
fillInputAndBlur('#custom-time-from', '2019-10-01')
.then(() => {
expect(findActiveItems().length).toBe(0);
done();
})
.catch(done.fail);
return fillInputAndBlur('#custom-time-from', '2019-10-01').then(() => {
expect(findActiveItems().length).toBe(0);
});
});
it('emits dates in an object when a is clicked', () => {
......@@ -165,23 +248,22 @@ describe('DateTimePicker', () => {
.at(3) // any item
.trigger('click');
expect(dateTimePicker.emitted().input).toHaveLength(1);
expect(dateTimePicker.emitted().input[0][0]).toMatchObject({
expect(wrapper.emitted().input).toHaveLength(1);
expect(wrapper.emitted().input[0][0]).toMatchObject({
duration: {
seconds: expect.any(Number),
},
});
});
it('hides the popover with cancel button', done => {
it('hides the popover with cancel button', () => {
dropdownToggle().trigger('click');
dateTimePicker.vm.$nextTick(() => {
return wrapper.vm.$nextTick(() => {
cancelButtonElement().click();
dateTimePicker.vm.$nextTick(() => {
return wrapper.vm.$nextTick(() => {
expect(dropdownMenu().classes('show')).toBe(false);
done();
});
});
});
......@@ -210,7 +292,7 @@ describe('DateTimePicker', () => {
jest.spyOn(Date, 'now').mockImplementation(() => MOCK_NOW);
});
it('renders dropdown with a label in the quick range', done => {
it('renders dropdown with a label in the quick range', () => {
createComponent({
value: {
duration: { seconds: 60 * 5 },
......@@ -218,14 +300,26 @@ describe('DateTimePicker', () => {
options: otherTimeRanges,
});
dropdownToggle().trigger('click');
dateTimePicker.vm.$nextTick(() => {
return wrapper.vm.$nextTick(() => {
expect(dropdownToggle().text()).toBe('5 minutes');
});
});
done();
it('renders dropdown with a label in the quick range and utc label', () => {
createComponent({
value: {
duration: { seconds: 60 * 5 },
},
utc: true,
options: otherTimeRanges,
});
dropdownToggle().trigger('click');
return wrapper.vm.$nextTick(() => {
expect(dropdownToggle().text()).toBe('5 minutes UTC');
});
});
it('renders dropdown with quick range items', done => {
it('renders dropdown with quick range items', () => {
createComponent({
value: {
duration: { seconds: 60 * 2 },
......@@ -233,7 +327,7 @@ describe('DateTimePicker', () => {
options: otherTimeRanges,
});
dropdownToggle().trigger('click');
dateTimePicker.vm.$nextTick(() => {
return wrapper.vm.$nextTick(() => {
const items = findQuickRangeItems();
expect(items.length).toBe(Object.keys(otherTimeRanges).length);
......@@ -245,22 +339,18 @@ describe('DateTimePicker', () => {
expect(items.at(2).text()).toBe('5 minutes');
expect(items.at(2).is('.active')).toBe(false);
done();
});
});
it('renders dropdown with a label not in the quick range', done => {
it('renders dropdown with a label not in the quick range', () => {
createComponent({
value: {
duration: { seconds: 60 * 4 },
},
});
dropdownToggle().trigger('click');
dateTimePicker.vm.$nextTick(() => {
return wrapper.vm.$nextTick(() => {
expect(dropdownToggle().text()).toBe('2020-01-23 19:56:00 to 2020-01-23 20:00:00');
done();
});
});
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7