diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js | 258 |
1 files changed, 115 insertions, 143 deletions
diff --git a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js index 33667a1bb71..d4b6b987c69 100644 --- a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js +++ b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js @@ -1,5 +1,6 @@ import { mount } from '@vue/test-utils'; import timezoneMock from 'timezone-mock'; +import { nextTick } from 'vue'; import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue'; import { defaultTimeRanges, @@ -29,26 +30,23 @@ describe('DateTimePicker', () => { wrapper.destroy(); }); - it('renders dropdown toggle button with selected text', () => { + it('renders dropdown toggle button with selected text', async () => { createComponent(); - return wrapper.vm.$nextTick(() => { - expect(dropdownToggle().text()).toBe(defaultTimeRange.label); - }); + await nextTick(); + expect(dropdownToggle().text()).toBe(defaultTimeRange.label); }); - it('renders dropdown toggle button with selected text and utc label', () => { + it('renders dropdown toggle button with selected text and utc label', async () => { createComponent({ utc: true }); - return wrapper.vm.$nextTick(() => { - expect(dropdownToggle().text()).toContain(defaultTimeRange.label); - expect(dropdownToggle().text()).toContain('UTC'); - }); + await nextTick(); + expect(dropdownToggle().text()).toContain(defaultTimeRange.label); + expect(dropdownToggle().text()).toContain('UTC'); }); - it('renders dropdown with 2 custom time range inputs', () => { + it('renders dropdown with 2 custom time range inputs', async () => { createComponent(); - return wrapper.vm.$nextTick(() => { - expect(wrapper.findAll('input').length).toBe(2); - }); + await nextTick(); + expect(wrapper.findAll('input').length).toBe(2); }); describe('renders label with h/m/s truncated if possible', () => { @@ -80,33 +78,30 @@ describe('DateTimePicker', () => { 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}`, () => { + it(`for start ${start}, end ${end}, and utc ${utc}, label is ${label}`, async () => { createComponent({ value: { start, end }, utc, }); - return wrapper.vm.$nextTick(() => { - expect(dropdownToggle().text()).toBe(label); - }); + await nextTick(); + expect(dropdownToggle().text()).toBe(label); }); }); }); - it(`renders dropdown with ${optionsCount} (default) items in quick range`, () => { + it(`renders dropdown with ${optionsCount} (default) items in quick range`, async () => { createComponent(); dropdownToggle().trigger('click'); - return wrapper.vm.$nextTick(() => { - expect(findQuickRangeItems().length).toBe(optionsCount); - }); + await nextTick(); + expect(findQuickRangeItems().length).toBe(optionsCount); }); - it('renders dropdown with a default quick range item selected', () => { + it('renders dropdown with a default quick range item selected', async () => { createComponent(); dropdownToggle().trigger('click'); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find('.dropdown-item.active').exists()).toBe(true); - expect(wrapper.find('.dropdown-item.active').text()).toBe(defaultTimeRange.label); - }); + await nextTick(); + expect(wrapper.find('.dropdown-item.active').exists()).toBe(true); + expect(wrapper.find('.dropdown-item.active').text()).toBe(defaultTimeRange.label); }); it('renders a disabled apply button on wrong input', () => { @@ -118,74 +113,63 @@ describe('DateTimePicker', () => { }); describe('user input', () => { - const fillInputAndBlur = (input, val) => { + const fillInputAndBlur = async (input, val) => { wrapper.find(input).setValue(val); - return wrapper.vm.$nextTick().then(() => { - wrapper.find(input).trigger('blur'); - return wrapper.vm.$nextTick(); - }); + await nextTick(); + wrapper.find(input).trigger('blur'); + await nextTick(); }; - beforeEach(() => { + beforeEach(async () => { createComponent(); - return wrapper.vm.$nextTick(); + await nextTick(); }); - 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(wrapper.findAll('.invalid-feedback').length).toBe(2); - }); + it('displays inline error message if custom time range inputs are invalid', async () => { + await fillInputAndBlur('#custom-time-from', '2019-10-01abc'); + await fillInputAndBlur('#custom-time-to', '2019-10-10abc'); + expect(wrapper.findAll('.invalid-feedback').length).toBe(2); }); - 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'); - }); + it('keeps apply button disabled with invalid custom time range inputs', async () => { + await fillInputAndBlur('#custom-time-from', '2019-10-01abc'); + await fillInputAndBlur('#custom-time-to', '2019-09-19'); + expect(applyButtonElement().getAttribute('disabled')).toBe('disabled'); }); - 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(); - }); + it('enables apply button with valid custom time range inputs', async () => { + await fillInputAndBlur('#custom-time-from', '2019-10-01'); + await fillInputAndBlur('#custom-time-to', '2019-10-19'); + expect(applyButtonElement().getAttribute('disabled')).toBeNull(); }); 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', async () => { + await fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00'); + await fillInputAndBlur('#custom-time-to', '2019-10-19 00:00:00'); + 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', - }, - ]); - }); + it('emits iso dates, for dates without time of day', async () => { + await fillInputAndBlur('#custom-time-from', '2019-10-01'); + await fillInputAndBlur('#custom-time-to', '2019-10-19'); + 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', () => { @@ -196,52 +180,46 @@ describe('DateTimePicker', () => { 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', async () => { + await fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00'); + await fillInputAndBlur('#custom-time-to', '2019-10-19 12:00:00'); + 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', () => { + it('emits iso dates with utc format', async () => { 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', - }, - ]); - }); + await nextTick(); + await fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00'); + await fillInputAndBlur('#custom-time-to', '2019-10-19 12:00:00'); + 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', () => { + it('unchecks quick range when text is input is clicked', async () => { const findActiveItems = () => findQuickRangeItems().filter((w) => w.classes().includes('active')); expect(findActiveItems().length).toBe(1); - return fillInputAndBlur('#custom-time-from', '2019-10-01').then(() => { - expect(findActiveItems().length).toBe(0); - }); + await fillInputAndBlur('#custom-time-from', '2019-10-01'); + expect(findActiveItems().length).toBe(0); }); it('emits dates in an object when a is clicked', () => { @@ -257,16 +235,14 @@ describe('DateTimePicker', () => { }); }); - it('hides the popover with cancel button', () => { + it('hides the popover with cancel button', async () => { dropdownToggle().trigger('click'); - return wrapper.vm.$nextTick(() => { - cancelButton().trigger('click'); + await nextTick(); + cancelButton().trigger('click'); - return wrapper.vm.$nextTick(() => { - expect(dropdownMenu().classes('show')).toBe(false); - }); - }); + await nextTick(); + expect(dropdownMenu().classes('show')).toBe(false); }); }); @@ -293,7 +269,7 @@ describe('DateTimePicker', () => { jest.spyOn(Date, 'now').mockImplementation(() => MOCK_NOW); }); - it('renders dropdown with a label in the quick range', () => { + it('renders dropdown with a label in the quick range', async () => { createComponent({ value: { duration: { seconds: 60 * 5 }, @@ -301,12 +277,11 @@ describe('DateTimePicker', () => { options: otherTimeRanges, }); dropdownToggle().trigger('click'); - return wrapper.vm.$nextTick(() => { - expect(dropdownToggle().text()).toBe('5 minutes'); - }); + await nextTick(); + expect(dropdownToggle().text()).toBe('5 minutes'); }); - it('renders dropdown with a label in the quick range and utc label', () => { + it('renders dropdown with a label in the quick range and utc label', async () => { createComponent({ value: { duration: { seconds: 60 * 5 }, @@ -315,12 +290,11 @@ describe('DateTimePicker', () => { options: otherTimeRanges, }); dropdownToggle().trigger('click'); - return wrapper.vm.$nextTick(() => { - expect(dropdownToggle().text()).toBe('5 minutes UTC'); - }); + await nextTick(); + expect(dropdownToggle().text()).toBe('5 minutes UTC'); }); - it('renders dropdown with quick range items', () => { + it('renders dropdown with quick range items', async () => { createComponent({ value: { duration: { seconds: 60 * 2 }, @@ -328,31 +302,29 @@ describe('DateTimePicker', () => { options: otherTimeRanges, }); dropdownToggle().trigger('click'); - return wrapper.vm.$nextTick(() => { - const items = findQuickRangeItems(); + await nextTick(); + const items = findQuickRangeItems(); - expect(items.length).toBe(Object.keys(otherTimeRanges).length); - expect(items.at(0).text()).toBe('1 minute'); - expect(items.at(0).classes()).not.toContain('active'); + expect(items.length).toBe(Object.keys(otherTimeRanges).length); + expect(items.at(0).text()).toBe('1 minute'); + expect(items.at(0).classes()).not.toContain('active'); - expect(items.at(1).text()).toBe('2 minutes'); - expect(items.at(1).classes()).toContain('active'); + expect(items.at(1).text()).toBe('2 minutes'); + expect(items.at(1).classes()).toContain('active'); - expect(items.at(2).text()).toBe('5 minutes'); - expect(items.at(2).classes()).not.toContain('active'); - }); + expect(items.at(2).text()).toBe('5 minutes'); + expect(items.at(2).classes()).not.toContain('active'); }); - it('renders dropdown with a label not in the quick range', () => { + it('renders dropdown with a label not in the quick range', async () => { createComponent({ value: { duration: { seconds: 60 * 4 }, }, }); dropdownToggle().trigger('click'); - return wrapper.vm.$nextTick(() => { - expect(dropdownToggle().text()).toBe('2020-01-23 19:56:00 to 2020-01-23 20:00:00'); - }); + await nextTick(); + expect(dropdownToggle().text()).toBe('2020-01-23 19:56:00 to 2020-01-23 20:00:00'); }); }); }); |