diff options
Diffstat (limited to 'spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js')
-rw-r--r-- | spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js | 93 |
1 files changed, 78 insertions, 15 deletions
diff --git a/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js b/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js index 340143a6b53..3b37da5bcd6 100644 --- a/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js +++ b/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js @@ -1,8 +1,8 @@ import { mount } from '@vue/test-utils'; import DateTimePicker from '~/monitoring/components/date_time_picker/date_time_picker.vue'; -import { timeWindows } from '~/monitoring/constants'; +import { defaultTimeWindows } from '~/monitoring/components/date_time_picker/date_time_picker_lib'; -const timeWindowsCount = Object.keys(timeWindows).length; +const timeWindowsCount = Object.entries(defaultTimeWindows).length; const start = '2019-10-10T07:00:00.000Z'; const end = '2019-10-13T07:00:00.000Z'; const selectedTimeWindowText = `3 days`; @@ -13,6 +13,7 @@ describe('DateTimePicker', () => { 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 fillInputAndBlur = (input, val) => { dateTimePicker.find(input).setValue(val); @@ -25,7 +26,6 @@ describe('DateTimePicker', () => { const createComponent = props => { dateTimePicker = mount(DateTimePicker, { propsData: { - timeWindows, start, end, ...props, @@ -52,16 +52,6 @@ describe('DateTimePicker', () => { }); }); - it('renders dropdown without a selectedTimeWindow set', done => { - createComponent({ - selectedTimeWindow: {}, - }); - dateTimePicker.vm.$nextTick(() => { - expect(dateTimePicker.findAll('input').length).toBe(2); - done(); - }); - }); - it('renders inputs with h/m/s truncated if its all 0s', done => { createComponent({ start: '2019-10-10T00:00:00.000Z', @@ -74,11 +64,11 @@ describe('DateTimePicker', () => { }); }); - it(`renders dropdown with ${timeWindowsCount} items in quick range`, done => { + it(`renders dropdown with ${timeWindowsCount} (default) items in quick range`, done => { createComponent(); dropdownToggle().trigger('click'); dateTimePicker.vm.$nextTick(() => { - expect(dateTimePicker.findAll('.dropdown-item').length).toBe(timeWindowsCount); + expect(findQuickRangeItems().length).toBe(timeWindowsCount); done(); }); }); @@ -167,4 +157,77 @@ describe('DateTimePicker', () => { }); }); }); + + describe('when using non-default time windows', () => { + const otherTimeWindows = { + oneMinute: { + label: '1 minute', + seconds: 60, + }, + twoMinutes: { + label: '2 minutes', + seconds: 60 * 2, + default: true, + }, + fiveMinutes: { + label: '5 minutes', + seconds: 60 * 5, + }, + }; + + it('renders dropdown with a label in the quick range', done => { + createComponent({ + // 2 minutes range + start: '2020-01-21T15:00:00.000Z', + end: '2020-01-21T15:02:00.000Z', + timeWindows: otherTimeWindows, + }); + dropdownToggle().trigger('click'); + dateTimePicker.vm.$nextTick(() => { + expect(dropdownToggle().text()).toBe('2 minutes'); + + done(); + }); + }); + + it('renders dropdown with quick range items', done => { + createComponent({ + // 2 minutes range + start: '2020-01-21T15:00:00.000Z', + end: '2020-01-21T15:02:00.000Z', + timeWindows: otherTimeWindows, + }); + dropdownToggle().trigger('click'); + dateTimePicker.vm.$nextTick(() => { + const items = findQuickRangeItems(); + + expect(items.length).toBe(Object.keys(otherTimeWindows).length); + expect(items.at(0).text()).toBe('1 minute'); + expect(items.at(0).is('.active')).toBe(false); + + expect(items.at(1).text()).toBe('2 minutes'); + expect(items.at(1).is('.active')).toBe(true); + + 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 => { + createComponent({ + // 10 minutes range + start: '2020-01-21T15:00:00.000Z', + end: '2020-01-21T15:10:00.000Z', + timeWindows: otherTimeWindows, + }); + dropdownToggle().trigger('click'); + dateTimePicker.vm.$nextTick(() => { + expect(dropdownToggle().text()).toBe('2020-01-21 15:00:00 to 2020-01-21 15:10:00'); + + done(); + }); + }); + }); }); |