diff options
Diffstat (limited to 'spec/frontend/analytics/shared/components/daterange_spec.js')
-rw-r--r-- | spec/frontend/analytics/shared/components/daterange_spec.js | 41 |
1 files changed, 17 insertions, 24 deletions
diff --git a/spec/frontend/analytics/shared/components/daterange_spec.js b/spec/frontend/analytics/shared/components/daterange_spec.js index 854582abb82..a38df274243 100644 --- a/spec/frontend/analytics/shared/components/daterange_spec.js +++ b/spec/frontend/analytics/shared/components/daterange_spec.js @@ -1,7 +1,6 @@ -import { GlDaterangePicker } from '@gitlab/ui'; -import { mount } from '@vue/test-utils'; +import { GlDaterangePicker, GlSprintf } from '@gitlab/ui'; +import { shallowMount, mount } from '@vue/test-utils'; import { useFakeDate } from 'helpers/fake_date'; -import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import Daterange from '~/analytics/shared/components/daterange.vue'; const defaultProps = { @@ -14,13 +13,13 @@ describe('Daterange component', () => { let wrapper; - const factory = (props = defaultProps) => { - wrapper = mount(Daterange, { + const factory = (props = defaultProps, mountFn = shallowMount) => { + wrapper = mountFn(Daterange, { propsData: { ...defaultProps, ...props, }, - directives: { GlTooltip: createMockDirective() }, + stubs: { GlSprintf }, }); }; @@ -28,9 +27,8 @@ describe('Daterange component', () => { wrapper.destroy(); }); - const findDaterangePicker = () => wrapper.find(GlDaterangePicker); - - const findDateRangeIndicator = () => wrapper.find('.daterange-indicator'); + const findDaterangePicker = () => wrapper.findComponent(GlDaterangePicker); + const findDateRangeIndicator = () => wrapper.findComponent(GlSprintf); describe('template', () => { describe('when show is false', () => { @@ -43,26 +41,24 @@ describe('Daterange component', () => { describe('when show is true', () => { it('renders the daterange picker', () => { factory({ show: true }); + expect(findDaterangePicker().exists()).toBe(true); }); }); describe('with a minDate being set', () => { - it('emits the change event with the minDate when the user enters a start date before the minDate', () => { + it('emits the change event with the minDate when the user enters a start date before the minDate', async () => { const startDate = new Date('2019-09-01'); const endDate = new Date('2019-09-30'); const minDate = new Date('2019-06-01'); - factory({ show: true, startDate, endDate, minDate }); - + factory({ show: true, startDate, endDate, minDate }, mount); const input = findDaterangePicker().find('input'); input.setValue('2019-01-01'); - input.trigger('change'); + await input.trigger('change'); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.emitted().change).toEqual([[{ startDate: minDate, endDate }]]); - }); + expect(wrapper.emitted().change).toEqual([[{ startDate: minDate, endDate }]]); }); }); @@ -76,16 +72,13 @@ describe('Daterange component', () => { }); it('displays the correct number of selected days in the indicator', () => { - expect(findDateRangeIndicator().find('span').text()).toBe('10 days selected'); + expect(findDateRangeIndicator().text()).toMatchInterpolatedText('10 days selected'); }); - it('displays a tooltip', () => { - const icon = wrapper.find('[data-testid="helper-icon"]'); - const tooltip = getBinding(icon.element, 'gl-tooltip'); - - expect(tooltip).toBeDefined(); - expect(icon.attributes('title')).toBe( - 'Showing data for workflow items created in this date range. Date range cannot exceed 30 days.', + it('sets the tooltip', () => { + const tooltip = findDaterangePicker().props('tooltip'); + expect(tooltip).toBe( + 'Showing data for workflow items created in this date range. Date range limited to 30 days.', ); }); }); |