Add latest changes from gitlab-org/gitlab@master

7 files changed, 343 insertions, 170 deletions

diff --git a/spec/frontend/search/sidebar/components/app_spec.js b/spec/frontend/search/sidebar/components/app_spec.js
index ba492833ec4..aace9c8f83e 100644
--- a/spec/frontend/search/sidebar/components/app_spec.js
+++ b/spec/frontend/search/sidebar/components/app_spec.js
@@ -4,9 +4,10 @@ import Vuex from 'vuex';
 import { MOCK_QUERY } from 'jest/search/mock_data';
 import GlobalSearchSidebar from '~/search/sidebar/components/app.vue';
 import IssuesFilters from '~/search/sidebar/components/issues_filters.vue';
+import MergeRequestsFilters from '~/search/sidebar/components/merge_requests_filters.vue';
+import BlobsFilters from '~/search/sidebar/components/blobs_filters.vue';
 import ScopeLegacyNavigation from '~/search/sidebar/components/scope_legacy_navigation.vue';
 import ScopeSidebarNavigation from '~/search/sidebar/components/scope_sidebar_navigation.vue';
-import LanguageFilter from '~/search/sidebar/components/language_filter/index.vue';
 
 Vue.use(Vuex);
 
@@ -17,7 +18,7 @@ describe('GlobalSearchSidebar', () => {
     currentScope: jest.fn(() => 'issues'),
   };
 
-  const createComponent = (initialState = {}, featureFlags = {}) => {
+  const createComponent = (initialState = {}) => {
     const store = new Vuex.Store({
       state: {
         urlQuery: MOCK_QUERY,
@@ -28,19 +29,15 @@ describe('GlobalSearchSidebar', () => {
 
     wrapper = shallowMount(GlobalSearchSidebar, {
       store,
-      provide: {
-        glFeatures: {
-          ...featureFlags,
-        },
-      },
     });
   };
 
   const findSidebarSection = () => wrapper.find('section');
-  const findFilters = () => wrapper.findComponent(IssuesFilters);
+  const findIssuesFilters = () => wrapper.findComponent(IssuesFilters);
+  const findMergeRequestsFilters = () => wrapper.findComponent(MergeRequestsFilters);
+  const findBlobsFilters = () => wrapper.findComponent(BlobsFilters);
   const findScopeLegacyNavigation = () => wrapper.findComponent(ScopeLegacyNavigation);
   const findScopeSidebarNavigation = () => wrapper.findComponent(ScopeSidebarNavigation);
-  const findLanguageAggregation = () => wrapper.findComponent(LanguageFilter);
 
   describe('renders properly', () => {
     describe('always', () => {
@@ -53,23 +50,18 @@ describe('GlobalSearchSidebar', () => {
     });
 
     describe.each`
-      scope               | showFilters | showsLanguage
-      ${'issues'}         | ${true}     | ${false}
-      ${'merge_requests'} | ${true}     | ${false}
-      ${'projects'}       | ${false}    | ${false}
-      ${'blobs'}          | ${false}    | ${true}
-    `('sidebar scope: $scope', ({ scope, showFilters, showsLanguage }) => {
+      scope               | filter
+      ${'issues'}         | ${findIssuesFilters}
+      ${'merge_requests'} | ${findMergeRequestsFilters}
+      ${'blobs'}          | ${findBlobsFilters}
+    `('with sidebar $scope scope:', ({ scope, filter }) => {
       beforeEach(() => {
         getterSpies.currentScope = jest.fn(() => scope);
         createComponent({ urlQuery: { scope } });
       });
 
-      it(`${!showFilters ? "doesn't" : ''} shows filters`, () => {
-        expect(findFilters().exists()).toBe(showFilters);
-      });
-
-      it(`${!showsLanguage ? "doesn't" : ''} shows language filters`, () => {
-        expect(findLanguageAggregation().exists()).toBe(showsLanguage);
+      it(`shows filter ${filter.name.replace('find', '')}`, () => {
+        expect(filter().exists()).toBe(true);
       });
     });
 
diff --git a/spec/frontend/search/sidebar/components/blobs_filters_spec.js b/spec/frontend/search/sidebar/components/blobs_filters_spec.js
new file mode 100644
index 00000000000..ff93e6f32e4
--- /dev/null
+++ b/spec/frontend/search/sidebar/components/blobs_filters_spec.js
@@ -0,0 +1,28 @@
+import { shallowMount } from '@vue/test-utils';
+import BlobsFilters from '~/search/sidebar/components/blobs_filters.vue';
+import LanguageFilter from '~/search/sidebar/components/language_filter/index.vue';
+import FiltersTemplate from '~/search/sidebar/components/filters_template.vue';
+
+describe('GlobalSearch BlobsFilters', () => {
+  let wrapper;
+
+  const findLanguageFilter = () => wrapper.findComponent(LanguageFilter);
+  const findFiltersTemplate = () => wrapper.findComponent(FiltersTemplate);
+
+  const createComponent = () => {
+    wrapper = shallowMount(BlobsFilters);
+  };
+
+  describe('Renders correctly', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+    it('renders FiltersTemplate', () => {
+      expect(findLanguageFilter().exists()).toBe(true);
+    });
+
+    it('renders ConfidentialityFilter', () => {
+      expect(findFiltersTemplate().exists()).toBe(true);
+    });
+  });
+});
diff --git a/spec/frontend/search/sidebar/components/filters_spec.js b/spec/frontend/search/sidebar/components/filters_spec.js
index 546a84ff040..42508d7e216 100644
--- a/spec/frontend/search/sidebar/components/filters_spec.js
+++ b/spec/frontend/search/sidebar/components/filters_spec.js
@@ -1,4 +1,3 @@
-import { GlButton, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
@@ -36,11 +35,8 @@ describe('GlobalSearchSidebarFilters', () => {
     });
   };
 
-  const findSidebarForm = () => wrapper.find('form');
   const findStatusFilter = () => wrapper.findComponent(StatusFilter);
   const findConfidentialityFilter = () => wrapper.findComponent(ConfidentialityFilter);
-  const findApplyButton = () => wrapper.findComponent(GlButton);
-  const findResetLinkButton = () => wrapper.findComponent(GlLink);
 
   describe('Renders correctly', () => {
     beforeEach(() => {
@@ -53,82 +49,6 @@ describe('GlobalSearchSidebarFilters', () => {
     it('renders ConfidentialityFilter', () => {
       expect(findConfidentialityFilter().exists()).toBe(true);
     });
-
-    it('renders ApplyButton', () => {
-      expect(findApplyButton().exists()).toBe(true);
-    });
-  });
-
-  describe('ApplyButton', () => {
-    describe('when sidebarDirty is false', () => {
-      beforeEach(() => {
-        createComponent({ sidebarDirty: false });
-      });
-
-      it('disables the button', () => {
-        expect(findApplyButton().attributes('disabled')).toBeDefined();
-      });
-    });
-
-    describe('when sidebarDirty is true', () => {
-      beforeEach(() => {
-        createComponent({ sidebarDirty: true });
-      });
-
-      it('enables the button', () => {
-        expect(findApplyButton().attributes('disabled')).toBe(undefined);
-      });
-    });
-  });
-
-  describe('ResetLinkButton', () => {
-    describe('with no filter selected', () => {
-      beforeEach(() => {
-        createComponent({ urlQuery: {} });
-      });
-
-      it('does not render', () => {
-        expect(findResetLinkButton().exists()).toBe(false);
-      });
-    });
-
-    describe('with filter selected', () => {
-      beforeEach(() => {
-        createComponent({ urlQuery: MOCK_QUERY });
-      });
-
-      it('does render', () => {
-        expect(findResetLinkButton().exists()).toBe(true);
-      });
-    });
-
-    describe('with filter selected and user updated query back to default', () => {
-      beforeEach(() => {
-        createComponent({ urlQuery: MOCK_QUERY, query: {} });
-      });
-
-      it('does render', () => {
-        expect(findResetLinkButton().exists()).toBe(true);
-      });
-    });
-  });
-
-  describe('actions', () => {
-    beforeEach(() => {
-      createComponent({});
-    });
-
-    it('clicking ApplyButton calls applyQuery', () => {
-      findSidebarForm().trigger('submit');
-
-      expect(actionSpies.applyQuery).toHaveBeenCalled();
-    });
-
-    it('clicking ResetLinkButton calls resetQuery', () => {
-      findResetLinkButton().vm.$emit('click');
-
-      expect(actionSpies.resetQuery).toHaveBeenCalled();
-    });
   });
 
   describe.each`
diff --git a/spec/frontend/search/sidebar/components/filters_template_spec.js b/spec/frontend/search/sidebar/components/filters_template_spec.js
new file mode 100644
index 00000000000..11c7c541b54
--- /dev/null
+++ b/spec/frontend/search/sidebar/components/filters_template_spec.js
@@ -0,0 +1,167 @@
+import { GlForm, GlButton, GlLink } 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_AGGREGATIONS } from 'jest/search/mock_data';
+
+import FiltersTemplate from '~/search/sidebar/components/filters_template.vue';
+
+import {
+  TRACKING_ACTION_CLICK,
+  TRACKING_LABEL_APPLY,
+  TRACKING_LABEL_RESET,
+} from '~/search/sidebar/constants/index';
+
+Vue.use(Vuex);
+
+describe('GlobalSearchSidebarLanguageFilter', () => {
+  let wrapper;
+  let trackingSpy;
+
+  const actionSpies = {
+    applyQuery: jest.fn(),
+    resetQuery: jest.fn(),
+  };
+
+  const getterSpies = {
+    currentScope: jest.fn(() => 'issues'),
+  };
+
+  const createComponent = (initialState) => {
+    const store = new Vuex.Store({
+      state: {
+        query: MOCK_QUERY,
+        urlQuery: MOCK_QUERY,
+        aggregations: MOCK_AGGREGATIONS,
+        sidebarDirty: false,
+        ...initialState,
+      },
+      actions: actionSpies,
+      getters: getterSpies,
+    });
+
+    wrapper = shallowMountExtended(FiltersTemplate, {
+      store,
+      slots: {
+        default: '<p>Filters Content</p>',
+      },
+    });
+  };
+
+  const findForm = () => wrapper.findComponent(GlForm);
+  const findDividers = () => wrapper.findAll('hr');
+  const findApplyButton = () => wrapper.findComponent(GlButton);
+  const findResetButton = () => wrapper.findComponent(GlLink);
+  const findSlotContent = () => wrapper.findByText('Filters Content');
+
+  describe('Renders correctly', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders form', () => {
+      expect(findForm().exists()).toBe(true);
+    });
+
+    it('renders dividers', () => {
+      expect(findDividers()).toHaveLength(2);
+    });
+
+    it('renders slot content', () => {
+      expect(findSlotContent().exists()).toBe(true);
+    });
+
+    it('renders ApplyButton', () => {
+      expect(findApplyButton().exists()).toBe(true);
+    });
+
+    it('renders reset button', () => {
+      expect(findResetButton().exists()).toBe(false);
+    });
+  });
+
+  describe('resetButton', () => {
+    describe.each`
+      description                                 | sidebarDirty | queryLangFilters | exists
+      ${'sidebar dirty only'}                     | ${true}      | ${[]}            | ${true}
+      ${'query filters only'}                     | ${false}     | ${['JSON', 'C']} | ${false}
+      ${'sidebar dirty and query filters'}        | ${true}      | ${['JSON', 'C']} | ${true}
+      ${'sidebar not dirty and no query filters'} | ${false}     | ${[]}            | ${false}
+    `('$description', ({ sidebarDirty, queryLangFilters, exists }) => {
+      beforeEach(() => {
+        getterSpies.queryLanguageFilters = jest.fn(() => queryLangFilters);
+
+        const query = {
+          ...MOCK_QUERY,
+          language: queryLangFilters,
+          state: undefined,
+          labels: undefined,
+          confidential: undefined,
+        };
+
+        createComponent({
+          sidebarDirty,
+          query,
+          urlQuery: query,
+        });
+      });
+
+      it(`button is ${exists ? 'shown' : 'hidden'}`, () => {
+        expect(findResetButton().exists()).toBe(exists);
+      });
+    });
+  });
+
+  describe('ApplyButton', () => {
+    describe('when sidebarDirty is false', () => {
+      beforeEach(() => {
+        createComponent({ sidebarDirty: false });
+      });
+
+      it('disables the button', () => {
+        expect(findApplyButton().attributes('disabled')).toBeDefined();
+      });
+    });
+
+    describe('when sidebarDirty is true', () => {
+      beforeEach(() => {
+        createComponent({ sidebarDirty: true });
+      });
+
+      it('enables the button', () => {
+        expect(findApplyButton().attributes('disabled')).toBe(undefined);
+      });
+    });
+  });
+
+  describe('actions', () => {
+    beforeEach(() => {
+      createComponent({ sidebarDirty: true });
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+    });
+
+    afterEach(() => {
+      unmockTracking();
+    });
+
+    it('clicking ApplyButton calls applyQuery', () => {
+      findForm().vm.$emit('submit', { preventDefault: () => {} });
+
+      expect(actionSpies.applyQuery).toHaveBeenCalled();
+      expect(trackingSpy).toHaveBeenCalledWith(TRACKING_ACTION_CLICK, TRACKING_LABEL_APPLY, {
+        label: getterSpies.currentScope(),
+      });
+    });
+
+    it('clicking resetButton calls resetQuery', () => {
+      findResetButton().vm.$emit('click');
+
+      expect(actionSpies.resetQuery).toHaveBeenCalled();
+      expect(trackingSpy).toHaveBeenCalledWith(TRACKING_ACTION_CLICK, TRACKING_LABEL_RESET, {
+        label: getterSpies.currentScope(),
+      });
+    });
+  });
+});
diff --git a/spec/frontend/search/sidebar/components/issues_filters_spec.js b/spec/frontend/search/sidebar/components/issues_filters_spec.js
new file mode 100644
index 00000000000..cab3a78bd34
--- /dev/null
+++ b/spec/frontend/search/sidebar/components/issues_filters_spec.js
@@ -0,0 +1,106 @@
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { MOCK_QUERY } from 'jest/search/mock_data';
+import IssuesFilters from '~/search/sidebar/components/issues_filters.vue';
+import ConfidentialityFilter from '~/search/sidebar/components/confidentiality_filter/index.vue';
+import StatusFilter from '~/search/sidebar/components/status_filter/index.vue';
+import LabelFilter from '~/search/sidebar/components/label_filter/index.vue';
+
+Vue.use(Vuex);
+
+describe('GlobalSearch IssuesFilters', () => {
+  let wrapper;
+
+  const defaultGetters = {
+    currentScope: () => 'issues',
+  };
+
+  const createComponent = (initialState, ff = true) => {
+    const store = new Vuex.Store({
+      state: {
+        urlQuery: MOCK_QUERY,
+        ...initialState,
+      },
+      getters: defaultGetters,
+    });
+
+    wrapper = shallowMount(IssuesFilters, {
+      store,
+      provide: {
+        glFeatures: {
+          searchIssueLabelAggregation: ff,
+        },
+      },
+    });
+  };
+
+  const findStatusFilter = () => wrapper.findComponent(StatusFilter);
+  const findConfidentialityFilter = () => wrapper.findComponent(ConfidentialityFilter);
+  const findLabelFilter = () => wrapper.findComponent(LabelFilter);
+  const findDividers = () => wrapper.findAll('hr');
+
+  describe('Renders correctly with FF enabled', () => {
+    beforeEach(() => {
+      createComponent({ urlQuery: MOCK_QUERY });
+    });
+    it('renders StatusFilter', () => {
+      expect(findStatusFilter().exists()).toBe(true);
+    });
+
+    it('renders ConfidentialityFilter', () => {
+      expect(findConfidentialityFilter().exists()).toBe(true);
+    });
+
+    it('renders LabelFilter', () => {
+      expect(findLabelFilter().exists()).toBe(true);
+    });
+
+    it('renders dividers correctly', () => {
+      expect(findDividers()).toHaveLength(2);
+    });
+  });
+
+  describe('Renders correctly with FF disabled', () => {
+    beforeEach(() => {
+      createComponent({ urlQuery: MOCK_QUERY }, false);
+    });
+    it('renders StatusFilter', () => {
+      expect(findStatusFilter().exists()).toBe(true);
+    });
+
+    it('renders ConfidentialityFilter', () => {
+      expect(findConfidentialityFilter().exists()).toBe(true);
+    });
+
+    it("doesn't render LabelFilter", () => {
+      expect(findLabelFilter().exists()).toBe(false);
+    });
+
+    it('renders divider correctly', () => {
+      expect(findDividers()).toHaveLength(1);
+    });
+  });
+
+  describe('Renders correctly with wrong scope', () => {
+    beforeEach(() => {
+      defaultGetters.currentScope = () => 'blobs';
+      createComponent({ urlQuery: MOCK_QUERY });
+    });
+    it("doesn't render StatusFilter", () => {
+      expect(findStatusFilter().exists()).toBe(false);
+    });
+
+    it("doesn't render ConfidentialityFilter", () => {
+      expect(findConfidentialityFilter().exists()).toBe(false);
+    });
+
+    it("doesn't render LabelFilter", () => {
+      expect(findLabelFilter().exists()).toBe(false);
+    });
+
+    it("doesn't render dividers", () => {
+      expect(findDividers()).toHaveLength(0);
+    });
+  });
+});
diff --git a/spec/frontend/search/sidebar/components/language_filter_spec.js b/spec/frontend/search/sidebar/components/language_filter_spec.js
index 817199d7cfe..88be8f908d7 100644
--- a/spec/frontend/search/sidebar/components/language_filter_spec.js
+++ b/spec/frontend/search/sidebar/components/language_filter_spec.js
@@ -1,4 +1,4 @@
-import { GlAlert, GlFormCheckbox, GlForm } from '@gitlab/ui';
+import { GlAlert, GlFormCheckbox } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
@@ -13,13 +13,11 @@ import CheckboxFilter from '~/search/sidebar/components/language_filter/checkbox
 
 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';
 
@@ -61,10 +59,7 @@ describe('GlobalSearchSidebarLanguageFilter', () => {
     });
   };
 
-  const findForm = () => wrapper.findComponent(GlForm);
   const findCheckboxFilter = () => wrapper.findComponent(CheckboxFilter);
-  const findApplyButton = () => wrapper.findByTestId('apply-button');
-  const findResetButton = () => wrapper.findByTestId('reset-button');
   const findShowMoreButton = () => wrapper.findByTestId('show-more-button');
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findAllCheckboxes = () => wrapper.findAllComponents(GlFormCheckbox);
@@ -80,10 +75,6 @@ describe('GlobalSearchSidebarLanguageFilter', () => {
       unmockTracking();
     });
 
-    it('renders form', () => {
-      expect(findForm().exists()).toBe(true);
-    });
-
     it('renders checkbox-filter', () => {
       expect(findCheckboxFilter().exists()).toBe(true);
     });
@@ -93,10 +84,6 @@ describe('GlobalSearchSidebarLanguageFilter', () => {
       expect(findAllCheckboxes()).toHaveLength(10);
     });
 
-    it('renders ApplyButton', () => {
-      expect(findApplyButton().exists()).toBe(true);
-    });
-
     it('renders Show More button', () => {
       expect(findShowMoreButton().exists()).toBe(true);
     });
@@ -106,47 +93,6 @@ describe('GlobalSearchSidebarLanguageFilter', () => {
     });
   });
 
-  describe('resetButton', () => {
-    describe.each`
-      description                          | sidebarDirty | queryFilters     | exists
-      ${'sidebar dirty only'}              | ${true}      | ${[]}            | ${false}
-      ${'query filters only'}              | ${false}     | ${['JSON', 'C']} | ${false}
-      ${'sidebar dirty and query filters'} | ${true}      | ${['JSON', 'C']} | ${true}
-      ${'no sidebar and no query filters'} | ${false}     | ${[]}            | ${false}
-    `('$description', ({ sidebarDirty, queryFilters, exists }) => {
-      beforeEach(() => {
-        getterSpies.queryLanguageFilters = jest.fn(() => queryFilters);
-        createComponent({ sidebarDirty, query: { ...MOCK_QUERY, language: queryFilters } });
-      });
-
-      it(`button is ${exists ? 'shown' : 'hidden'}`, () => {
-        expect(findResetButton().exists()).toBe(exists);
-      });
-    });
-  });
-
-  describe('ApplyButton', () => {
-    describe('when sidebarDirty is false', () => {
-      beforeEach(() => {
-        createComponent({ sidebarDirty: false });
-      });
-
-      it('disables the button', () => {
-        expect(findApplyButton().attributes('disabled')).toBeDefined();
-      });
-    });
-
-    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();
@@ -211,19 +157,5 @@ describe('GlobalSearchSidebarLanguageFilter', () => {
     it('uses action fetchAllAggregation', () => {
       expect(actionSpies.fetchAllAggregation).toHaveBeenCalled();
     });
-
-    it('clicking ApplyButton calls applyQuery', () => {
-      findForm().vm.$emit('submit', { preventDefault: () => {} });
-
-      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,
-      });
-    });
   });
 });
diff --git a/spec/frontend/search/sidebar/components/merge_requests_filters_spec.js b/spec/frontend/search/sidebar/components/merge_requests_filters_spec.js
new file mode 100644
index 00000000000..0932f8e47d2
--- /dev/null
+++ b/spec/frontend/search/sidebar/components/merge_requests_filters_spec.js
@@ -0,0 +1,28 @@
+import { shallowMount } from '@vue/test-utils';
+import MergeRequestsFilters from '~/search/sidebar/components/merge_requests_filters.vue';
+import StatusFilter from '~/search/sidebar/components/status_filter/index.vue';
+import FiltersTemplate from '~/search/sidebar/components/filters_template.vue';
+
+describe('GlobalSearch MergeRequestsFilters', () => {
+  let wrapper;
+
+  const findStatusFilter = () => wrapper.findComponent(StatusFilter);
+  const findFiltersTemplate = () => wrapper.findComponent(FiltersTemplate);
+
+  const createComponent = () => {
+    wrapper = shallowMount(MergeRequestsFilters);
+  };
+
+  describe('Renders correctly', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+    it('renders ConfidentialityFilter', () => {
+      expect(findStatusFilter().exists()).toBe(true);
+    });
+
+    it('renders FiltersTemplate', () => {
+      expect(findFiltersTemplate().exists()).toBe(true);
+    });
+  });
+});