Add latest changes from gitlab-org/gitlab@master

4 files changed, 285 insertions, 31 deletions

diff --git a/spec/frontend/search/sidebar/components/app_spec.js b/spec/frontend/search/sidebar/components/app_spec.js
index 6aa40b7a2be..760c83a1dde 100644
--- a/spec/frontend/search/sidebar/components/app_spec.js
+++ b/spec/frontend/search/sidebar/components/app_spec.js
@@ -5,6 +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';
 
 Vue.use(Vuex);
 
@@ -35,53 +36,41 @@ describe('GlobalSearchSidebar', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findSidebarSection = () => wrapper.find('section');
   const findFilters = () => wrapper.findComponent(ResultsFilters);
   const findSidebarNavigation = () => wrapper.findComponent(ScopeNavigation);
+  const findLanguageAggregation = () => wrapper.findComponent(LanguageFilter);
 
   describe('renders properly', () => {
-    describe('scope=projects', () => {
+    describe('always', () => {
       beforeEach(() => {
-        createComponent({ urlQuery: { ...MOCK_QUERY, scope: 'projects' } });
+        createComponent({});
       });
-
-      it('shows section', () => {
+      it(`shows section`, () => {
         expect(findSidebarSection().exists()).toBe(true);
       });
-
-      it("doesn't shows filters", () => {
-        expect(findFilters().exists()).toBe(false);
-      });
     });
 
-    describe('scope=merge_requests', () => {
+    describe.each`
+      scope               | showFilters | ShowsLanguage
+      ${'issues'}         | ${true}     | ${false}
+      ${'merge_requests'} | ${true}     | ${false}
+      ${'projects'}       | ${false}    | ${false}
+      ${'blobs'}          | ${false}    | ${true}
+    `('sidebar scope: $scope', ({ scope, showFilters, ShowsLanguage }) => {
       beforeEach(() => {
-        createComponent({ urlQuery: { ...MOCK_QUERY, scope: 'merge_requests' } });
+        createComponent(
+          { urlQuery: { scope } },
+          { searchBlobsLanguageAggregation: true, searchPageVerticalNav: true },
+        );
       });
 
-      it('shows section', () => {
-        expect(findSidebarSection().exists()).toBe(true);
+      it(`${!showFilters ? "doesn't" : ''} shows filters`, () => {
+        expect(findFilters().exists()).toBe(showFilters);
       });
 
-      it('shows filters', () => {
-        expect(findFilters().exists()).toBe(true);
-      });
-    });
-
-    describe('scope=issues', () => {
-      beforeEach(() => {
-        createComponent({ urlQuery: MOCK_QUERY });
-      });
-      it('shows section', () => {
-        expect(findSidebarSection().exists()).toBe(true);
-      });
-
-      it('shows filters', () => {
-        expect(findFilters().exists()).toBe(true);
+      it(`${!ShowsLanguage ? "doesn't" : ''} shows language filters`, () => {
+        expect(findLanguageAggregation().exists()).toBe(ShowsLanguage);
       });
     });
 
@@ -94,4 +83,22 @@ describe('GlobalSearchSidebar', () => {
       });
     });
   });
+
+  describe('when search_blobs_language_aggregation is enabled', () => {
+    beforeEach(() => {
+      createComponent({ urlQuery: { scope: 'blobs' } }, { searchBlobsLanguageAggregation: true });
+    });
+    it('shows the language filter', () => {
+      expect(findLanguageAggregation().exists()).toBe(true);
+    });
+  });
+
+  describe('when search_blobs_language_aggregation is disabled', () => {
+    beforeEach(() => {
+      createComponent({ urlQuery: { scope: 'blobs' } }, { searchBlobsLanguageAggregation: false });
+    });
+    it('hides the language filter', () => {
+      expect(findLanguageAggregation().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/search/sidebar/components/checkbox_filter_spec.js b/spec/frontend/search/sidebar/components/checkbox_filter_spec.js
new file mode 100644
index 00000000000..82017754b23
--- /dev/null
+++ b/spec/frontend/search/sidebar/components/checkbox_filter_spec.js
@@ -0,0 +1,85 @@
+import { GlFormCheckboxGroup, GlFormCheckbox } from '@gitlab/ui';
+import Vue from 'vue';
+import Vuex from 'vuex';
+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 { languageFilterData } from '~/search/sidebar/constants/language_filter_data';
+import { convertFiltersData } from '~/search/sidebar/utils';
+
+Vue.use(Vuex);
+
+describe('CheckboxFilter', () => {
+  let wrapper;
+
+  const actionSpies = {
+    setQuery: jest.fn(),
+  };
+
+  const defaultProps = {
+    filterData: convertFiltersData(MOCK_LANGUAGE_AGGREGATIONS_BUCKETS),
+  };
+
+  const createComponent = () => {
+    const store = new Vuex.Store({
+      state: {
+        query: MOCK_QUERY,
+      },
+      actions: actionSpies,
+    });
+
+    wrapper = shallowMountExtended(CheckboxFilter, {
+      store,
+      propsData: {
+        ...defaultProps,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  const findFormCheckboxGroup = () => wrapper.findComponent(GlFormCheckboxGroup);
+  const findAllCheckboxes = () => wrapper.findAllComponents(GlFormCheckbox);
+  const fintAllCheckboxLabels = () => wrapper.findAllByTestId('label');
+  const fintAllCheckboxLabelCounts = () => wrapper.findAllByTestId('labelCount');
+
+  describe('Renders correctly', () => {
+    it('renders form', () => {
+      expect(findFormCheckboxGroup().exists()).toBe(true);
+    });
+
+    it('renders checkbox-filter', () => {
+      expect(findAllCheckboxes().exists()).toBe(true);
+    });
+
+    it('renders all checkbox-filter checkboxes', () => {
+      expect(findAllCheckboxes()).toHaveLength(MOCK_LANGUAGE_AGGREGATIONS_BUCKETS.length);
+    });
+
+    it('renders correctly label for the element', () => {
+      expect(fintAllCheckboxLabels().at(0).text()).toBe(MOCK_LANGUAGE_AGGREGATIONS_BUCKETS[0].key);
+    });
+
+    it('renders correctly count for the element', () => {
+      expect(fintAllCheckboxLabelCounts().at(0).text()).toBe(
+        MOCK_LANGUAGE_AGGREGATIONS_BUCKETS[0].count.toString(),
+      );
+    });
+  });
+
+  describe('actions', () => {
+    it('triggers setQuery', () => {
+      const filter =
+        defaultProps.filterData.filters[Object.keys(defaultProps.filterData.filters)[0]].value;
+      findFormCheckboxGroup().vm.$emit('input', filter);
+
+      expect(actionSpies.setQuery).toHaveBeenCalledWith(expect.any(Object), {
+        key: languageFilterData.filterParam,
+        value: filter,
+      });
+    });
+  });
+});
diff --git a/spec/frontend/search/sidebar/components/language_filters_spec.js b/spec/frontend/search/sidebar/components/language_filters_spec.js
new file mode 100644
index 00000000000..e297d1c33b0
--- /dev/null
+++ b/spec/frontend/search/sidebar/components/language_filters_spec.js
@@ -0,0 +1,152 @@
+import { GlAlert, GlFormCheckbox, GlForm } from '@gitlab/ui';
+import Vue, { nextTick } from 'vue';
+import Vuex from 'vuex';
+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 CheckboxFilter from '~/search/sidebar/components/checkbox_filter.vue';
+import { MAX_ITEM_LENGTH } from '~/search/sidebar/constants/language_filter_data';
+
+Vue.use(Vuex);
+
+describe('GlobalSearchSidebarLanguageFilter', () => {
+  let wrapper;
+
+  const actionSpies = {
+    fetchLanguageAggregation: jest.fn(),
+    applyQuery: jest.fn(),
+  };
+
+  const getterSpies = {
+    langugageAggregationBuckets: jest.fn(() => MOCK_LANGUAGE_AGGREGATIONS_BUCKETS),
+  };
+
+  const createComponent = (initialState) => {
+    const store = new Vuex.Store({
+      state: {
+        query: MOCK_QUERY,
+        urlQuery: MOCK_QUERY,
+        aggregations: MOCK_AGGREGATIONS,
+        ...initialState,
+      },
+      actions: actionSpies,
+      getters: getterSpies,
+    });
+
+    wrapper = shallowMountExtended(LanguageFilter, {
+      store,
+      stubs: {
+        CheckboxFilter,
+      },
+    });
+  };
+
+  const findForm = () => wrapper.findComponent(GlForm);
+  const findCheckboxFilter = () => wrapper.findComponent(CheckboxFilter);
+  const findApplyButton = () => wrapper.findByTestId('apply-button');
+  const findShowMoreButton = () => wrapper.findByTestId('show-more-button');
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findAllCheckboxes = () => wrapper.findAllComponents(GlFormCheckbox);
+  const findHasOverMax = () => wrapper.findByTestId('has-over-max-text');
+
+  describe('Renders correctly', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders form', () => {
+      expect(findForm().exists()).toBe(true);
+    });
+
+    it('renders checkbox-filter', () => {
+      expect(findCheckboxFilter().exists()).toBe(true);
+    });
+
+    it('renders all checkbox-filter checkboxes', () => {
+      // 11th checkbox is hidden
+      expect(findAllCheckboxes()).toHaveLength(10);
+    });
+
+    it('renders ApplyButton', () => {
+      expect(findApplyButton().exists()).toBe(true);
+    });
+
+    it('renders Show More button', () => {
+      expect(findShowMoreButton().exists()).toBe(true);
+    });
+
+    it("doesn't render Alert", () => {
+      expect(findAlert().exists()).toBe(false);
+    });
+  });
+
+  describe('ApplyButton', () => {
+    describe('when sidebarDirty is false', () => {
+      beforeEach(() => {
+        createComponent({ sidebarDirty: false });
+      });
+
+      it('disables the button', () => {
+        expect(findApplyButton().attributes('disabled')).toBe('true');
+      });
+    });
+
+    describe('when sidebarDirty is true', () => {
+      beforeEach(() => {
+        createComponent({ sidebarDirty: true });
+      });
+
+      it('enables the button', () => {
+        expect(findApplyButton().attributes('disabled')).toBe(undefined);
+      });
+    });
+  });
+
+  describe('Show All button works', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it(`renders ${MAX_ITEM_LENGTH} amount of items`, async () => {
+      findShowMoreButton().vm.$emit('click');
+      await nextTick();
+      expect(findAllCheckboxes()).toHaveLength(MAX_ITEM_LENGTH);
+    });
+
+    it(`renders more then ${MAX_ITEM_LENGTH} text`, async () => {
+      findShowMoreButton().vm.$emit('click');
+      await nextTick();
+      expect(findHasOverMax().exists()).toBe(true);
+    });
+
+    it(`doesn't render show more button after click`, async () => {
+      findShowMoreButton().vm.$emit('click');
+      await nextTick();
+      expect(findShowMoreButton().exists()).toBe(false);
+    });
+  });
+
+  describe('actions', () => {
+    beforeEach(() => {
+      createComponent({});
+    });
+
+    it('uses getter langugageAggregationBuckets', () => {
+      expect(getterSpies.langugageAggregationBuckets).toHaveBeenCalled();
+    });
+
+    it('uses action fetchLanguageAggregation', () => {
+      expect(actionSpies.fetchLanguageAggregation).toHaveBeenCalled();
+    });
+
+    it('clicking ApplyButton calls applyQuery', () => {
+      findForm().vm.$emit('submit', { preventDefault: () => {} });
+
+      expect(actionSpies.applyQuery).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/frontend/search/sidebar/utils_spec.js b/spec/frontend/search/sidebar/utils_spec.js
new file mode 100644
index 00000000000..652d32c836e
--- /dev/null
+++ b/spec/frontend/search/sidebar/utils_spec.js
@@ -0,0 +1,10 @@
+import { convertFiltersData } from '~/search/sidebar/utils';
+import { TEST_RAW_BUCKETS, TEST_FILTER_DATA } from '../mock_data';
+
+describe('Global Search sidebar utils', () => {
+  describe('convertFiltersData', () => {
+    it('converts raw buckets to array', () => {
+      expect(convertFiltersData(TEST_RAW_BUCKETS)).toStrictEqual(TEST_FILTER_DATA);
+    });
+  });
+});