4 files changed, 102 insertions, 24 deletions

diff --git a/spec/frontend/search/sidebar/components/app_spec.js b/spec/frontend/search/sidebar/components/app_spec.js
index b93527c1fe9..3bea0748c47 100644
--- a/spec/frontend/search/sidebar/components/app_spec.js
+++ b/spec/frontend/search/sidebar/components/app_spec.js
@@ -1,13 +1,13 @@
 import { GlButton, GlLink } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 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);
+Vue.use(Vuex);
 
 describe('GlobalSearchSidebar', () => {
   let wrapper;
@@ -20,28 +20,26 @@ describe('GlobalSearchSidebar', () => {
   const createComponent = (initialState) => {
     const store = new Vuex.Store({
       state: {
-        query: MOCK_QUERY,
+        urlQuery: 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);
+  const findStatusFilter = () => wrapper.findComponent(StatusFilter);
+  const findConfidentialityFilter = () => wrapper.findComponent(ConfidentialityFilter);
+  const findApplyButton = () => wrapper.findComponent(GlButton);
+  const findResetLinkButton = () => wrapper.findComponent(GlLink);
 
   describe('template', () => {
     beforeEach(() => {
@@ -61,10 +59,32 @@ describe('GlobalSearchSidebar', () => {
     });
   });
 
+  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('ResetLinkButton', () => {
     describe('with no filter selected', () => {
       beforeEach(() => {
-        createComponent({ query: {} });
+        createComponent({ urlQuery: {} });
       });
 
       it('does not render', () => {
@@ -74,10 +94,20 @@ describe('GlobalSearchSidebar', () => {
 
     describe('with filter selected', () => {
       beforeEach(() => {
-        createComponent();
+        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 when a filter selected', () => {
+      it('does render', () => {
         expect(findResetLinkButton().exists()).toBe(true);
       });
     });
diff --git a/spec/frontend/search/store/actions_spec.js b/spec/frontend/search/store/actions_spec.js
index b50248bb295..5f8cee8160f 100644
--- a/spec/frontend/search/store/actions_spec.js
+++ b/spec/frontend/search/store/actions_spec.js
@@ -5,7 +5,11 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import * as actions from '~/search/store/actions';
-import { GROUPS_LOCAL_STORAGE_KEY, PROJECTS_LOCAL_STORAGE_KEY } from '~/search/store/constants';
+import {
+  GROUPS_LOCAL_STORAGE_KEY,
+  PROJECTS_LOCAL_STORAGE_KEY,
+  SIDEBAR_PARAMS,
+} from '~/search/store/constants';
 import * as types from '~/search/store/mutation_types';
 import createState from '~/search/store/state';
 import * as storeUtils from '~/search/store/utils';
@@ -153,15 +157,24 @@ describe('Global Search Store Actions', () => {
     });
   });
 
-  describe('setQuery', () => {
-    const payload = { key: 'key1', value: 'value1' };
+  describe.each`
+    payload                                      | isDirty  | isDirtyMutation
+    ${{ key: SIDEBAR_PARAMS[0], value: 'test' }} | ${false} | ${[{ type: types.SET_SIDEBAR_DIRTY, payload: false }]}
+    ${{ key: SIDEBAR_PARAMS[0], value: 'test' }} | ${true}  | ${[{ type: types.SET_SIDEBAR_DIRTY, payload: true }]}
+    ${{ key: SIDEBAR_PARAMS[1], value: 'test' }} | ${false} | ${[{ type: types.SET_SIDEBAR_DIRTY, payload: false }]}
+    ${{ key: SIDEBAR_PARAMS[1], value: 'test' }} | ${true}  | ${[{ type: types.SET_SIDEBAR_DIRTY, payload: true }]}
+    ${{ key: 'non-sidebar', value: 'test' }}     | ${false} | ${[]}
+    ${{ key: 'non-sidebar', value: 'test' }}     | ${true}  | ${[]}
+  `('setQuery', ({ payload, isDirty, isDirtyMutation }) => {
+    describe(`when filter param is ${payload.key} and utils.isSidebarDirty returns ${isDirty}`, () => {
+      const expectedMutations = [{ type: types.SET_QUERY, payload }].concat(isDirtyMutation);
 
-    it('calls the SET_QUERY mutation', () => {
-      return testAction({
-        action: actions.setQuery,
-        payload,
-        state,
-        expectedMutations: [{ type: types.SET_QUERY, payload }],
+      beforeEach(() => {
+        storeUtils.isSidebarDirty = jest.fn().mockReturnValue(isDirty);
+      });
+
+      it(`should dispatch the correct mutations`, () => {
+        return testAction({ action: actions.setQuery, payload, state, expectedMutations });
       });
     });
   });
diff --git a/spec/frontend/search/store/mutations_spec.js b/spec/frontend/search/store/mutations_spec.js
index a60718a972d..25f9b692955 100644
--- a/spec/frontend/search/store/mutations_spec.js
+++ b/spec/frontend/search/store/mutations_spec.js
@@ -72,6 +72,16 @@ describe('Global Search Store Mutations', () => {
     });
   });
 
+  describe('SET_SIDEBAR_DIRTY', () => {
+    const value = true;
+
+    it('sets sidebarDirty to the value', () => {
+      mutations[types.SET_SIDEBAR_DIRTY](state, value);
+
+      expect(state.sidebarDirty).toBe(value);
+    });
+  });
+
   describe('LOAD_FREQUENT_ITEMS', () => {
     it('sets frequentItems[key] to data', () => {
       const payload = { key: 'test-key', data: [1, 2, 3] };
diff --git a/spec/frontend/search/store/utils_spec.js b/spec/frontend/search/store/utils_spec.js
index bcdad9f89dd..20d764190b1 100644
--- a/spec/frontend/search/store/utils_spec.js
+++ b/spec/frontend/search/store/utils_spec.js
@@ -1,6 +1,11 @@
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
-import { MAX_FREQUENCY } from '~/search/store/constants';
-import { loadDataFromLS, setFrequentItemToLS, mergeById } from '~/search/store/utils';
+import { MAX_FREQUENCY, SIDEBAR_PARAMS } from '~/search/store/constants';
+import {
+  loadDataFromLS,
+  setFrequentItemToLS,
+  mergeById,
+  isSidebarDirty,
+} from '~/search/store/utils';
 import {
   MOCK_LS_KEY,
   MOCK_GROUPS,
@@ -216,4 +221,24 @@ describe('Global Search Store Utils', () => {
       });
     });
   });
+
+  describe.each`
+    description            | currentQuery                                                          | urlQuery                                                              | isDirty
+    ${'identical'}         | ${{ [SIDEBAR_PARAMS[0]]: 'default', [SIDEBAR_PARAMS[1]]: 'default' }} | ${{ [SIDEBAR_PARAMS[0]]: 'default', [SIDEBAR_PARAMS[1]]: 'default' }} | ${false}
+    ${'different'}         | ${{ [SIDEBAR_PARAMS[0]]: 'default', [SIDEBAR_PARAMS[1]]: 'new' }}     | ${{ [SIDEBAR_PARAMS[0]]: 'default', [SIDEBAR_PARAMS[1]]: 'default' }} | ${true}
+    ${'null/undefined'}    | ${{ [SIDEBAR_PARAMS[0]]: null, [SIDEBAR_PARAMS[1]]: null }}           | ${{ [SIDEBAR_PARAMS[0]]: undefined, [SIDEBAR_PARAMS[1]]: undefined }} | ${false}
+    ${'updated/undefined'} | ${{ [SIDEBAR_PARAMS[0]]: 'new', [SIDEBAR_PARAMS[1]]: 'new' }}         | ${{ [SIDEBAR_PARAMS[0]]: undefined, [SIDEBAR_PARAMS[1]]: undefined }} | ${true}
+  `('isSidebarDirty', ({ description, currentQuery, urlQuery, isDirty }) => {
+    describe(`with ${description} sidebar query data`, () => {
+      let res;
+
+      beforeEach(() => {
+        res = isSidebarDirty(currentQuery, urlQuery);
+      });
+
+      it(`returns ${isDirty}`, () => {
+        expect(res).toStrictEqual(isDirty);
+      });
+    });
+  });
 });