Add latest changes from gitlab-org/gitlab@13-7-stable-eev13.7.0-rc42

5 files changed, 73 insertions, 11 deletions

diff --git a/spec/frontend/frequent_items/components/app_spec.js b/spec/frontend/frequent_items/components/app_spec.js
index b4f36b82385..439a410eaa1 100644
--- a/spec/frontend/frequent_items/components/app_spec.js
+++ b/spec/frontend/frequent_items/components/app_spec.js
@@ -6,10 +6,10 @@ import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 import appComponent from '~/frequent_items/components/app.vue';
 import eventHub from '~/frequent_items/event_hub';
-import store from '~/frequent_items/store';
 import { FREQUENT_ITEMS, HOUR_IN_MS } from '~/frequent_items/constants';
 import { getTopFrequentItems } from '~/frequent_items/utils';
 import { currentSession, mockFrequentProjects, mockSearchedProjects } from '../mock_data';
+import { createStore } from '~/frequent_items/store';
 
 useLocalStorageSpy();
 
@@ -18,6 +18,7 @@ const createComponentWithStore = (namespace = 'projects') => {
   session = currentSession[namespace];
   gon.api_version = session.apiVersion;
   const Component = Vue.extend(appComponent);
+  const store = createStore();
 
   return mountComponentWithStore(Component, {
     store,
diff --git a/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js b/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js
index ab5784b8f7a..1160ed5c84b 100644
--- a/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js
+++ b/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js
@@ -1,10 +1,14 @@
 import { shallowMount } from '@vue/test-utils';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { trimText } from 'helpers/text_helper';
 import frequentItemsListItemComponent from '~/frequent_items/components/frequent_items_list_item.vue';
-import { mockProject } from '../mock_data'; // can also use 'mockGroup', but not useful to test here
+import { createStore } from '~/frequent_items/store';
+import { mockProject } from '../mock_data';
 
 describe('FrequentItemsListItemComponent', () => {
   let wrapper;
+  let trackingSpy;
+  let store = createStore();
 
   const findTitle = () => wrapper.find({ ref: 'frequentItemsItemTitle' });
   const findAvatar = () => wrapper.find({ ref: 'frequentItemsItemAvatar' });
@@ -18,6 +22,7 @@ describe('FrequentItemsListItemComponent', () => {
 
   const createComponent = (props = {}) => {
     wrapper = shallowMount(frequentItemsListItemComponent, {
+      store,
       propsData: {
         itemId: mockProject.id,
         itemName: mockProject.name,
@@ -29,7 +34,14 @@ describe('FrequentItemsListItemComponent', () => {
     });
   };
 
+  beforeEach(() => {
+    store = createStore({ dropdownType: 'project' });
+    trackingSpy = mockTracking('_category_', document, jest.spyOn);
+    trackingSpy.mockImplementation(() => {});
+  });
+
   afterEach(() => {
+    unmockTracking();
     wrapper.destroy();
     wrapper = null;
   });
@@ -97,5 +109,18 @@ describe('FrequentItemsListItemComponent', () => {
     `('should render $expected $name', ({ selector, expected }) => {
       expect(selector()).toHaveLength(expected);
     });
+
+    it('tracks when item link is clicked', () => {
+      const link = wrapper.find('a');
+      // NOTE: this listener is required to prevent the click from going through and causing:
+      //   `Error: Not implemented: navigation ...`
+      link.element.addEventListener('click', e => {
+        e.preventDefault();
+      });
+      link.trigger('click');
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_link', {
+        label: 'project_dropdown_frequent_items_list_item',
+      });
+    });
   });
 });
diff --git a/spec/frontend/frequent_items/components/frequent_items_list_spec.js b/spec/frontend/frequent_items/components/frequent_items_list_spec.js
index 238fd508053..96f73ab1468 100644
--- a/spec/frontend/frequent_items/components/frequent_items_list_spec.js
+++ b/spec/frontend/frequent_items/components/frequent_items_list_spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { createStore } from '~/frequent_items/store';
 import frequentItemsListComponent from '~/frequent_items/components/frequent_items_list.vue';
 import frequentItemsListItemComponent from '~/frequent_items/components/frequent_items_list_item.vue';
 import { mockFrequentProjects } from '../mock_data';
@@ -8,6 +9,7 @@ describe('FrequentItemsListComponent', () => {
 
   const createComponent = (props = {}) => {
     wrapper = mount(frequentItemsListComponent, {
+      store: createStore(),
       propsData: {
         namespace: 'projects',
         items: mockFrequentProjects,
@@ -25,7 +27,7 @@ describe('FrequentItemsListComponent', () => {
 
   describe('computed', () => {
     describe('isListEmpty', () => {
-      it('should return `true` or `false` representing whether if `items` is empty or not with projects', () => {
+      it('should return `true` or `false` representing whether if `items` is empty or not with projects', async () => {
         createComponent({
           items: [],
         });
@@ -35,13 +37,14 @@ describe('FrequentItemsListComponent', () => {
         wrapper.setProps({
           items: mockFrequentProjects,
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.isListEmpty).toBe(false);
       });
     });
 
     describe('fetched item messages', () => {
-      it('should return appropriate empty list message based on value of `localStorageFailed` prop with projects', () => {
+      it('should return appropriate empty list message based on value of `localStorageFailed` prop with projects', async () => {
         createComponent({
           isFetchFailed: true,
         });
@@ -53,13 +56,14 @@ describe('FrequentItemsListComponent', () => {
         wrapper.setProps({
           isFetchFailed: false,
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.listEmptyMessage).toBe('Projects you visit often will appear here');
       });
     });
 
     describe('searched item messages', () => {
-      it('should return appropriate empty list message based on value of `searchFailed` prop with projects', () => {
+      it('should return appropriate empty list message based on value of `searchFailed` prop with projects', async () => {
         createComponent({
           hasSearchQuery: true,
           isFetchFailed: true,
@@ -70,6 +74,7 @@ describe('FrequentItemsListComponent', () => {
         wrapper.setProps({
           isFetchFailed: false,
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.listEmptyMessage).toBe('Sorry, no projects matched your search');
       });
diff --git a/spec/frontend/frequent_items/components/frequent_items_search_input_spec.js b/spec/frontend/frequent_items/components/frequent_items_search_input_spec.js
index c5155315bb9..f5e654e6bcb 100644
--- a/spec/frontend/frequent_items/components/frequent_items_search_input_spec.js
+++ b/spec/frontend/frequent_items/components/frequent_items_search_input_spec.js
@@ -1,23 +1,35 @@
 import { shallowMount } from '@vue/test-utils';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import searchComponent from '~/frequent_items/components/frequent_items_search_input.vue';
+import { createStore } from '~/frequent_items/store';
 import eventHub from '~/frequent_items/event_hub';
 
-const createComponent = (namespace = 'projects') =>
-  shallowMount(searchComponent, {
-    propsData: { namespace },
-  });
-
 describe('FrequentItemsSearchInputComponent', () => {
   let wrapper;
+  let trackingSpy;
   let vm;
+  let store;
+
+  const createComponent = (namespace = 'projects') =>
+    shallowMount(searchComponent, {
+      store,
+      propsData: { namespace },
+    });
 
   beforeEach(() => {
+    store = createStore({ dropdownType: 'project' });
+    jest.spyOn(store, 'dispatch').mockImplementation(() => {});
+
+    trackingSpy = mockTracking('_category_', document, jest.spyOn);
+    trackingSpy.mockImplementation(() => {});
+
     wrapper = createComponent();
 
     ({ vm } = wrapper);
   });
 
   afterEach(() => {
+    unmockTracking();
     vm.$destroy();
   });
 
@@ -76,4 +88,24 @@ describe('FrequentItemsSearchInputComponent', () => {
       );
     });
   });
+
+  describe('tracking', () => {
+    it('tracks when search query is entered', async () => {
+      expect(trackingSpy).not.toHaveBeenCalled();
+      expect(store.dispatch).not.toHaveBeenCalled();
+
+      const value = 'my project';
+
+      const input = wrapper.find('input');
+      input.setValue(value);
+      input.trigger('input');
+
+      await wrapper.vm.$nextTick();
+
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'type_search_query', {
+        label: 'project_dropdown_frequent_items_search_input',
+      });
+      expect(store.dispatch).toHaveBeenCalledWith('setSearchQuery', value);
+    });
+  });
 });
diff --git a/spec/frontend/frequent_items/mock_data.js b/spec/frontend/frequent_items/mock_data.js
index 8c3c66f67ff..5e15b4b33e0 100644
--- a/spec/frontend/frequent_items/mock_data.js
+++ b/spec/frontend/frequent_items/mock_data.js
@@ -30,7 +30,6 @@ export const currentSession = {
 };
 
 export const mockNamespace = 'projects';
-
 export const mockStorageKey = 'test-user/frequent-projects';
 
 export const mockGroup = {