Add latest changes from gitlab-org/gitlab@master

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,
+      });
+    });
   });
 });