From 7596630be2bb8febb34e782817c8339ba6ec7b2c Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Wed, 27 Dec 2023 09:14:36 +0000 Subject: Add latest changes from gitlab-org/gitlab@master --- .../invite_members/utils/member_utils_spec.js | 16 +- spec/frontend/observability/client_spec.js | 32 ++++ .../tokens/daterange_token_spec.js | 170 +++++++++++++++++++++ 3 files changed, 203 insertions(+), 15 deletions(-) create mode 100644 spec/frontend/vue_shared/components/filtered_search_bar/tokens/daterange_token_spec.js (limited to 'spec/frontend') diff --git a/spec/frontend/invite_members/utils/member_utils_spec.js b/spec/frontend/invite_members/utils/member_utils_spec.js index 4d71a35ff99..abae43c3dbb 100644 --- a/spec/frontend/invite_members/utils/member_utils_spec.js +++ b/spec/frontend/invite_members/utils/member_utils_spec.js @@ -1,8 +1,4 @@ -import { - memberName, - triggerExternalAlert, - inviteMembersTrackingOptions, -} from '~/invite_members/utils/member_utils'; +import { memberName, triggerExternalAlert } from '~/invite_members/utils/member_utils'; jest.mock('~/lib/utils/url_utility'); @@ -22,13 +18,3 @@ describe('Trigger External Alert', () => { expect(triggerExternalAlert()).toBe(false); }); }); - -describe('inviteMembersTrackingOptions', () => { - it('returns options with a label', () => { - expect(inviteMembersTrackingOptions({ label: '_label_' })).toEqual({ label: '_label_' }); - }); - - it('handles options that has no label', () => { - expect(inviteMembersTrackingOptions({})).toEqual({ label: undefined }); - }); -}); diff --git a/spec/frontend/observability/client_spec.js b/spec/frontend/observability/client_spec.js index e7b68a2346e..0a852d9e000 100644 --- a/spec/frontend/observability/client_spec.js +++ b/spec/frontend/observability/client_spec.js @@ -279,6 +279,38 @@ describe('buildClient', () => { '&attr_name=name1&attr_value=value1', ); }); + describe('date range time filter', () => { + it('handles custom date range period filter', async () => { + await client.fetchTraces({ + filters: { + period: [{ operator: '=', value: '2023-01-01 - 2023-02-01' }], + }, + }); + expect(getQueryParam()).not.toContain('period='); + expect(getQueryParam()).toContain( + 'start_time=2023-01-01T00:00:00.000Z&end_time=2023-02-01T00:00:00.000Z', + ); + }); + + it.each([ + 'invalid - 2023-02-01', + '2023-02-01 - invalid', + 'invalid - invalid', + '2023-01-01 / 2023-02-01', + '2023-01-01 2023-02-01', + '2023-01-01 - 2023-02-01 - 2023-02-01', + ])('ignore invalid values', async (val) => { + await client.fetchTraces({ + filters: { + period: [{ operator: '=', value: val }], + }, + }); + + expect(getQueryParam()).not.toContain('start_time='); + expect(getQueryParam()).not.toContain('end_time='); + expect(getQueryParam()).not.toContain('period='); + }); + }); it('handles repeated params', async () => { await client.fetchTraces({ diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/daterange_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/daterange_token_spec.js new file mode 100644 index 00000000000..ef0e3dbbb8e --- /dev/null +++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/daterange_token_spec.js @@ -0,0 +1,170 @@ +import { + GlDaterangePicker, + GlFilteredSearchSuggestion, + GlFilteredSearchSuggestionList, + GlFilteredSearchToken, +} from '@gitlab/ui'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; +import DaterangeToken from '~/vue_shared/components/filtered_search_bar/tokens/daterange_token.vue'; +import { OPERATORS_IS } from '~/vue_shared/components/filtered_search_bar/constants'; + +const CUSTOM_DATE = 'custom-date'; + +describe('DaterangeToken', () => { + let wrapper; + + const defaultProps = { + active: true, + value: { + data: '', + }, + config: { + operators: OPERATORS_IS, + options: [ + { + value: 'last_week', + title: 'Last week', + }, + { + value: 'last_month', + title: 'Last month', + }, + ], + }, + }; + + function createComponent(props = {}) { + return mountExtended(DaterangeToken, { + propsData: { ...defaultProps, ...props }, + stubs: { + Portal: true, + }, + provide: { + portalName: 'fake target', + alignSuggestions: function fakeAlignSuggestions() {}, + suggestionsListClass: () => 'custom-class', + termsAsTokens: () => false, + }, + }); + } + + const findGlFilteredSearchToken = () => wrapper.findComponent(GlFilteredSearchToken); + const findDateRangePicker = () => wrapper.findComponent(GlDaterangePicker); + const findAllSuggestions = () => wrapper.findAllComponents(GlFilteredSearchSuggestion); + const selectSuggestion = (suggestion) => + wrapper.findComponent(GlFilteredSearchSuggestionList).vm.$emit('suggestion', suggestion); + + beforeEach(() => { + wrapper = createComponent(); + }); + + it('renders a filtered search token', () => { + expect(findGlFilteredSearchToken().exists()).toBe(true); + }); + + it('remove the options from the token config', () => { + expect(findGlFilteredSearchToken().props('config').options).toBeUndefined(); + }); + + it('does not set the token as view-only', () => { + expect(findGlFilteredSearchToken().props('viewOnly')).toBe(false); + }); + + it('does not show the date picker by default', () => { + expect(findDateRangePicker().exists()).toBe(false); + }); + + it('does not re-activate the token', async () => { + await wrapper.setProps({ active: false }); + expect(findGlFilteredSearchToken().props('active')).toBe(false); + }); + + it('does not override the value', async () => { + await wrapper.setProps({ value: { data: 'value' } }); + expect(findGlFilteredSearchToken().props('value')).toEqual({ data: 'value' }); + }); + + it('renders a list of suggestions as specified by the config', () => { + const suggestions = findAllSuggestions(); + expect(suggestions.exists()).toBe(true); + expect(suggestions).toHaveLength(defaultProps.config.options.length + 1); + [...defaultProps.config.options, { value: CUSTOM_DATE, title: 'Custom' }].forEach( + (option, i) => { + expect(suggestions.at(i).props('value')).toBe(option.value); + expect(suggestions.at(i).text()).toBe(option.title); + }, + ); + }); + + it('sets the dataSegmentInputAttributes', () => { + expect(findGlFilteredSearchToken().props('dataSegmentInputAttributes')).toEqual({ + id: 'time_range_data_segment_input', + }); + }); + + describe('when a default option is selected', () => { + const option = defaultProps.config.options[0].value; + beforeEach(async () => { + await selectSuggestion(option); + }); + it('does not show the date picker if default option is selected', () => { + expect(findDateRangePicker().exists()).toBe(false); + }); + + it('sets the value', () => { + expect(findGlFilteredSearchToken().emitted().select).toEqual([[option]]); + expect(findGlFilteredSearchToken().emitted().complete).toEqual([[option]]); + }); + }); + + describe('when custom-date option is selected', () => { + beforeEach(async () => { + await selectSuggestion(CUSTOM_DATE); + }); + + it('sets the token as view-only', () => { + expect(findGlFilteredSearchToken().props('viewOnly')).toBe(true); + }); + + it('shows the date picker', () => { + expect(findDateRangePicker().exists()).toBe(true); + const today = new Date(); + expect(findDateRangePicker().props('defaultStartDate')).toEqual(today); + expect(findDateRangePicker().props('startOpened')).toBe(true); + }); + + it('re-activate the token while the date picker is open', async () => { + await wrapper.setProps({ active: false }); + expect(findGlFilteredSearchToken().props('active')).toBe(true); + }); + + it('overrides the value', async () => { + await wrapper.setProps({ value: { data: 'value' } }); + expect(findGlFilteredSearchToken().props('value')).toEqual({ data: '' }); + }); + + it('sets the dataSegmentInputAttributes', () => { + expect(findGlFilteredSearchToken().props('dataSegmentInputAttributes')).toEqual({ + id: 'time_range_data_segment_input', + placeholder: 'YYYY-MM-DD - YYYY-MM-DD', + style: 'padding-left: 23px;', + }); + }); + + it('sets the date range and hides the picker upon selection', async () => { + await findDateRangePicker().vm.$emit('input', { + startDate: new Date('October 13, 2014 11:13:00'), + endDate: new Date('October 13, 2014 11:13:00'), + }); + expect(findGlFilteredSearchToken().emitted().complete).toEqual([ + [CUSTOM_DATE], + [`"2014-10-13 - 2014-10-13"`], + ]); + expect(findGlFilteredSearchToken().emitted().select).toEqual([ + [CUSTOM_DATE], + [`"2014-10-13 - 2014-10-13"`], + ]); + expect(findDateRangePicker().exists()).toBe(false); + }); + }); +}); -- cgit v1.2.3