Add latest changes from gitlab-org/gitlab@master

3 files changed, 141 insertions, 198 deletions

diff --git a/spec/frontend/search/dropdown_filter/components/dropdown_filter_spec.js b/spec/frontend/search/dropdown_filter/components/dropdown_filter_spec.js
deleted file mode 100644
index f795a23404e..00000000000
--- a/spec/frontend/search/dropdown_filter/components/dropdown_filter_spec.js
+++ /dev/null
@@ -1,198 +0,0 @@
-import Vuex from 'vuex';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { MOCK_QUERY } from 'jest/search/mock_data';
-import * as urlUtils from '~/lib/utils/url_utility';
-import initStore from '~/search/store';
-import DropdownFilter from '~/search/dropdown_filter/components/dropdown_filter.vue';
-import stateFilterData from '~/search/dropdown_filter/constants/state_filter_data';
-import confidentialFilterData from '~/search/dropdown_filter/constants/confidential_filter_data';
-
-jest.mock('~/lib/utils/url_utility', () => ({
-  visitUrl: jest.fn(),
-  setUrlParams: jest.fn(),
-}));
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('DropdownFilter', () => {
-  let wrapper;
-  let store;
-
-  const createStore = options => {
-    store = initStore({ query: MOCK_QUERY, ...options });
-  };
-
-  const createComponent = (props = { filterData: stateFilterData }) => {
-    wrapper = shallowMount(DropdownFilter, {
-      localVue,
-      store,
-      propsData: {
-        ...props,
-      },
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-    store = null;
-  });
-
-  const findGlDropdown = () => wrapper.find(GlDropdown);
-  const findGlDropdownItems = () => findGlDropdown().findAll(GlDropdownItem);
-  const findDropdownItemsText = () => findGlDropdownItems().wrappers.map(w => w.text());
-  const firstDropDownItem = () => findGlDropdownItems().at(0);
-
-  describe('StatusFilter', () => {
-    describe('template', () => {
-      describe.each`
-        scope               | showDropdown
-        ${'issues'}         | ${true}
-        ${'merge_requests'} | ${true}
-        ${'projects'}       | ${false}
-        ${'milestones'}     | ${false}
-        ${'users'}          | ${false}
-        ${'notes'}          | ${false}
-        ${'wiki_blobs'}     | ${false}
-        ${'blobs'}          | ${false}
-      `(`dropdown`, ({ scope, showDropdown }) => {
-        beforeEach(() => {
-          createStore({ query: { ...MOCK_QUERY, scope } });
-          createComponent();
-        });
-
-        it(`does${showDropdown ? '' : ' not'} render when scope is ${scope}`, () => {
-          expect(findGlDropdown().exists()).toBe(showDropdown);
-        });
-      });
-
-      describe.each`
-        initialFilter                           | label
-        ${stateFilterData.filters.ANY.value}    | ${`Any ${stateFilterData.header}`}
-        ${stateFilterData.filters.OPEN.value}   | ${stateFilterData.filters.OPEN.label}
-        ${stateFilterData.filters.CLOSED.value} | ${stateFilterData.filters.CLOSED.label}
-      `(`filter text`, ({ initialFilter, label }) => {
-        describe(`when initialFilter is ${initialFilter}`, () => {
-          beforeEach(() => {
-            createStore({ query: { ...MOCK_QUERY, [stateFilterData.filterParam]: initialFilter } });
-            createComponent();
-          });
-
-          it(`sets dropdown label to ${label}`, () => {
-            expect(findGlDropdown().attributes('text')).toBe(label);
-          });
-        });
-      });
-    });
-
-    describe('Filter options', () => {
-      beforeEach(() => {
-        createStore();
-        createComponent();
-      });
-
-      it('renders a dropdown item for each filterOption', () => {
-        expect(findDropdownItemsText()).toStrictEqual(
-          stateFilterData.filterByScope[stateFilterData.scopes.ISSUES].map(v => {
-            return v.label;
-          }),
-        );
-      });
-
-      it('clicking a dropdown item calls setUrlParams', () => {
-        const filter = stateFilterData.filters[Object.keys(stateFilterData.filters)[0]].value;
-        firstDropDownItem().vm.$emit('click');
-
-        expect(urlUtils.setUrlParams).toHaveBeenCalledWith({
-          page: null,
-          [stateFilterData.filterParam]: filter,
-        });
-      });
-
-      it('clicking a dropdown item calls visitUrl', () => {
-        firstDropDownItem().vm.$emit('click');
-
-        expect(urlUtils.visitUrl).toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe('ConfidentialFilter', () => {
-    describe('template', () => {
-      describe.each`
-        scope               | showDropdown
-        ${'issues'}         | ${true}
-        ${'merge_requests'} | ${false}
-        ${'projects'}       | ${false}
-        ${'milestones'}     | ${false}
-        ${'users'}          | ${false}
-        ${'notes'}          | ${false}
-        ${'wiki_blobs'}     | ${false}
-        ${'blobs'}          | ${false}
-      `(`dropdown`, ({ scope, showDropdown }) => {
-        beforeEach(() => {
-          createStore({ query: { ...MOCK_QUERY, scope } });
-          createComponent({ filterData: confidentialFilterData });
-        });
-
-        it(`does${showDropdown ? '' : ' not'} render when scope is ${scope}`, () => {
-          expect(findGlDropdown().exists()).toBe(showDropdown);
-        });
-      });
-
-      describe.each`
-        initialFilter                                            | label
-        ${confidentialFilterData.filters.ANY.value}              | ${`Any ${confidentialFilterData.header}`}
-        ${confidentialFilterData.filters.CONFIDENTIAL.value}     | ${confidentialFilterData.filters.CONFIDENTIAL.label}
-        ${confidentialFilterData.filters.NOT_CONFIDENTIAL.value} | ${confidentialFilterData.filters.NOT_CONFIDENTIAL.label}
-      `(`filter text`, ({ initialFilter, label }) => {
-        describe(`when initialFilter is ${initialFilter}`, () => {
-          beforeEach(() => {
-            createStore({
-              query: { ...MOCK_QUERY, [confidentialFilterData.filterParam]: initialFilter },
-            });
-            createComponent({ filterData: confidentialFilterData });
-          });
-
-          it(`sets dropdown label to ${label}`, () => {
-            expect(findGlDropdown().attributes('text')).toBe(label);
-          });
-        });
-      });
-    });
-  });
-
-  describe('Filter options', () => {
-    beforeEach(() => {
-      createStore();
-      createComponent({ filterData: confidentialFilterData });
-    });
-
-    it('renders a dropdown item for each filterOption', () => {
-      expect(findDropdownItemsText()).toStrictEqual(
-        confidentialFilterData.filterByScope[confidentialFilterData.scopes.ISSUES].map(v => {
-          return v.label;
-        }),
-      );
-    });
-
-    it('clicking a dropdown item calls setUrlParams', () => {
-      const filter =
-        confidentialFilterData.filters[Object.keys(confidentialFilterData.filters)[0]].value;
-      firstDropDownItem().vm.$emit('click');
-
-      expect(urlUtils.setUrlParams).toHaveBeenCalledWith({
-        page: null,
-        [confidentialFilterData.filterParam]: filter,
-      });
-    });
-
-    it('clicking a dropdown item calls visitUrl', () => {
-      firstDropDownItem().vm.$emit('click');
-
-      expect(urlUtils.visitUrl).toHaveBeenCalled();
-    });
-  });
-});
diff --git a/spec/frontend/search/sidebar/components/app_spec.js b/spec/frontend/search/sidebar/components/app_spec.js
new file mode 100644
index 00000000000..c68be10f664
--- /dev/null
+++ b/spec/frontend/search/sidebar/components/app_spec.js
@@ -0,0 +1,99 @@
+import Vuex from 'vuex';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlButton, GlLink } from '@gitlab/ui';
+import { MOCK_QUERY } from 'jest/search/mock_data';
+import GlobalSearchSidebar from '~/search/sidebar/components/app.vue';
+import ConfidentialityFilter from '~/search/sidebar/components/confidentiality_filter.vue';
+import StatusFilter from '~/search/sidebar/components/status_filter.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('GlobalSearchSidebar', () => {
+  let wrapper;
+
+  const actionSpies = {
+    applyQuery: jest.fn(),
+    resetQuery: jest.fn(),
+  };
+
+  const createComponent = initialState => {
+    const store = new Vuex.Store({
+      state: {
+        query: MOCK_QUERY,
+        ...initialState,
+      },
+      actions: actionSpies,
+    });
+
+    wrapper = shallowMount(GlobalSearchSidebar, {
+      localVue,
+      store,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findSidebarForm = () => wrapper.find('form');
+  const findStatusFilter = () => wrapper.find(StatusFilter);
+  const findConfidentialityFilter = () => wrapper.find(ConfidentialityFilter);
+  const findApplyButton = () => wrapper.find(GlButton);
+  const findResetLinkButton = () => wrapper.find(GlLink);
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders StatusFilter always', () => {
+      expect(findStatusFilter().exists()).toBe(true);
+    });
+
+    it('renders ConfidentialityFilter always', () => {
+      expect(findConfidentialityFilter().exists()).toBe(true);
+    });
+
+    it('renders ApplyButton always', () => {
+      expect(findApplyButton().exists()).toBe(true);
+    });
+
+    describe('ResetLinkButton', () => {
+      describe('with no filter selected', () => {
+        beforeEach(() => {
+          createComponent({ query: {} });
+        });
+
+        it('does not render', () => {
+          expect(findResetLinkButton().exists()).toBe(false);
+        });
+      });
+
+      describe('with filter selected', () => {
+        it('does render when a filter selected', () => {
+          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();
+    });
+  });
+});
diff --git a/spec/frontend/search/store/actions_spec.js b/spec/frontend/search/store/actions_spec.js
index 0bab4ce17a6..35d97c7dcb1 100644
--- a/spec/frontend/search/store/actions_spec.js
+++ b/spec/frontend/search/store/actions_spec.js
@@ -2,6 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import * as actions from '~/search/store/actions';
 import * as types from '~/search/store/mutation_types';
+import * as urlUtils from '~/lib/utils/url_utility';
 import state from '~/search/store/state';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
@@ -42,6 +43,47 @@ describe('Global Search Store Actions', () => {
       });
     });
   });
+
+  describe('setQuery', () => {
+    const payload = { key: 'key1', value: 'value1' };
+
+    it('calls the SET_QUERY mutation', done => {
+      testAction(actions.setQuery, payload, state, [{ type: types.SET_QUERY, payload }], [], done);
+    });
+  });
+
+  describe('applyQuery', () => {
+    beforeEach(() => {
+      urlUtils.setUrlParams = jest.fn();
+      urlUtils.visitUrl = jest.fn();
+    });
+
+    it('calls visitUrl and setParams with the state.query', () => {
+      testAction(actions.applyQuery, null, state, [], [], () => {
+        expect(urlUtils.setUrlParams).toHaveBeenCalledWith({ ...state.query, page: null });
+        expect(urlUtils.visitUrl).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('resetQuery', () => {
+    beforeEach(() => {
+      urlUtils.setUrlParams = jest.fn();
+      urlUtils.visitUrl = jest.fn();
+    });
+
+    it('calls visitUrl and setParams with empty values', () => {
+      testAction(actions.resetQuery, null, state, [], [], () => {
+        expect(urlUtils.setUrlParams).toHaveBeenCalledWith({
+          ...state.query,
+          page: null,
+          state: null,
+          confidential: null,
+        });
+        expect(urlUtils.visitUrl).toHaveBeenCalled();
+      });
+    });
+  });
 });
 
 describe('setQuery', () => {