Merge branch '27262-issue-recent-searches' into 'master'

Recent search history for issues

Closes #27262

See merge request !10324

4 files changed, 284 insertions, 3 deletions

diff --git a/spec/javascripts/filtered_search/components/recent_searches_dropdown_content_spec.js b/spec/javascripts/filtered_search/components/recent_searches_dropdown_content_spec.js
new file mode 100644
index 00000000000..2722882375f
--- /dev/null
+++ b/spec/javascripts/filtered_search/components/recent_searches_dropdown_content_spec.js
@@ -0,0 +1,166 @@
+import Vue from 'vue';
+import eventHub from '~/filtered_search/event_hub';
+import RecentSearchesDropdownContent from '~/filtered_search/components/recent_searches_dropdown_content';
+
+const createComponent = (propsData) => {
+  const Component = Vue.extend(RecentSearchesDropdownContent);
+
+  return new Component({
+    el: document.createElement('div'),
+    propsData,
+  });
+};
+
+// Remove all the newlines and whitespace from the formatted markup
+const trimMarkupWhitespace = text => text.replace(/(\n|\s)+/gm, ' ').trim();
+
+describe('RecentSearchesDropdownContent', () => {
+  const propsDataWithoutItems = {
+    items: [],
+  };
+  const propsDataWithItems = {
+    items: [
+      'foo',
+      'author:@root label:~foo bar',
+    ],
+  };
+
+  let vm;
+  afterEach(() => {
+    if (vm) {
+      vm.$destroy();
+    }
+  });
+
+  describe('with no items', () => {
+    let el;
+
+    beforeEach(() => {
+      vm = createComponent(propsDataWithoutItems);
+      el = vm.$el;
+    });
+
+    it('should render empty state', () => {
+      expect(el.querySelector('.dropdown-info-note')).toBeDefined();
+
+      const items = el.querySelectorAll('.filtered-search-history-dropdown-item');
+      expect(items.length).toEqual(propsDataWithoutItems.items.length);
+    });
+  });
+
+  describe('with items', () => {
+    let el;
+
+    beforeEach(() => {
+      vm = createComponent(propsDataWithItems);
+      el = vm.$el;
+    });
+
+    it('should render clear recent searches button', () => {
+      expect(el.querySelector('.filtered-search-history-clear-button')).toBeDefined();
+    });
+
+    it('should render recent search items', () => {
+      const items = el.querySelectorAll('.filtered-search-history-dropdown-item');
+      expect(items.length).toEqual(propsDataWithItems.items.length);
+
+      expect(trimMarkupWhitespace(items[0].querySelector('.filtered-search-history-dropdown-search-token').textContent)).toEqual('foo');
+
+      const item1Tokens = items[1].querySelectorAll('.filtered-search-history-dropdown-token');
+      expect(item1Tokens.length).toEqual(2);
+      expect(item1Tokens[0].querySelector('.name').textContent).toEqual('author:');
+      expect(item1Tokens[0].querySelector('.value').textContent).toEqual('@root');
+      expect(item1Tokens[1].querySelector('.name').textContent).toEqual('label:');
+      expect(item1Tokens[1].querySelector('.value').textContent).toEqual('~foo');
+      expect(trimMarkupWhitespace(items[1].querySelector('.filtered-search-history-dropdown-search-token').textContent)).toEqual('bar');
+    });
+  });
+
+  describe('computed', () => {
+    describe('processedItems', () => {
+      it('with items', () => {
+        vm = createComponent(propsDataWithItems);
+        const processedItems = vm.processedItems;
+
+        expect(processedItems.length).toEqual(2);
+
+        expect(processedItems[0].text).toEqual(propsDataWithItems.items[0]);
+        expect(processedItems[0].tokens).toEqual([]);
+        expect(processedItems[0].searchToken).toEqual('foo');
+
+        expect(processedItems[1].text).toEqual(propsDataWithItems.items[1]);
+        expect(processedItems[1].tokens.length).toEqual(2);
+        expect(processedItems[1].tokens[0].prefix).toEqual('author:');
+        expect(processedItems[1].tokens[0].suffix).toEqual('@root');
+        expect(processedItems[1].tokens[1].prefix).toEqual('label:');
+        expect(processedItems[1].tokens[1].suffix).toEqual('~foo');
+        expect(processedItems[1].searchToken).toEqual('bar');
+      });
+
+      it('with no items', () => {
+        vm = createComponent(propsDataWithoutItems);
+        const processedItems = vm.processedItems;
+
+        expect(processedItems.length).toEqual(0);
+      });
+    });
+
+    describe('hasItems', () => {
+      it('with items', () => {
+        vm = createComponent(propsDataWithItems);
+        const hasItems = vm.hasItems;
+        expect(hasItems).toEqual(true);
+      });
+
+      it('with no items', () => {
+        vm = createComponent(propsDataWithoutItems);
+        const hasItems = vm.hasItems;
+        expect(hasItems).toEqual(false);
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('onItemActivated', () => {
+      let onRecentSearchesItemSelectedSpy;
+
+      beforeEach(() => {
+        onRecentSearchesItemSelectedSpy = jasmine.createSpy('spy');
+        eventHub.$on('recentSearchesItemSelected', onRecentSearchesItemSelectedSpy);
+
+        vm = createComponent(propsDataWithItems);
+      });
+
+      afterEach(() => {
+        eventHub.$off('recentSearchesItemSelected', onRecentSearchesItemSelectedSpy);
+      });
+
+      it('emits event', () => {
+        expect(onRecentSearchesItemSelectedSpy).not.toHaveBeenCalled();
+        vm.onItemActivated('something');
+        expect(onRecentSearchesItemSelectedSpy).toHaveBeenCalledWith('something');
+      });
+    });
+
+    describe('onRequestClearRecentSearches', () => {
+      let onRequestClearRecentSearchesSpy;
+
+      beforeEach(() => {
+        onRequestClearRecentSearchesSpy = jasmine.createSpy('spy');
+        eventHub.$on('requestClearRecentSearches', onRequestClearRecentSearchesSpy);
+
+        vm = createComponent(propsDataWithItems);
+      });
+
+      afterEach(() => {
+        eventHub.$off('requestClearRecentSearches', onRequestClearRecentSearchesSpy);
+      });
+
+      it('emits event', () => {
+        expect(onRequestClearRecentSearchesSpy).not.toHaveBeenCalled();
+        vm.onRequestClearRecentSearches({ stopPropagation: () => {} });
+        expect(onRequestClearRecentSearchesSpy).toHaveBeenCalled();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/filtered_search/filtered_search_manager_spec.js b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
index 5f7c05e9014..97af681429b 100644
--- a/spec/javascripts/filtered_search/filtered_search_manager_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
@@ -29,7 +29,7 @@ const FilteredSearchSpecHelper = require('../helpers/filtered_search_spec_helper
 
     beforeEach(() => {
       setFixtures(`
-        <div class="filtered-search-input-container">
+        <div class="filtered-search-box">
           <form>
             <ul class="tokens-container list-unstyled">
               ${FilteredSearchSpecHelper.createInputHTML(placeholder)}
@@ -264,12 +264,12 @@ const FilteredSearchSpecHelper = require('../helpers/filtered_search_spec_helper
     describe('toggleInputContainerFocus', () => {
       it('toggles on focus', () => {
         input.focus();
-        expect(document.querySelector('.filtered-search-input-container').classList.contains('focus')).toEqual(true);
+        expect(document.querySelector('.filtered-search-box').classList.contains('focus')).toEqual(true);
       });
 
       it('toggles on blur', () => {
         input.blur();
-        expect(document.querySelector('.filtered-search-input-container').classList.contains('focus')).toEqual(false);
+        expect(document.querySelector('.filtered-search-box').classList.contains('focus')).toEqual(false);
       });
     });
   });
diff --git a/spec/javascripts/filtered_search/services/recent_searches_service_spec.js b/spec/javascripts/filtered_search/services/recent_searches_service_spec.js
new file mode 100644
index 00000000000..2a58fb3a7df
--- /dev/null
+++ b/spec/javascripts/filtered_search/services/recent_searches_service_spec.js
@@ -0,0 +1,56 @@
+import RecentSearchesService from '~/filtered_search/services/recent_searches_service';
+
+describe('RecentSearchesService', () => {
+  let service;
+
+  beforeEach(() => {
+    service = new RecentSearchesService();
+    window.localStorage.removeItem(service.localStorageKey);
+  });
+
+  describe('fetch', () => {
+    it('should default to empty array', (done) => {
+      const fetchItemsPromise = service.fetch();
+
+      fetchItemsPromise
+        .then((items) => {
+          expect(items).toEqual([]);
+          done();
+        })
+        .catch((err) => {
+          done.fail('Shouldn\'t reject with empty localStorage key', err);
+        });
+    });
+
+    it('should reject when unable to parse', (done) => {
+      window.localStorage.setItem(service.localStorageKey, 'fail');
+      const fetchItemsPromise = service.fetch();
+
+      fetchItemsPromise
+        .catch(() => {
+          done();
+        });
+    });
+
+    it('should return items from localStorage', (done) => {
+      window.localStorage.setItem(service.localStorageKey, '["foo", "bar"]');
+      const fetchItemsPromise = service.fetch();
+
+      fetchItemsPromise
+        .then((items) => {
+          expect(items).toEqual(['foo', 'bar']);
+          done();
+        });
+    });
+  });
+
+  describe('setRecentSearches', () => {
+    it('should save things in localStorage', () => {
+      const items = ['foo', 'bar'];
+      service.save(items);
+      const newLocalStorageValue =
+        window.localStorage.getItem(service.localStorageKey);
+      expect(JSON.parse(newLocalStorageValue)).toEqual(items);
+    });
+  });
+});
diff --git a/spec/javascripts/filtered_search/stores/recent_searches_store_spec.js b/spec/javascripts/filtered_search/stores/recent_searches_store_spec.js
new file mode 100644
index 00000000000..1eebc6f2367
--- /dev/null
+++ b/spec/javascripts/filtered_search/stores/recent_searches_store_spec.js
@@ -0,0 +1,59 @@
+import RecentSearchesStore from '~/filtered_search/stores/recent_searches_store';
+
+describe('RecentSearchesStore', () => {
+  let store;
+
+  beforeEach(() => {
+    store = new RecentSearchesStore();
+  });
+
+  describe('addRecentSearch', () => {
+    it('should add to the front of the list', () => {
+      store.addRecentSearch('foo');
+      store.addRecentSearch('bar');
+
+      expect(store.state.recentSearches).toEqual(['bar', 'foo']);
+    });
+
+    it('should deduplicate', () => {
+      store.addRecentSearch('foo');
+      store.addRecentSearch('bar');
+      store.addRecentSearch('foo');
+
+      expect(store.state.recentSearches).toEqual(['foo', 'bar']);
+    });
+
+    it('only keeps track of 5 items', () => {
+      store.addRecentSearch('1');
+      store.addRecentSearch('2');
+      store.addRecentSearch('3');
+      store.addRecentSearch('4');
+      store.addRecentSearch('5');
+      store.addRecentSearch('6');
+      store.addRecentSearch('7');
+
+      expect(store.state.recentSearches).toEqual(['7', '6', '5', '4', '3']);
+    });
+  });
+
+  describe('setRecentSearches', () => {
+    it('should override list', () => {
+      store.setRecentSearches([
+        'foo',
+        'bar',
+      ]);
+      store.setRecentSearches([
+        'baz',
+        'qux',
+      ]);
+
+      expect(store.state.recentSearches).toEqual(['baz', 'qux']);
+    });
+
+    it('only keeps track of 5 items', () => {
+      store.setRecentSearches(['1', '2', '3', '4', '5', '6', '7']);
+
+      expect(store.state.recentSearches).toEqual(['1', '2', '3', '4', '5']);
+    });
+  });
+});