diff options
Diffstat (limited to 'spec/frontend/search/sidebar')
3 files changed, 93 insertions, 14 deletions
diff --git a/spec/frontend/search/sidebar/components/app_spec.js b/spec/frontend/search/sidebar/components/app_spec.js index 8a35ae96d5e..963b73aeae5 100644 --- a/spec/frontend/search/sidebar/components/app_spec.js +++ b/spec/frontend/search/sidebar/components/app_spec.js @@ -5,7 +5,7 @@ import { MOCK_QUERY } from 'jest/search/mock_data'; import GlobalSearchSidebar from '~/search/sidebar/components/app.vue'; import ResultsFilters from '~/search/sidebar/components/results_filters.vue'; import ScopeNavigation from '~/search/sidebar/components/scope_navigation.vue'; -import LanguageFilter from '~/search/sidebar/components/language_filter.vue'; +import LanguageFilter from '~/search/sidebar/components/language_filter/index.vue'; Vue.use(Vuex); diff --git a/spec/frontend/search/sidebar/components/checkbox_filter_spec.js b/spec/frontend/search/sidebar/components/checkbox_filter_spec.js index f7b35c7bb14..7af588f059f 100644 --- a/spec/frontend/search/sidebar/components/checkbox_filter_spec.js +++ b/spec/frontend/search/sidebar/components/checkbox_filter_spec.js @@ -1,17 +1,22 @@ import { GlFormCheckboxGroup, GlFormCheckbox } from '@gitlab/ui'; import Vue from 'vue'; import Vuex from 'vuex'; +import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { MOCK_QUERY, MOCK_LANGUAGE_AGGREGATIONS_BUCKETS } from 'jest/search/mock_data'; -import CheckboxFilter from '~/search/sidebar/components/checkbox_filter.vue'; +import CheckboxFilter, { + TRACKING_LABEL_CHECKBOX, + TRACKING_LABEL_SET, +} from '~/search/sidebar/components/checkbox_filter.vue'; -import { languageFilterData } from '~/search/sidebar/constants/language_filter_data'; +import { languageFilterData } from '~/search/sidebar/components/language_filter/data'; import { convertFiltersData } from '~/search/sidebar/utils'; Vue.use(Vuex); describe('CheckboxFilter', () => { let wrapper; + let trackingSpy; const actionSpies = { setQuery: jest.fn(), @@ -23,9 +28,10 @@ describe('CheckboxFilter', () => { const defaultProps = { filtersData: convertFiltersData(MOCK_LANGUAGE_AGGREGATIONS_BUCKETS), + trackingNamespace: 'testNameSpace', }; - const createComponent = () => { + const createComponent = (Props = defaultProps) => { const store = new Vuex.Store({ state: { query: MOCK_QUERY, @@ -37,13 +43,13 @@ describe('CheckboxFilter', () => { wrapper = shallowMountExtended(CheckboxFilter, { store, propsData: { - ...defaultProps, + ...Props, }, }); }; - beforeEach(() => { - createComponent(); + afterEach(() => { + unmockTracking(); }); const findFormCheckboxGroup = () => wrapper.findComponent(GlFormCheckboxGroup); @@ -52,6 +58,11 @@ describe('CheckboxFilter', () => { const fintAllCheckboxLabelCounts = () => wrapper.findAllByTestId('labelCount'); describe('Renders correctly', () => { + beforeEach(() => { + createComponent(); + trackingSpy = mockTracking(undefined, undefined, jest.spyOn); + }); + it('renders form', () => { expect(findFormCheckboxGroup().exists()).toBe(true); }); @@ -76,15 +87,34 @@ describe('CheckboxFilter', () => { }); describe('actions', () => { - it('triggers setQuery', () => { - const filter = - defaultProps.filtersData.filters[Object.keys(defaultProps.filtersData.filters)[0]].value; - findFormCheckboxGroup().vm.$emit('input', filter); + const checkedLanguageName = MOCK_LANGUAGE_AGGREGATIONS_BUCKETS[0].key; + + beforeEach(async () => { + defaultProps.filtersData = convertFiltersData(MOCK_LANGUAGE_AGGREGATIONS_BUCKETS.slice(0, 3)); + CheckboxFilter.computed.selectedFilter.get = jest.fn(() => checkedLanguageName); + + createComponent(); + trackingSpy = mockTracking(undefined, undefined, jest.spyOn); + findFormCheckboxGroup().vm.$emit('input', checkedLanguageName); + }); + it('triggers setQuery', () => { expect(actionSpies.setQuery).toHaveBeenCalledWith(expect.any(Object), { key: languageFilterData.filterParam, - value: filter, + value: checkedLanguageName, }); }); + + it('sends tracking information when setQuery', () => { + findFormCheckboxGroup().vm.$emit('input', checkedLanguageName); + expect(trackingSpy).toHaveBeenCalledWith( + defaultProps.trackingNamespace, + TRACKING_LABEL_CHECKBOX, + { + label: TRACKING_LABEL_SET, + property: checkedLanguageName, + }, + ); + }); }); }); diff --git a/spec/frontend/search/sidebar/components/language_filter_spec.js b/spec/frontend/search/sidebar/components/language_filter_spec.js index 17656ba749b..5821def5b43 100644 --- a/spec/frontend/search/sidebar/components/language_filter_spec.js +++ b/spec/frontend/search/sidebar/components/language_filter_spec.js @@ -1,20 +1,35 @@ import { GlAlert, GlFormCheckbox, GlForm } from '@gitlab/ui'; import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; +import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { MOCK_QUERY, MOCK_AGGREGATIONS, MOCK_LANGUAGE_AGGREGATIONS_BUCKETS, } from 'jest/search/mock_data'; -import LanguageFilter from '~/search/sidebar/components/language_filter.vue'; +import LanguageFilter from '~/search/sidebar/components/language_filter/index.vue'; import CheckboxFilter from '~/search/sidebar/components/checkbox_filter.vue'; -import { MAX_ITEM_LENGTH } from '~/search/sidebar/constants/language_filter_data'; + +import { + TRACKING_LABEL_SHOW_MORE, + TRACKING_CATEGORY, + TRACKING_PROPERTY_MAX, + TRACKING_LABEL_MAX, + TRACKING_LABEL_FILTERS, + TRACKING_ACTION_SHOW, + TRACKING_ACTION_CLICK, + TRACKING_LABEL_APPLY, + TRACKING_LABEL_ALL, +} from '~/search/sidebar/components/language_filter/tracking'; + +import { MAX_ITEM_LENGTH } from '~/search/sidebar/components/language_filter/data'; Vue.use(Vuex); describe('GlobalSearchSidebarLanguageFilter', () => { let wrapper; + let trackingSpy; const actionSpies = { fetchLanguageAggregation: jest.fn(), @@ -46,6 +61,10 @@ describe('GlobalSearchSidebarLanguageFilter', () => { }); }; + afterEach(() => { + unmockTracking(); + }); + const findForm = () => wrapper.findComponent(GlForm); const findCheckboxFilter = () => wrapper.findComponent(CheckboxFilter); const findApplyButton = () => wrapper.findByTestId('apply-button'); @@ -58,6 +77,7 @@ describe('GlobalSearchSidebarLanguageFilter', () => { describe('Renders correctly', () => { beforeEach(() => { createComponent(); + trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); }); it('renders form', () => { @@ -130,20 +150,40 @@ describe('GlobalSearchSidebarLanguageFilter', () => { describe('Show All button works', () => { beforeEach(() => { createComponent(); + trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); }); it(`renders ${MAX_ITEM_LENGTH} amount of items`, async () => { findShowMoreButton().vm.$emit('click'); + await nextTick(); + expect(findAllCheckboxes()).toHaveLength(MAX_ITEM_LENGTH); }); + it('sends tracking information when show more clicked', () => { + findShowMoreButton().vm.$emit('click'); + + expect(trackingSpy).toHaveBeenCalledWith(TRACKING_ACTION_CLICK, TRACKING_LABEL_SHOW_MORE, { + label: TRACKING_LABEL_ALL, + }); + }); + it(`renders more then ${MAX_ITEM_LENGTH} text`, async () => { findShowMoreButton().vm.$emit('click'); await nextTick(); expect(findHasOverMax().exists()).toBe(true); }); + it('sends tracking information when show more clicked and max item reached', () => { + findShowMoreButton().vm.$emit('click'); + + expect(trackingSpy).toHaveBeenCalledWith(TRACKING_ACTION_SHOW, TRACKING_LABEL_FILTERS, { + label: TRACKING_LABEL_MAX, + property: TRACKING_PROPERTY_MAX, + }); + }); + it(`doesn't render show more button after click`, async () => { findShowMoreButton().vm.$emit('click'); await nextTick(); @@ -154,6 +194,7 @@ describe('GlobalSearchSidebarLanguageFilter', () => { describe('actions', () => { beforeEach(() => { createComponent({}); + trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); }); it('uses getter languageAggregationBuckets', () => { @@ -169,5 +210,13 @@ describe('GlobalSearchSidebarLanguageFilter', () => { expect(actionSpies.applyQuery).toHaveBeenCalled(); }); + + it('sends tracking information clicking ApplyButton', () => { + findForm().vm.$emit('submit', { preventDefault: () => {} }); + + expect(trackingSpy).toHaveBeenCalledWith(TRACKING_ACTION_CLICK, TRACKING_LABEL_APPLY, { + label: TRACKING_CATEGORY, + }); + }); }); }); |