Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

3 files changed, 201 insertions, 104 deletions

diff --git a/spec/frontend/search/components/state_filter_spec.js b/spec/frontend/search/components/state_filter_spec.js
deleted file mode 100644
index 26344f2b592..00000000000
--- a/spec/frontend/search/components/state_filter_spec.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import StateFilter from '~/search/state_filter/components/state_filter.vue';
-import {
-  FILTER_STATES,
-  SCOPES,
-  FILTER_STATES_BY_SCOPE,
-  FILTER_TEXT,
-} from '~/search/state_filter/constants';
-import * as urlUtils from '~/lib/utils/url_utility';
-
-jest.mock('~/lib/utils/url_utility', () => ({
-  visitUrl: jest.fn(),
-  setUrlParams: jest.fn(),
-}));
-
-function createComponent(props = { scope: 'issues' }) {
-  return shallowMount(StateFilter, {
-    propsData: {
-      ...props,
-    },
-  });
-}
-
-describe('StateFilter', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = 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('template', () => {
-    describe.each`
-      scope               | showStateDropdown
-      ${'issues'}         | ${true}
-      ${'merge_requests'} | ${true}
-      ${'projects'}       | ${false}
-      ${'milestones'}     | ${false}
-      ${'users'}          | ${false}
-      ${'notes'}          | ${false}
-      ${'wiki_blobs'}     | ${false}
-      ${'blobs'}          | ${false}
-    `(`state dropdown`, ({ scope, showStateDropdown }) => {
-      beforeEach(() => {
-        wrapper = createComponent({ scope });
-      });
-
-      it(`does${showStateDropdown ? '' : ' not'} render when scope is ${scope}`, () => {
-        expect(findGlDropdown().exists()).toBe(showStateDropdown);
-      });
-    });
-
-    describe.each`
-      state                         | label
-      ${FILTER_STATES.ANY.value}    | ${FILTER_TEXT}
-      ${FILTER_STATES.OPEN.value}   | ${FILTER_STATES.OPEN.label}
-      ${FILTER_STATES.CLOSED.value} | ${FILTER_STATES.CLOSED.label}
-      ${FILTER_STATES.MERGED.value} | ${FILTER_STATES.MERGED.label}
-    `(`filter text`, ({ state, label }) => {
-      describe(`when state is ${state}`, () => {
-        beforeEach(() => {
-          wrapper = createComponent({ scope: 'issues', state });
-        });
-
-        it(`sets dropdown label to ${label}`, () => {
-          expect(findGlDropdown().attributes('text')).toBe(label);
-        });
-      });
-    });
-
-    describe('Filter options', () => {
-      it('renders a dropdown item for each filterOption', () => {
-        expect(findDropdownItemsText()).toStrictEqual(
-          FILTER_STATES_BY_SCOPE[SCOPES.ISSUES].map(v => {
-            return v.label;
-          }),
-        );
-      });
-
-      it('clicking a dropdown item calls setUrlParams', () => {
-        const state = FILTER_STATES[Object.keys(FILTER_STATES)[0]].value;
-        firstDropDownItem().vm.$emit('click');
-
-        expect(urlUtils.setUrlParams).toHaveBeenCalledWith({ state });
-      });
-
-      it('clicking a dropdown item calls visitUrl', () => {
-        firstDropDownItem().vm.$emit('click');
-
-        expect(urlUtils.visitUrl).toHaveBeenCalled();
-      });
-    });
-  });
-});
diff --git a/spec/frontend/search/dropdown_filter/components/dropdown_filter_spec.js b/spec/frontend/search/dropdown_filter/components/dropdown_filter_spec.js
new file mode 100644
index 00000000000..4a6b5cebe1c
--- /dev/null
+++ b/spec/frontend/search/dropdown_filter/components/dropdown_filter_spec.js
@@ -0,0 +1,196 @@
+import Vuex from 'vuex';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+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';
+import { MOCK_QUERY } from '../mock_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({
+          [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({
+        [confidentialFilterData.filterParam]: filter,
+      });
+    });
+
+    it('clicking a dropdown item calls visitUrl', () => {
+      firstDropDownItem().vm.$emit('click');
+
+      expect(urlUtils.visitUrl).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/frontend/search/dropdown_filter/mock_data.js b/spec/frontend/search/dropdown_filter/mock_data.js
new file mode 100644
index 00000000000..f11ab3d9951
--- /dev/null
+++ b/spec/frontend/search/dropdown_filter/mock_data.js
@@ -0,0 +1,5 @@
+export const MOCK_QUERY = {
+  scope: 'issues',
+  state: 'all',
+  confidential: null,
+};