Add latest changes from gitlab-org/gitlab@master

2 files changed, 143 insertions, 7 deletions

diff --git a/spec/frontend/error_tracking/components/error_tracking_list_spec.js b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
index 6e47d2bd648..776ce589cff 100644
--- a/spec/frontend/error_tracking/components/error_tracking_list_spec.js
+++ b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
@@ -6,8 +6,11 @@ import {
   GlLoadingIcon,
   GlTable,
   GlLink,
-  GlSearchBoxByClick,
+  GlFormInput,
+  GlDropdown,
+  GlDropdownItem,
 } from '@gitlab/ui';
+import createListState from '~/error_tracking/store/list/state';
 import ErrorTrackingList from '~/error_tracking/components/error_tracking_list.vue';
 import errorsList from './list_mock.json';
 
@@ -51,12 +54,13 @@ describe('ErrorTrackingList', () => {
       getErrorList: () => {},
       startPolling: jest.fn(),
       restartPolling: jest.fn().mockName('restartPolling'),
+      addRecentSearch: jest.fn(),
+      loadRecentSearches: jest.fn(),
+      setIndexPath: jest.fn(),
+      clearRecentSearches: jest.fn(),
     };
 
-    const state = {
-      errors: errorsList,
-      loading: true,
-    };
+    const state = createListState();
 
     store = new Vuex.Store({
       modules: {
@@ -90,6 +94,7 @@ describe('ErrorTrackingList', () => {
   describe('results', () => {
     beforeEach(() => {
       store.state.list.loading = false;
+      store.state.list.errors = errorsList;
       mountComponent();
     });
 
@@ -114,7 +119,7 @@ describe('ErrorTrackingList', () => {
     });
 
     describe('filtering', () => {
-      const findSearchBox = () => wrapper.find(GlSearchBoxByClick);
+      const findSearchBox = () => wrapper.find(GlFormInput);
 
       it('shows search box', () => {
         expect(findSearchBox().exists()).toBe(true);
@@ -122,7 +127,9 @@ describe('ErrorTrackingList', () => {
 
       it('makes network request on submit', () => {
         expect(actions.startPolling).toHaveBeenCalledTimes(1);
-        findSearchBox().vm.$emit('submit');
+
+        findSearchBox().trigger('keyup.enter');
+
         expect(actions.startPolling).toHaveBeenCalledTimes(2);
       });
     });
@@ -185,4 +192,51 @@ describe('ErrorTrackingList', () => {
       );
     });
   });
+
+  describe('recent searches', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
+
+    it('shows empty message', () => {
+      store.state.list.recentSearches = [];
+
+      expect(wrapper.find(GlDropdown).text()).toBe("You don't have any recent searches");
+    });
+
+    it('shows items', () => {
+      store.state.list.recentSearches = ['great', 'search'];
+
+      const dropdownItems = wrapper.findAll(GlDropdownItem);
+
+      expect(dropdownItems.length).toBe(3);
+      expect(dropdownItems.at(0).text()).toBe('great');
+      expect(dropdownItems.at(1).text()).toBe('search');
+    });
+
+    describe('clear', () => {
+      const clearRecentButton = () => wrapper.find({ ref: 'clearRecentSearches' });
+
+      it('is hidden when list empty', () => {
+        store.state.list.recentSearches = [];
+
+        expect(clearRecentButton().exists()).toBe(false);
+      });
+
+      it('is visible when list has items', () => {
+        store.state.list.recentSearches = ['some', 'searches'];
+
+        expect(clearRecentButton().exists()).toBe(true);
+        expect(clearRecentButton().text()).toBe('Clear recent searches');
+      });
+
+      it('clears items on click', () => {
+        store.state.list.recentSearches = ['some', 'searches'];
+
+        clearRecentButton().vm.$emit('click');
+
+        expect(actions.clearRecentSearches).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
 });
diff --git a/spec/frontend/error_tracking/store/list/mutation_spec.js b/spec/frontend/error_tracking/store/list/mutation_spec.js
index 6e021185b4d..5e6505e13cd 100644
--- a/spec/frontend/error_tracking/store/list/mutation_spec.js
+++ b/spec/frontend/error_tracking/store/list/mutation_spec.js
@@ -1,5 +1,10 @@
 import mutations from '~/error_tracking/store/list/mutations';
 import * as types from '~/error_tracking/store/list/mutation_types';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
+
+const ADD_RECENT_SEARCH = mutations[types.ADD_RECENT_SEARCH];
+const CLEAR_RECENT_SEARCHES = mutations[types.CLEAR_RECENT_SEARCHES];
+const LOAD_RECENT_SEARCHES = mutations[types.LOAD_RECENT_SEARCHES];
 
 describe('Error tracking mutations', () => {
   describe('SET_ERRORS', () => {
@@ -33,4 +38,81 @@ describe('Error tracking mutations', () => {
       });
     });
   });
+
+  describe('recent searches', () => {
+    useLocalStorageSpy();
+    let state;
+
+    beforeEach(() => {
+      state = {
+        indexPath: '/project/errors.json',
+        recentSearches: [],
+      };
+    });
+
+    describe('ADD_RECENT_SEARCH', () => {
+      it('adds search queries to recentSearches and localStorage', () => {
+        ADD_RECENT_SEARCH(state, 'my issue');
+
+        expect(state.recentSearches).toEqual(['my issue']);
+        expect(localStorage.setItem).toHaveBeenCalledWith(
+          'recent-searches/project/errors.json',
+          '["my issue"]',
+        );
+      });
+
+      it('does not add empty searches', () => {
+        ADD_RECENT_SEARCH(state, '');
+
+        expect(state.recentSearches).toEqual([]);
+        expect(localStorage.setItem).not.toHaveBeenCalled();
+      });
+
+      it('adds new queries to start of the list', () => {
+        state.recentSearches = ['previous', 'searches'];
+
+        ADD_RECENT_SEARCH(state, 'new search');
+
+        expect(state.recentSearches).toEqual(['new search', 'previous', 'searches']);
+      });
+
+      it('limits recentSearches to 5 items', () => {
+        state.recentSearches = [1, 2, 3, 4, 5];
+
+        ADD_RECENT_SEARCH(state, 'new search');
+
+        expect(state.recentSearches).toEqual(['new search', 1, 2, 3, 4]);
+      });
+
+      it('does not add same search query twice', () => {
+        state.recentSearches = ['already', 'searched'];
+
+        ADD_RECENT_SEARCH(state, 'searched');
+
+        expect(state.recentSearches).toEqual(['searched', 'already']);
+      });
+    });
+
+    describe('CLEAR_RECENT_SEARCHES', () => {
+      it('clears recentSearches and localStorage', () => {
+        state.recentSearches = ['first', 'second'];
+
+        CLEAR_RECENT_SEARCHES(state);
+
+        expect(state.recentSearches).toEqual([]);
+        expect(localStorage.removeItem).toHaveBeenCalledWith('recent-searches/project/errors.json');
+      });
+    });
+
+    describe('LOAD_RECENT_SEARCHES', () => {
+      it('loads recent searches from localStorage', () => {
+        jest.spyOn(window.localStorage, 'getItem').mockReturnValue('["first", "second"]');
+
+        LOAD_RECENT_SEARCHES(state);
+
+        expect(state.recentSearches).toEqual(['first', 'second']);
+        expect(localStorage.getItem).toHaveBeenCalledWith('recent-searches/project/errors.json');
+      });
+    });
+  });
 });