1 files changed, 43 insertions, 17 deletions

diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
index eded5b87abc..05508d14209 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
@@ -13,7 +13,7 @@ import { SortDirection } from '~/vue_shared/components/filtered_search_bar/const
 import RecentSearchesStore from '~/filtered_search/stores/recent_searches_store';
 import RecentSearchesService from '~/filtered_search/services/recent_searches_service';
 
-import { mockAvailableTokens, mockSortOptions } from './mock_data';
+import { mockAvailableTokens, mockSortOptions, mockHistoryItems } from './mock_data';
 
 const createComponent = ({
   namespace = 'gitlab-org/gitlab-test',
@@ -53,11 +53,17 @@ describe('FilteredSearchBarRoot', () => {
 
   describe('computed', () => {
     describe('tokenSymbols', () => {
-      it('returns array of map containing type and symbols from `tokens` prop', () => {
+      it('returns a map containing type and symbols from `tokens` prop', () => {
         expect(wrapper.vm.tokenSymbols).toEqual({ author_username: '@' });
       });
     });
 
+    describe('tokenTitles', () => {
+      it('returns a map containing type and title from `tokens` prop', () => {
+        expect(wrapper.vm.tokenTitles).toEqual({ author_username: 'Author' });
+      });
+    });
+
     describe('sortDirectionIcon', () => {
       it('returns string "sort-lowest" when `selectedSortDirection` is "ascending"', () => {
         wrapper.setData({
@@ -133,14 +139,6 @@ describe('FilteredSearchBarRoot', () => {
       });
     });
 
-    describe('getRecentSearches', () => {
-      it('returns array of strings representing recent searches', () => {
-        wrapper.vm.recentSearchesStore.setRecentSearches(['foo']);
-
-        expect(wrapper.vm.getRecentSearches()).toEqual(['foo']);
-      });
-    });
-
     describe('handleSortOptionClick', () => {
       it('emits component event `onSort` with selected sort by value', () => {
         wrapper.vm.handleSortOptionClick(mockSortOptions[1]);
@@ -172,6 +170,27 @@ describe('FilteredSearchBarRoot', () => {
       });
     });
 
+    describe('handleHistoryItemSelected', () => {
+      it('emits `onFilter` event with provided filters param', () => {
+        wrapper.vm.handleHistoryItemSelected(mockHistoryItems[0]);
+
+        expect(wrapper.emitted('onFilter')[0]).toEqual([mockHistoryItems[0]]);
+      });
+    });
+
+    describe('handleClearHistory', () => {
+      it('clears search history from recent searches store', () => {
+        jest.spyOn(wrapper.vm.recentSearchesStore, 'setRecentSearches').mockReturnValue([]);
+        jest.spyOn(wrapper.vm.recentSearchesService, 'save');
+
+        wrapper.vm.handleClearHistory();
+
+        expect(wrapper.vm.recentSearchesStore.setRecentSearches).toHaveBeenCalledWith([]);
+        expect(wrapper.vm.recentSearchesService.save).toHaveBeenCalledWith([]);
+        expect(wrapper.vm.recentSearches).toEqual([]);
+      });
+    });
+
     describe('handleFilterSubmit', () => {
       const mockFilters = [
         {
@@ -186,14 +205,11 @@ describe('FilteredSearchBarRoot', () => {
 
       it('calls `recentSearchesStore.addRecentSearch` with serialized value of provided `filters` param', () => {
         jest.spyOn(wrapper.vm.recentSearchesStore, 'addRecentSearch');
-        // jest.spyOn(wrapper.vm.recentSearchesService, 'save');
 
         wrapper.vm.handleFilterSubmit(mockFilters);
 
         return wrapper.vm.recentSearchesPromise.then(() => {
-          expect(wrapper.vm.recentSearchesStore.addRecentSearch).toHaveBeenCalledWith(
-            'author_username:=@root foo',
-          );
+          expect(wrapper.vm.recentSearchesStore.addRecentSearch).toHaveBeenCalledWith(mockFilters);
         });
       });
 
@@ -203,9 +219,17 @@ describe('FilteredSearchBarRoot', () => {
         wrapper.vm.handleFilterSubmit(mockFilters);
 
         return wrapper.vm.recentSearchesPromise.then(() => {
-          expect(wrapper.vm.recentSearchesService.save).toHaveBeenCalledWith([
-            'author_username:=@root foo',
-          ]);
+          expect(wrapper.vm.recentSearchesService.save).toHaveBeenCalledWith([mockFilters]);
+        });
+      });
+
+      it('sets `recentSearches` data prop with array of searches', () => {
+        jest.spyOn(wrapper.vm.recentSearchesService, 'save');
+
+        wrapper.vm.handleFilterSubmit(mockFilters);
+
+        return wrapper.vm.recentSearchesPromise.then(() => {
+          expect(wrapper.vm.recentSearches).toEqual([mockFilters]);
         });
       });
 
@@ -222,6 +246,7 @@ describe('FilteredSearchBarRoot', () => {
       wrapper.setData({
         selectedSortOption: mockSortOptions[0],
         selectedSortDirection: SortDirection.descending,
+        recentSearches: mockHistoryItems,
       });
 
       return wrapper.vm.$nextTick();
@@ -232,6 +257,7 @@ describe('FilteredSearchBarRoot', () => {
 
       expect(glFilteredSearchEl.props('placeholder')).toBe('Filter requirements');
       expect(glFilteredSearchEl.props('availableTokens')).toEqual(mockAvailableTokens);
+      expect(glFilteredSearchEl.props('historyItems')).toEqual(mockHistoryItems);
     });
 
     it('renders sort dropdown component', () => {