Add latest changes from gitlab-org/gitlab@master

5 files changed, 118 insertions, 43 deletions

diff --git a/spec/frontend/search/store/getters_spec.js b/spec/frontend/search/store/getters_spec.js
new file mode 100644
index 00000000000..081e6a986eb
--- /dev/null
+++ b/spec/frontend/search/store/getters_spec.js
@@ -0,0 +1,32 @@
+import { GROUPS_LOCAL_STORAGE_KEY, PROJECTS_LOCAL_STORAGE_KEY } from '~/search/store/constants';
+import * as getters from '~/search/store/getters';
+import createState from '~/search/store/state';
+import { MOCK_QUERY, MOCK_GROUPS, MOCK_PROJECTS } from '../mock_data';
+
+describe('Global Search Store Getters', () => {
+  let state;
+
+  beforeEach(() => {
+    state = createState({ query: MOCK_QUERY });
+  });
+
+  describe('frequentGroups', () => {
+    beforeEach(() => {
+      state.frequentItems[GROUPS_LOCAL_STORAGE_KEY] = MOCK_GROUPS;
+    });
+
+    it('returns the correct data', () => {
+      expect(getters.frequentGroups(state)).toStrictEqual(MOCK_GROUPS);
+    });
+  });
+
+  describe('frequentProjects', () => {
+    beforeEach(() => {
+      state.frequentItems[PROJECTS_LOCAL_STORAGE_KEY] = MOCK_PROJECTS;
+    });
+
+    it('returns the correct data', () => {
+      expect(getters.frequentProjects(state)).toStrictEqual(MOCK_PROJECTS);
+    });
+  });
+});
diff --git a/spec/frontend/search/store/utils_spec.js b/spec/frontend/search/store/utils_spec.js
index dbacde1b1a5..5055fa2cc3d 100644
--- a/spec/frontend/search/store/utils_spec.js
+++ b/spec/frontend/search/store/utils_spec.js
@@ -9,6 +9,9 @@ import {
   STALE_STORED_DATA,
 } from '../mock_data';
 
+const PREV_TIME = new Date().getTime() - 1;
+const CURRENT_TIME = new Date().getTime();
+
 useLocalStorageSpy();
 jest.mock('~/lib/utils/accessor', () => ({
   isLocalStorageAccessSafe: jest.fn().mockReturnValue(true),
@@ -52,28 +55,32 @@ describe('Global Search Store Utils', () => {
     describe('with existing data', () => {
       describe(`when frequency is less than ${MAX_FREQUENCY}`, () => {
         beforeEach(() => {
-          frequentItems[MOCK_LS_KEY] = [{ ...MOCK_GROUPS[0], frequency: 1 }];
+          frequentItems[MOCK_LS_KEY] = [{ ...MOCK_GROUPS[0], frequency: 1, lastUsed: PREV_TIME }];
           setFrequentItemToLS(MOCK_LS_KEY, frequentItems, MOCK_GROUPS[0]);
         });
 
-        it('adds 1 to the frequency and calls localStorage.setItem', () => {
+        it('adds 1 to the frequency, tracks lastUsed, and calls localStorage.setItem', () => {
           expect(localStorage.setItem).toHaveBeenCalledWith(
             MOCK_LS_KEY,
-            JSON.stringify([{ ...MOCK_GROUPS[0], frequency: 2 }]),
+            JSON.stringify([{ ...MOCK_GROUPS[0], frequency: 2, lastUsed: CURRENT_TIME }]),
           );
         });
       });
 
       describe(`when frequency is equal to ${MAX_FREQUENCY}`, () => {
         beforeEach(() => {
-          frequentItems[MOCK_LS_KEY] = [{ ...MOCK_GROUPS[0], frequency: MAX_FREQUENCY }];
+          frequentItems[MOCK_LS_KEY] = [
+            { ...MOCK_GROUPS[0], frequency: MAX_FREQUENCY, lastUsed: PREV_TIME },
+          ];
           setFrequentItemToLS(MOCK_LS_KEY, frequentItems, MOCK_GROUPS[0]);
         });
 
-        it(`does not further increase frequency past ${MAX_FREQUENCY} and calls localStorage.setItem`, () => {
+        it(`does not further increase frequency past ${MAX_FREQUENCY}, tracks lastUsed, and calls localStorage.setItem`, () => {
           expect(localStorage.setItem).toHaveBeenCalledWith(
             MOCK_LS_KEY,
-            JSON.stringify([{ ...MOCK_GROUPS[0], frequency: MAX_FREQUENCY }]),
+            JSON.stringify([
+              { ...MOCK_GROUPS[0], frequency: MAX_FREQUENCY, lastUsed: CURRENT_TIME },
+            ]),
           );
         });
       });
@@ -85,10 +92,10 @@ describe('Global Search Store Utils', () => {
         setFrequentItemToLS(MOCK_LS_KEY, frequentItems, MOCK_GROUPS[0]);
       });
 
-      it('adds a new entry with frequency 1 and calls localStorage.setItem', () => {
+      it('adds a new entry with frequency 1, tracks lastUsed, and calls localStorage.setItem', () => {
         expect(localStorage.setItem).toHaveBeenCalledWith(
           MOCK_LS_KEY,
-          JSON.stringify([{ ...MOCK_GROUPS[0], frequency: 1 }]),
+          JSON.stringify([{ ...MOCK_GROUPS[0], frequency: 1, lastUsed: CURRENT_TIME }]),
         );
       });
     });
@@ -96,18 +103,20 @@ describe('Global Search Store Utils', () => {
     describe('with multiple entries', () => {
       beforeEach(() => {
         frequentItems[MOCK_LS_KEY] = [
-          { ...MOCK_GROUPS[0], frequency: 1 },
-          { ...MOCK_GROUPS[1], frequency: 1 },
+          { id: 1, frequency: 2, lastUsed: PREV_TIME },
+          { id: 2, frequency: 1, lastUsed: PREV_TIME },
+          { id: 3, frequency: 1, lastUsed: PREV_TIME },
         ];
-        setFrequentItemToLS(MOCK_LS_KEY, frequentItems, MOCK_GROUPS[1]);
+        setFrequentItemToLS(MOCK_LS_KEY, frequentItems, { id: 3 });
       });
 
-      it('sorts the array by most frequent', () => {
+      it('sorts the array by most frequent and lastUsed', () => {
         expect(localStorage.setItem).toHaveBeenCalledWith(
           MOCK_LS_KEY,
           JSON.stringify([
-            { ...MOCK_GROUPS[1], frequency: 2 },
-            { ...MOCK_GROUPS[0], frequency: 1 },
+            { id: 3, frequency: 2, lastUsed: CURRENT_TIME },
+            { id: 1, frequency: 2, lastUsed: PREV_TIME },
+            { id: 2, frequency: 1, lastUsed: PREV_TIME },
           ]),
         );
       });
@@ -116,24 +125,24 @@ describe('Global Search Store Utils', () => {
     describe('with max entries', () => {
       beforeEach(() => {
         frequentItems[MOCK_LS_KEY] = [
-          { id: 1, frequency: 5 },
-          { id: 2, frequency: 4 },
-          { id: 3, frequency: 3 },
-          { id: 4, frequency: 2 },
-          { id: 5, frequency: 1 },
+          { id: 1, frequency: 5, lastUsed: PREV_TIME },
+          { id: 2, frequency: 4, lastUsed: PREV_TIME },
+          { id: 3, frequency: 3, lastUsed: PREV_TIME },
+          { id: 4, frequency: 2, lastUsed: PREV_TIME },
+          { id: 5, frequency: 1, lastUsed: PREV_TIME },
         ];
         setFrequentItemToLS(MOCK_LS_KEY, frequentItems, { id: 6 });
       });
 
-      it('removes the least frequent', () => {
+      it('removes the last item in the array', () => {
         expect(localStorage.setItem).toHaveBeenCalledWith(
           MOCK_LS_KEY,
           JSON.stringify([
-            { id: 1, frequency: 5 },
-            { id: 2, frequency: 4 },
-            { id: 3, frequency: 3 },
-            { id: 4, frequency: 2 },
-            { id: 6, frequency: 1 },
+            { id: 1, frequency: 5, lastUsed: PREV_TIME },
+            { id: 2, frequency: 4, lastUsed: PREV_TIME },
+            { id: 3, frequency: 3, lastUsed: PREV_TIME },
+            { id: 4, frequency: 2, lastUsed: PREV_TIME },
+            { id: 6, frequency: 1, lastUsed: CURRENT_TIME },
           ]),
         );
       });
@@ -160,7 +169,7 @@ describe('Global Search Store Utils', () => {
       it('parses out extra data for LS', () => {
         expect(localStorage.setItem).toHaveBeenCalledWith(
           MOCK_LS_KEY,
-          JSON.stringify([{ ...MOCK_GROUPS[0], frequency: 1 }]),
+          JSON.stringify([{ ...MOCK_GROUPS[0], frequency: 1, lastUsed: CURRENT_TIME }]),
         );
       });
     });
diff --git a/spec/frontend/search/topbar/components/group_filter_spec.js b/spec/frontend/search/topbar/components/group_filter_spec.js
index 21f18bb6864..fbd7ad6bb57 100644
--- a/spec/frontend/search/topbar/components/group_filter_spec.js
+++ b/spec/frontend/search/topbar/components/group_filter_spec.js
@@ -35,6 +35,9 @@ describe('GroupFilter', () => {
         ...initialState,
       },
       actions: actionSpies,
+      getters: {
+        frequentGroups: () => [],
+      },
     });
 
     wrapper = shallowMount(GroupFilter, {
diff --git a/spec/frontend/search/topbar/components/project_filter_spec.js b/spec/frontend/search/topbar/components/project_filter_spec.js
index ecc9273395f..63b0f882ca4 100644
--- a/spec/frontend/search/topbar/components/project_filter_spec.js
+++ b/spec/frontend/search/topbar/components/project_filter_spec.js
@@ -35,6 +35,9 @@ describe('ProjectFilter', () => {
         ...initialState,
       },
       actions: actionSpies,
+      getters: {
+        frequentProjects: () => [],
+      },
     });
 
     wrapper = shallowMount(ProjectFilter, {
diff --git a/spec/frontend/search/topbar/components/searchable_dropdown_spec.js b/spec/frontend/search/topbar/components/searchable_dropdown_spec.js
index 2ad46eeeb1e..b21cf5c6b79 100644
--- a/spec/frontend/search/topbar/components/searchable_dropdown_spec.js
+++ b/spec/frontend/search/topbar/components/searchable_dropdown_spec.js
@@ -2,9 +2,9 @@ import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlSkeletonLoader } from
 import { shallowMount, mount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { MOCK_GROUPS, MOCK_GROUP, MOCK_QUERY } from 'jest/search/mock_data';
 import SearchableDropdown from '~/search/topbar/components/searchable_dropdown.vue';
-import SearchableDropdownItem from '~/search/topbar/components/searchable_dropdown_item.vue';
 import { ANY_OPTION, GROUP_DATA } from '~/search/topbar/constants';
 
 Vue.use(Vuex);
@@ -29,13 +29,15 @@ describe('Global Search Searchable Dropdown', () => {
       },
     });
 
-    wrapper = mountFn(SearchableDropdown, {
-      store,
-      propsData: {
-        ...defaultProps,
-        ...props,
-      },
-    });
+    wrapper = extendedWrapper(
+      mountFn(SearchableDropdown, {
+        store,
+        propsData: {
+          ...defaultProps,
+          ...props,
+        },
+      }),
+    );
   };
 
   afterEach(() => {
@@ -45,10 +47,11 @@ describe('Global Search Searchable Dropdown', () => {
   const findGlDropdown = () => wrapper.findComponent(GlDropdown);
   const findGlDropdownSearch = () => findGlDropdown().findComponent(GlSearchBoxByType);
   const findDropdownText = () => findGlDropdown().find('.dropdown-toggle-text');
-  const findSearchableDropdownItems = () =>
-    findGlDropdown().findAllComponents(SearchableDropdownItem);
+  const findSearchableDropdownItems = () => wrapper.findAllByTestId('searchable-items');
+  const findFrequentDropdownItems = () => wrapper.findAllByTestId('frequent-items');
   const findAnyDropdownItem = () => findGlDropdown().findComponent(GlDropdownItem);
-  const findFirstGroupDropdownItem = () => findSearchableDropdownItems().at(0);
+  const findFirstSearchableDropdownItem = () => findSearchableDropdownItems().at(0);
+  const findFirstFrequentDropdownItem = () => findFrequentDropdownItems().at(0);
   const findLoader = () => wrapper.findComponent(GlSkeletonLoader);
 
   describe('template', () => {
@@ -82,7 +85,7 @@ describe('Global Search Searchable Dropdown', () => {
       });
     });
 
-    describe('findDropdownItems', () => {
+    describe('Searchable Dropdown Items', () => {
       describe('when loading is false', () => {
         beforeEach(() => {
           createComponent({}, { items: MOCK_GROUPS });
@@ -96,7 +99,7 @@ describe('Global Search Searchable Dropdown', () => {
           expect(findAnyDropdownItem().exists()).toBe(true);
         });
 
-        it('renders SearchableDropdownItem for each item', () => {
+        it('renders searchable dropdown item for each item', () => {
           expect(findSearchableDropdownItems()).toHaveLength(MOCK_GROUPS.length);
         });
       });
@@ -114,12 +117,31 @@ describe('Global Search Searchable Dropdown', () => {
           expect(findAnyDropdownItem().exists()).toBe(true);
         });
 
-        it('does not render SearchableDropdownItem', () => {
+        it('does not render searchable dropdown items', () => {
           expect(findSearchableDropdownItems()).toHaveLength(0);
         });
       });
     });
 
+    describe.each`
+      searchText | frequentItems  | length
+      ${''}      | ${[]}          | ${0}
+      ${''}      | ${MOCK_GROUPS} | ${MOCK_GROUPS.length}
+      ${'test'}  | ${[]}          | ${0}
+      ${'test'}  | ${MOCK_GROUPS} | ${0}
+    `('Frequent Dropdown Items', ({ searchText, frequentItems, length }) => {
+      describe(`when search is ${searchText} and frequentItems length is ${frequentItems.length}`, () => {
+        beforeEach(() => {
+          createComponent({}, { frequentItems });
+          wrapper.setData({ searchText });
+        });
+
+        it(`should${length ? '' : ' not'} render frequent dropdown items`, () => {
+          expect(findFrequentDropdownItems()).toHaveLength(length);
+        });
+      });
+    });
+
     describe('Dropdown Text', () => {
       describe('when selectedItem is any', () => {
         beforeEach(() => {
@@ -145,7 +167,7 @@ describe('Global Search Searchable Dropdown', () => {
 
   describe('actions', () => {
     beforeEach(() => {
-      createComponent({}, { items: MOCK_GROUPS });
+      createComponent({}, { items: MOCK_GROUPS, frequentItems: MOCK_GROUPS });
     });
 
     it('clicking "Any" dropdown item $emits @change with ANY_OPTION', () => {
@@ -154,8 +176,14 @@ describe('Global Search Searchable Dropdown', () => {
       expect(wrapper.emitted('change')[0]).toEqual([ANY_OPTION]);
     });
 
-    it('on SearchableDropdownItem @change, the wrapper $emits change with the item', () => {
-      findFirstGroupDropdownItem().vm.$emit('change', MOCK_GROUPS[0]);
+    it('on searchable item @change, the wrapper $emits change with the item', () => {
+      findFirstSearchableDropdownItem().vm.$emit('change', MOCK_GROUPS[0]);
+
+      expect(wrapper.emitted('change')[0]).toEqual([MOCK_GROUPS[0]]);
+    });
+
+    it('on frequent item @change, the wrapper $emits change with the item', () => {
+      findFirstFrequentDropdownItem().vm.$emit('change', MOCK_GROUPS[0]);
 
       expect(wrapper.emitted('change')[0]).toEqual([MOCK_GROUPS[0]]);
     });