Resolve "Add dropdown to Groups link in top bar"

9 files changed, 1110 insertions, 0 deletions

diff --git a/spec/javascripts/frequent_items/components/app_spec.js b/spec/javascripts/frequent_items/components/app_spec.js
new file mode 100644
index 00000000000..834f919524d
--- /dev/null
+++ b/spec/javascripts/frequent_items/components/app_spec.js
@@ -0,0 +1,251 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import Vue from 'vue';
+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 { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { currentSession, mockFrequentProjects, mockSearchedProjects } from '../mock_data';
+
+let session;
+const createComponentWithStore = (namespace = 'projects') => {
+  session = currentSession[namespace];
+  gon.api_version = session.apiVersion;
+  const Component = Vue.extend(appComponent);
+
+  return mountComponentWithStore(Component, {
+    store,
+    props: {
+      namespace,
+      currentUserName: session.username,
+      currentItem: session.project || session.group,
+    },
+  });
+};
+
+describe('Frequent Items App Component', () => {
+  let vm;
+  let mock;
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    vm = createComponentWithStore();
+  });
+
+  afterEach(() => {
+    mock.restore();
+    vm.$destroy();
+  });
+
+  describe('methods', () => {
+    describe('dropdownOpenHandler', () => {
+      it('should fetch frequent items when no search has been previously made on desktop', () => {
+        spyOn(vm, 'fetchFrequentItems');
+
+        vm.dropdownOpenHandler();
+
+        expect(vm.fetchFrequentItems).toHaveBeenCalledWith();
+      });
+    });
+
+    describe('logItemAccess', () => {
+      let storage;
+
+      beforeEach(() => {
+        storage = {};
+
+        spyOn(window.localStorage, 'setItem').and.callFake((storageKey, value) => {
+          storage[storageKey] = value;
+        });
+
+        spyOn(window.localStorage, 'getItem').and.callFake(storageKey => {
+          if (storage[storageKey]) {
+            return storage[storageKey];
+          }
+
+          return null;
+        });
+      });
+
+      it('should create a project store if it does not exist and adds a project', () => {
+        vm.logItemAccess(session.storageKey, session.project);
+
+        const projects = JSON.parse(storage[session.storageKey]);
+
+        expect(projects.length).toBe(1);
+        expect(projects[0].frequency).toBe(1);
+        expect(projects[0].lastAccessedOn).toBeDefined();
+      });
+
+      it('should prevent inserting same report multiple times into store', () => {
+        vm.logItemAccess(session.storageKey, session.project);
+        vm.logItemAccess(session.storageKey, session.project);
+
+        const projects = JSON.parse(storage[session.storageKey]);
+
+        expect(projects.length).toBe(1);
+      });
+
+      it('should increase frequency of report if it was logged multiple times over the course of an hour', () => {
+        let projects;
+        const newTimestamp = Date.now() + HOUR_IN_MS + 1;
+
+        vm.logItemAccess(session.storageKey, session.project);
+        projects = JSON.parse(storage[session.storageKey]);
+
+        expect(projects[0].frequency).toBe(1);
+
+        vm.logItemAccess(session.storageKey, {
+          ...session.project,
+          lastAccessedOn: newTimestamp,
+        });
+        projects = JSON.parse(storage[session.storageKey]);
+
+        expect(projects[0].frequency).toBe(2);
+        expect(projects[0].lastAccessedOn).not.toBe(session.project.lastAccessedOn);
+      });
+
+      it('should always update project metadata', () => {
+        let projects;
+        const oldProject = {
+          ...session.project,
+        };
+
+        const newProject = {
+          ...session.project,
+          name: 'New Name',
+          avatarUrl: 'new/avatar.png',
+          namespace: 'New / Namespace',
+          webUrl: 'http://localhost/new/web/url',
+        };
+
+        vm.logItemAccess(session.storageKey, oldProject);
+        projects = JSON.parse(storage[session.storageKey]);
+
+        expect(projects[0].name).toBe(oldProject.name);
+        expect(projects[0].avatarUrl).toBe(oldProject.avatarUrl);
+        expect(projects[0].namespace).toBe(oldProject.namespace);
+        expect(projects[0].webUrl).toBe(oldProject.webUrl);
+
+        vm.logItemAccess(session.storageKey, newProject);
+        projects = JSON.parse(storage[session.storageKey]);
+
+        expect(projects[0].name).toBe(newProject.name);
+        expect(projects[0].avatarUrl).toBe(newProject.avatarUrl);
+        expect(projects[0].namespace).toBe(newProject.namespace);
+        expect(projects[0].webUrl).toBe(newProject.webUrl);
+      });
+
+      it('should not add more than 20 projects in store', () => {
+        for (let id = 0; id < FREQUENT_ITEMS.MAX_COUNT; id += 1) {
+          const project = {
+            ...session.project,
+            id,
+          };
+          vm.logItemAccess(session.storageKey, project);
+        }
+
+        const projects = JSON.parse(storage[session.storageKey]);
+
+        expect(projects.length).toBe(FREQUENT_ITEMS.MAX_COUNT);
+      });
+    });
+  });
+
+  describe('created', () => {
+    it('should bind event listeners on eventHub', done => {
+      spyOn(eventHub, '$on');
+
+      createComponentWithStore().$mount();
+
+      Vue.nextTick(() => {
+        expect(eventHub.$on).toHaveBeenCalledWith('projects-dropdownOpen', jasmine.any(Function));
+        done();
+      });
+    });
+  });
+
+  describe('beforeDestroy', () => {
+    it('should unbind event listeners on eventHub', done => {
+      spyOn(eventHub, '$off');
+
+      vm.$mount();
+      vm.$destroy();
+
+      Vue.nextTick(() => {
+        expect(eventHub.$off).toHaveBeenCalledWith('projects-dropdownOpen', jasmine.any(Function));
+        done();
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('should render search input', () => {
+      expect(vm.$el.querySelector('.search-input-container')).toBeDefined();
+    });
+
+    it('should render loading animation', done => {
+      vm.$store.dispatch('fetchSearchedItems');
+
+      Vue.nextTick(() => {
+        const loadingEl = vm.$el.querySelector('.loading-animation');
+
+        expect(loadingEl).toBeDefined();
+        expect(loadingEl.classList.contains('prepend-top-20')).toBe(true);
+        expect(loadingEl.querySelector('i').getAttribute('aria-label')).toBe('Loading projects');
+        done();
+      });
+    });
+
+    it('should render frequent projects list header', done => {
+      Vue.nextTick(() => {
+        const sectionHeaderEl = vm.$el.querySelector('.section-header');
+
+        expect(sectionHeaderEl).toBeDefined();
+        expect(sectionHeaderEl.innerText.trim()).toBe('Frequently visited');
+        done();
+      });
+    });
+
+    it('should render frequent projects list', done => {
+      const expectedResult = getTopFrequentItems(mockFrequentProjects);
+      spyOn(window.localStorage, 'getItem').and.callFake(() =>
+        JSON.stringify(mockFrequentProjects),
+      );
+
+      expect(vm.$el.querySelectorAll('.frequent-items-list-container li').length).toBe(1);
+
+      vm.fetchFrequentItems();
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelectorAll('.frequent-items-list-container li').length).toBe(
+          expectedResult.length,
+        );
+        done();
+      });
+    });
+
+    it('should render searched projects list', done => {
+      mock.onGet(/\/api\/v4\/projects.json(.*)$/).replyOnce(200, mockSearchedProjects);
+
+      expect(vm.$el.querySelectorAll('.frequent-items-list-container li').length).toBe(1);
+
+      vm.$store.dispatch('setSearchQuery', 'gitlab');
+      vm
+        .$nextTick()
+        .then(() => {
+          expect(vm.$el.querySelector('.loading-animation')).toBeDefined();
+        })
+        .then(vm.$nextTick)
+        .then(vm.$nextTick)
+        .then(() => {
+          expect(vm.$el.querySelectorAll('.frequent-items-list-container li').length).toBe(
+            mockSearchedProjects.length,
+          );
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});
diff --git a/spec/javascripts/frequent_items/components/frequent_items_list_item_spec.js b/spec/javascripts/frequent_items/components/frequent_items_list_item_spec.js
new file mode 100644
index 00000000000..201aca77b10
--- /dev/null
+++ b/spec/javascripts/frequent_items/components/frequent_items_list_item_spec.js
@@ -0,0 +1,75 @@
+import Vue from 'vue';
+import frequentItemsListItemComponent from '~/frequent_items/components/frequent_items_list_item.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { mockProject } from '../mock_data'; // can also use 'mockGroup', but not useful to test here
+
+const createComponent = () => {
+  const Component = Vue.extend(frequentItemsListItemComponent);
+
+  return mountComponent(Component, {
+    itemId: mockProject.id,
+    itemName: mockProject.name,
+    namespace: mockProject.namespace,
+    webUrl: mockProject.webUrl,
+    avatarUrl: mockProject.avatarUrl,
+  });
+};
+
+describe('FrequentItemsListItemComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('hasAvatar', () => {
+      it('should return `true` or `false` if whether avatar is present or not', () => {
+        vm.avatarUrl = 'path/to/avatar.png';
+        expect(vm.hasAvatar).toBe(true);
+
+        vm.avatarUrl = null;
+        expect(vm.hasAvatar).toBe(false);
+      });
+    });
+
+    describe('highlightedItemName', () => {
+      it('should enclose part of project name in <b> & </b> which matches with `matcher` prop', () => {
+        vm.matcher = 'lab';
+        expect(vm.highlightedItemName).toContain('<b>Lab</b>');
+      });
+
+      it('should return project name as it is if `matcher` is not available', () => {
+        vm.matcher = null;
+        expect(vm.highlightedItemName).toBe(mockProject.name);
+      });
+    });
+
+    describe('truncatedNamespace', () => {
+      it('should truncate project name from namespace string', () => {
+        vm.namespace = 'platform / nokia-3310';
+        expect(vm.truncatedNamespace).toBe('platform');
+      });
+
+      it('should truncate namespace string from the middle if it includes more than two groups in path', () => {
+        vm.namespace = 'platform / hardware / broadcom / Wifi Group / Mobile Chipset / nokia-3310';
+        expect(vm.truncatedNamespace).toBe('platform / ... / Mobile Chipset');
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('should render component element', () => {
+      expect(vm.$el.classList.contains('frequent-items-list-item-container')).toBeTruthy();
+      expect(vm.$el.querySelectorAll('a').length).toBe(1);
+      expect(vm.$el.querySelectorAll('.frequent-items-item-avatar-container').length).toBe(1);
+      expect(vm.$el.querySelectorAll('.frequent-items-item-metadata-container').length).toBe(1);
+      expect(vm.$el.querySelectorAll('.frequent-items-item-title').length).toBe(1);
+      expect(vm.$el.querySelectorAll('.frequent-items-item-namespace').length).toBe(1);
+    });
+  });
+});
diff --git a/spec/javascripts/frequent_items/components/frequent_items_list_spec.js b/spec/javascripts/frequent_items/components/frequent_items_list_spec.js
new file mode 100644
index 00000000000..3003b7ee000
--- /dev/null
+++ b/spec/javascripts/frequent_items/components/frequent_items_list_spec.js
@@ -0,0 +1,84 @@
+import Vue from 'vue';
+import frequentItemsListComponent from '~/frequent_items/components/frequent_items_list.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { mockFrequentProjects } from '../mock_data';
+
+const createComponent = (namespace = 'projects') => {
+  const Component = Vue.extend(frequentItemsListComponent);
+
+  return mountComponent(Component, {
+    namespace,
+    items: mockFrequentProjects,
+    isFetchFailed: false,
+    hasSearchQuery: false,
+    matcher: 'lab',
+  });
+};
+
+describe('FrequentItemsListComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('isListEmpty', () => {
+      it('should return `true` or `false` representing whether if `items` is empty or not with projects', () => {
+        vm.items = [];
+        expect(vm.isListEmpty).toBe(true);
+
+        vm.items = mockFrequentProjects;
+        expect(vm.isListEmpty).toBe(false);
+      });
+    });
+
+    describe('fetched item messages', () => {
+      it('should return appropriate empty list message based on value of `localStorageFailed` prop with projects', () => {
+        vm.isFetchFailed = true;
+        expect(vm.listEmptyMessage).toBe('This feature requires browser localStorage support');
+
+        vm.isFetchFailed = false;
+        expect(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', () => {
+        vm.hasSearchQuery = true;
+        vm.isFetchFailed = true;
+        expect(vm.listEmptyMessage).toBe('Something went wrong on our end.');
+
+        vm.isFetchFailed = false;
+        expect(vm.listEmptyMessage).toBe('Sorry, no projects matched your search');
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('should render component element with list of projects', done => {
+      vm.items = mockFrequentProjects;
+
+      Vue.nextTick(() => {
+        expect(vm.$el.classList.contains('frequent-items-list-container')).toBe(true);
+        expect(vm.$el.querySelectorAll('ul.list-unstyled').length).toBe(1);
+        expect(vm.$el.querySelectorAll('li.frequent-items-list-item-container').length).toBe(5);
+        done();
+      });
+    });
+
+    it('should render component element with empty message', done => {
+      vm.items = [];
+
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelectorAll('li.section-empty').length).toBe(1);
+        expect(vm.$el.querySelectorAll('li.frequent-items-list-item-container').length).toBe(0);
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/frequent_items/components/frequent_items_search_input_spec.js b/spec/javascripts/frequent_items/components/frequent_items_search_input_spec.js
new file mode 100644
index 00000000000..6a11038e70a
--- /dev/null
+++ b/spec/javascripts/frequent_items/components/frequent_items_search_input_spec.js
@@ -0,0 +1,77 @@
+import Vue from 'vue';
+import searchComponent from '~/frequent_items/components/frequent_items_search_input.vue';
+import eventHub from '~/frequent_items/event_hub';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+const createComponent = (namespace = 'projects') => {
+  const Component = Vue.extend(searchComponent);
+
+  return mountComponent(Component, { namespace });
+};
+
+describe('FrequentItemsSearchInputComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('methods', () => {
+    describe('setFocus', () => {
+      it('should set focus to search input', () => {
+        spyOn(vm.$refs.search, 'focus');
+
+        vm.setFocus();
+        expect(vm.$refs.search.focus).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('mounted', () => {
+    it('should listen `dropdownOpen` event', done => {
+      spyOn(eventHub, '$on');
+      const vmX = createComponent();
+
+      Vue.nextTick(() => {
+        expect(eventHub.$on).toHaveBeenCalledWith(
+          `${vmX.namespace}-dropdownOpen`,
+          jasmine.any(Function),
+        );
+        done();
+      });
+    });
+  });
+
+  describe('beforeDestroy', () => {
+    it('should unbind event listeners on eventHub', done => {
+      const vmX = createComponent();
+      spyOn(eventHub, '$off');
+
+      vmX.$mount();
+      vmX.$destroy();
+
+      Vue.nextTick(() => {
+        expect(eventHub.$off).toHaveBeenCalledWith(
+          `${vmX.namespace}-dropdownOpen`,
+          jasmine.any(Function),
+        );
+        done();
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('should render component element', () => {
+      const inputEl = vm.$el.querySelector('input.form-control');
+
+      expect(vm.$el.classList.contains('search-input-container')).toBeTruthy();
+      expect(inputEl).not.toBe(null);
+      expect(inputEl.getAttribute('placeholder')).toBe('Search your projects');
+      expect(vm.$el.querySelector('.search-icon')).toBeDefined();
+    });
+  });
+});
diff --git a/spec/javascripts/frequent_items/mock_data.js b/spec/javascripts/frequent_items/mock_data.js
new file mode 100644
index 00000000000..cf3602f42d6
--- /dev/null
+++ b/spec/javascripts/frequent_items/mock_data.js
@@ -0,0 +1,168 @@
+export const currentSession = {
+  groups: {
+    username: 'root',
+    storageKey: 'root/frequent-groups',
+    apiVersion: 'v4',
+    group: {
+      id: 1,
+      name: 'dummy-group',
+      full_name: 'dummy-parent-group',
+      webUrl: `${gl.TEST_HOST}/dummy-group`,
+      avatarUrl: null,
+      lastAccessedOn: Date.now(),
+    },
+  },
+  projects: {
+    username: 'root',
+    storageKey: 'root/frequent-projects',
+    apiVersion: 'v4',
+    project: {
+      id: 1,
+      name: 'dummy-project',
+      namespace: 'SampleGroup / Dummy-Project',
+      webUrl: `${gl.TEST_HOST}/samplegroup/dummy-project`,
+      avatarUrl: null,
+      lastAccessedOn: Date.now(),
+    },
+  },
+};
+
+export const mockNamespace = 'projects';
+
+export const mockStorageKey = 'test-user/frequent-projects';
+
+export const mockGroup = {
+  id: 1,
+  name: 'Sub451',
+  namespace: 'Commit451 / Sub451',
+  webUrl: `${gl.TEST_HOST}/Commit451/Sub451`,
+  avatarUrl: null,
+};
+
+export const mockRawGroup = {
+  id: 1,
+  name: 'Sub451',
+  full_name: 'Commit451 / Sub451',
+  web_url: `${gl.TEST_HOST}/Commit451/Sub451`,
+  avatar_url: null,
+};
+
+export const mockFrequentGroups = [
+  {
+    id: 3,
+    name: 'Subgroup451',
+    full_name: 'Commit451 / Subgroup451',
+    webUrl: '/Commit451/Subgroup451',
+    avatarUrl: null,
+    frequency: 7,
+    lastAccessedOn: 1497979281815,
+  },
+  {
+    id: 1,
+    name: 'Commit451',
+    full_name: 'Commit451',
+    webUrl: '/Commit451',
+    avatarUrl: null,
+    frequency: 3,
+    lastAccessedOn: 1497979281815,
+  },
+];
+
+export const mockSearchedGroups = [mockRawGroup];
+export const mockProcessedSearchedGroups = [mockGroup];
+
+export const mockProject = {
+  id: 1,
+  name: 'GitLab Community Edition',
+  namespace: 'gitlab-org / gitlab-ce',
+  webUrl: `${gl.TEST_HOST}/gitlab-org/gitlab-ce`,
+  avatarUrl: null,
+};
+
+export const mockRawProject = {
+  id: 1,
+  name: 'GitLab Community Edition',
+  name_with_namespace: 'gitlab-org / gitlab-ce',
+  web_url: `${gl.TEST_HOST}/gitlab-org/gitlab-ce`,
+  avatar_url: null,
+};
+
+export const mockFrequentProjects = [
+  {
+    id: 1,
+    name: 'GitLab Community Edition',
+    namespace: 'gitlab-org / gitlab-ce',
+    webUrl: `${gl.TEST_HOST}/gitlab-org/gitlab-ce`,
+    avatarUrl: null,
+    frequency: 1,
+    lastAccessedOn: Date.now(),
+  },
+  {
+    id: 2,
+    name: 'GitLab CI',
+    namespace: 'gitlab-org / gitlab-ci',
+    webUrl: `${gl.TEST_HOST}/gitlab-org/gitlab-ci`,
+    avatarUrl: null,
+    frequency: 9,
+    lastAccessedOn: Date.now(),
+  },
+  {
+    id: 3,
+    name: 'Typeahead.Js',
+    namespace: 'twitter / typeahead-js',
+    webUrl: `${gl.TEST_HOST}/twitter/typeahead-js`,
+    avatarUrl: '/uploads/-/system/project/avatar/7/TWBS.png',
+    frequency: 2,
+    lastAccessedOn: Date.now(),
+  },
+  {
+    id: 4,
+    name: 'Intel',
+    namespace: 'platform / hardware / bsp / intel',
+    webUrl: `${gl.TEST_HOST}/platform/hardware/bsp/intel`,
+    avatarUrl: null,
+    frequency: 3,
+    lastAccessedOn: Date.now(),
+  },
+  {
+    id: 5,
+    name: 'v4.4',
+    namespace: 'platform / hardware / bsp / kernel / common / v4.4',
+    webUrl: `${gl.TEST_HOST}/platform/hardware/bsp/kernel/common/v4.4`,
+    avatarUrl: null,
+    frequency: 8,
+    lastAccessedOn: Date.now(),
+  },
+];
+
+export const mockSearchedProjects = [mockRawProject];
+export const mockProcessedSearchedProjects = [mockProject];
+
+export const unsortedFrequentItems = [
+  { id: 1, frequency: 12, lastAccessedOn: 1491400843391 },
+  { id: 2, frequency: 14, lastAccessedOn: 1488240890738 },
+  { id: 3, frequency: 44, lastAccessedOn: 1497675908472 },
+  { id: 4, frequency: 8, lastAccessedOn: 1497979281815 },
+  { id: 5, frequency: 34, lastAccessedOn: 1488089211943 },
+  { id: 6, frequency: 14, lastAccessedOn: 1493517292488 },
+  { id: 7, frequency: 42, lastAccessedOn: 1486815299875 },
+  { id: 8, frequency: 33, lastAccessedOn: 1500762279114 },
+  { id: 10, frequency: 46, lastAccessedOn: 1483251641543 },
+];
+
+/**
+ * This const has a specific order which tests authenticity
+ * of `getTopFrequentItems` method so
+ * DO NOT change order of items in this const.
+ */
+export const sortedFrequentItems = [
+  { id: 10, frequency: 46, lastAccessedOn: 1483251641543 },
+  { id: 3, frequency: 44, lastAccessedOn: 1497675908472 },
+  { id: 7, frequency: 42, lastAccessedOn: 1486815299875 },
+  { id: 5, frequency: 34, lastAccessedOn: 1488089211943 },
+  { id: 8, frequency: 33, lastAccessedOn: 1500762279114 },
+  { id: 6, frequency: 14, lastAccessedOn: 1493517292488 },
+  { id: 2, frequency: 14, lastAccessedOn: 1488240890738 },
+  { id: 1, frequency: 12, lastAccessedOn: 1491400843391 },
+  { id: 4, frequency: 8, lastAccessedOn: 1497979281815 },
+];
diff --git a/spec/javascripts/frequent_items/store/actions_spec.js b/spec/javascripts/frequent_items/store/actions_spec.js
new file mode 100644
index 00000000000..0cdd033d38f
--- /dev/null
+++ b/spec/javascripts/frequent_items/store/actions_spec.js
@@ -0,0 +1,225 @@
+import testAction from 'spec/helpers/vuex_action_helper';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import AccessorUtilities from '~/lib/utils/accessor';
+import * as actions from '~/frequent_items/store/actions';
+import * as types from '~/frequent_items/store/mutation_types';
+import state from '~/frequent_items/store/state';
+import {
+  mockNamespace,
+  mockStorageKey,
+  mockFrequentProjects,
+  mockSearchedProjects,
+} from '../mock_data';
+
+describe('Frequent Items Dropdown Store Actions', () => {
+  let mockedState;
+  let mock;
+
+  beforeEach(() => {
+    mockedState = state();
+    mock = new MockAdapter(axios);
+
+    mockedState.namespace = mockNamespace;
+    mockedState.storageKey = mockStorageKey;
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
+  describe('setNamespace', () => {
+    it('should set namespace', done => {
+      testAction(
+        actions.setNamespace,
+        mockNamespace,
+        mockedState,
+        [{ type: types.SET_NAMESPACE, payload: mockNamespace }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('setStorageKey', () => {
+    it('should set storage key', done => {
+      testAction(
+        actions.setStorageKey,
+        mockStorageKey,
+        mockedState,
+        [{ type: types.SET_STORAGE_KEY, payload: mockStorageKey }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('requestFrequentItems', () => {
+    it('should request frequent items', done => {
+      testAction(
+        actions.requestFrequentItems,
+        null,
+        mockedState,
+        [{ type: types.REQUEST_FREQUENT_ITEMS }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveFrequentItemsSuccess', () => {
+    it('should set frequent items', done => {
+      testAction(
+        actions.receiveFrequentItemsSuccess,
+        mockFrequentProjects,
+        mockedState,
+        [{ type: types.RECEIVE_FREQUENT_ITEMS_SUCCESS, payload: mockFrequentProjects }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveFrequentItemsError', () => {
+    it('should set frequent items error state', done => {
+      testAction(
+        actions.receiveFrequentItemsError,
+        null,
+        mockedState,
+        [{ type: types.RECEIVE_FREQUENT_ITEMS_ERROR }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('fetchFrequentItems', () => {
+    it('should dispatch `receiveFrequentItemsSuccess`', done => {
+      mockedState.namespace = mockNamespace;
+      mockedState.storageKey = mockStorageKey;
+
+      testAction(
+        actions.fetchFrequentItems,
+        null,
+        mockedState,
+        [],
+        [{ type: 'requestFrequentItems' }, { type: 'receiveFrequentItemsSuccess', payload: [] }],
+        done,
+      );
+    });
+
+    it('should dispatch `receiveFrequentItemsError`', done => {
+      spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').and.returnValue(false);
+      mockedState.namespace = mockNamespace;
+      mockedState.storageKey = mockStorageKey;
+
+      testAction(
+        actions.fetchFrequentItems,
+        null,
+        mockedState,
+        [],
+        [{ type: 'requestFrequentItems' }, { type: 'receiveFrequentItemsError' }],
+        done,
+      );
+    });
+  });
+
+  describe('requestSearchedItems', () => {
+    it('should request searched items', done => {
+      testAction(
+        actions.requestSearchedItems,
+        null,
+        mockedState,
+        [{ type: types.REQUEST_SEARCHED_ITEMS }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveSearchedItemsSuccess', () => {
+    it('should set searched items', done => {
+      testAction(
+        actions.receiveSearchedItemsSuccess,
+        mockSearchedProjects,
+        mockedState,
+        [{ type: types.RECEIVE_SEARCHED_ITEMS_SUCCESS, payload: mockSearchedProjects }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveSearchedItemsError', () => {
+    it('should set searched items error state', done => {
+      testAction(
+        actions.receiveSearchedItemsError,
+        null,
+        mockedState,
+        [{ type: types.RECEIVE_SEARCHED_ITEMS_ERROR }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('fetchSearchedItems', () => {
+    beforeEach(() => {
+      gon.api_version = 'v4';
+    });
+
+    it('should dispatch `receiveSearchedItemsSuccess`', done => {
+      mock.onGet(/\/api\/v4\/projects.json(.*)$/).replyOnce(200, mockSearchedProjects);
+
+      testAction(
+        actions.fetchSearchedItems,
+        null,
+        mockedState,
+        [],
+        [
+          { type: 'requestSearchedItems' },
+          { type: 'receiveSearchedItemsSuccess', payload: mockSearchedProjects },
+        ],
+        done,
+      );
+    });
+
+    it('should dispatch `receiveSearchedItemsError`', done => {
+      gon.api_version = 'v4';
+      mock.onGet(/\/api\/v4\/projects.json(.*)$/).replyOnce(500);
+
+      testAction(
+        actions.fetchSearchedItems,
+        null,
+        mockedState,
+        [],
+        [{ type: 'requestSearchedItems' }, { type: 'receiveSearchedItemsError' }],
+        done,
+      );
+    });
+  });
+
+  describe('setSearchQuery', () => {
+    it('should commit query and dispatch `fetchSearchedItems` when query is present', done => {
+      testAction(
+        actions.setSearchQuery,
+        { query: 'test' },
+        mockedState,
+        [{ type: types.SET_SEARCH_QUERY }],
+        [{ type: 'fetchSearchedItems', payload: { query: 'test' } }],
+        done,
+      );
+    });
+
+    it('should commit query and dispatch `fetchFrequentItems` when query is empty', done => {
+      testAction(
+        actions.setSearchQuery,
+        null,
+        mockedState,
+        [{ type: types.SET_SEARCH_QUERY }],
+        [{ type: 'fetchFrequentItems' }],
+        done,
+      );
+    });
+  });
+});
diff --git a/spec/javascripts/frequent_items/store/getters_spec.js b/spec/javascripts/frequent_items/store/getters_spec.js
new file mode 100644
index 00000000000..1cd12eb6832
--- /dev/null
+++ b/spec/javascripts/frequent_items/store/getters_spec.js
@@ -0,0 +1,24 @@
+import state from '~/frequent_items/store/state';
+import * as getters from '~/frequent_items/store/getters';
+
+describe('Frequent Items Dropdown Store Getters', () => {
+  let mockedState;
+
+  beforeEach(() => {
+    mockedState = state();
+  });
+
+  describe('hasSearchQuery', () => {
+    it('should return `true` when search query is present', () => {
+      mockedState.searchQuery = 'test';
+
+      expect(getters.hasSearchQuery(mockedState)).toBe(true);
+    });
+
+    it('should return `false` when search query is empty', () => {
+      mockedState.searchQuery = '';
+
+      expect(getters.hasSearchQuery(mockedState)).toBe(false);
+    });
+  });
+});
diff --git a/spec/javascripts/frequent_items/store/mutations_spec.js b/spec/javascripts/frequent_items/store/mutations_spec.js
new file mode 100644
index 00000000000..d36964b2600
--- /dev/null
+++ b/spec/javascripts/frequent_items/store/mutations_spec.js
@@ -0,0 +1,117 @@
+import state from '~/frequent_items/store/state';
+import mutations from '~/frequent_items/store/mutations';
+import * as types from '~/frequent_items/store/mutation_types';
+import {
+  mockNamespace,
+  mockStorageKey,
+  mockFrequentProjects,
+  mockSearchedProjects,
+  mockProcessedSearchedProjects,
+  mockSearchedGroups,
+  mockProcessedSearchedGroups,
+} from '../mock_data';
+
+describe('Frequent Items dropdown mutations', () => {
+  let stateCopy;
+
+  beforeEach(() => {
+    stateCopy = state();
+  });
+
+  describe('SET_NAMESPACE', () => {
+    it('should set namespace', () => {
+      mutations[types.SET_NAMESPACE](stateCopy, mockNamespace);
+
+      expect(stateCopy.namespace).toEqual(mockNamespace);
+    });
+  });
+
+  describe('SET_STORAGE_KEY', () => {
+    it('should set storage key', () => {
+      mutations[types.SET_STORAGE_KEY](stateCopy, mockStorageKey);
+
+      expect(stateCopy.storageKey).toEqual(mockStorageKey);
+    });
+  });
+
+  describe('SET_SEARCH_QUERY', () => {
+    it('should set search query', () => {
+      const searchQuery = 'gitlab-ce';
+
+      mutations[types.SET_SEARCH_QUERY](stateCopy, searchQuery);
+
+      expect(stateCopy.searchQuery).toEqual(searchQuery);
+    });
+  });
+
+  describe('REQUEST_FREQUENT_ITEMS', () => {
+    it('should set view states when requesting frequent items', () => {
+      mutations[types.REQUEST_FREQUENT_ITEMS](stateCopy);
+
+      expect(stateCopy.isLoadingItems).toEqual(true);
+      expect(stateCopy.hasSearchQuery).toEqual(false);
+    });
+  });
+
+  describe('RECEIVE_FREQUENT_ITEMS_SUCCESS', () => {
+    it('should set view states when receiving frequent items', () => {
+      mutations[types.RECEIVE_FREQUENT_ITEMS_SUCCESS](stateCopy, mockFrequentProjects);
+
+      expect(stateCopy.items).toEqual(mockFrequentProjects);
+      expect(stateCopy.isLoadingItems).toEqual(false);
+      expect(stateCopy.hasSearchQuery).toEqual(false);
+      expect(stateCopy.isFetchFailed).toEqual(false);
+    });
+  });
+
+  describe('RECEIVE_FREQUENT_ITEMS_ERROR', () => {
+    it('should set items and view states when error occurs retrieving frequent items', () => {
+      mutations[types.RECEIVE_FREQUENT_ITEMS_ERROR](stateCopy);
+
+      expect(stateCopy.items).toEqual([]);
+      expect(stateCopy.isLoadingItems).toEqual(false);
+      expect(stateCopy.hasSearchQuery).toEqual(false);
+      expect(stateCopy.isFetchFailed).toEqual(true);
+    });
+  });
+
+  describe('REQUEST_SEARCHED_ITEMS', () => {
+    it('should set view states when requesting searched items', () => {
+      mutations[types.REQUEST_SEARCHED_ITEMS](stateCopy);
+
+      expect(stateCopy.isLoadingItems).toEqual(true);
+      expect(stateCopy.hasSearchQuery).toEqual(true);
+    });
+  });
+
+  describe('RECEIVE_SEARCHED_ITEMS_SUCCESS', () => {
+    it('should set items and view states when receiving searched items', () => {
+      mutations[types.RECEIVE_SEARCHED_ITEMS_SUCCESS](stateCopy, mockSearchedProjects);
+
+      expect(stateCopy.items).toEqual(mockProcessedSearchedProjects);
+      expect(stateCopy.isLoadingItems).toEqual(false);
+      expect(stateCopy.hasSearchQuery).toEqual(true);
+      expect(stateCopy.isFetchFailed).toEqual(false);
+    });
+
+    it('should also handle the different `full_name` key for namespace in groups payload', () => {
+      mutations[types.RECEIVE_SEARCHED_ITEMS_SUCCESS](stateCopy, mockSearchedGroups);
+
+      expect(stateCopy.items).toEqual(mockProcessedSearchedGroups);
+      expect(stateCopy.isLoadingItems).toEqual(false);
+      expect(stateCopy.hasSearchQuery).toEqual(true);
+      expect(stateCopy.isFetchFailed).toEqual(false);
+    });
+  });
+
+  describe('RECEIVE_SEARCHED_ITEMS_ERROR', () => {
+    it('should set view states when error occurs retrieving searched items', () => {
+      mutations[types.RECEIVE_SEARCHED_ITEMS_ERROR](stateCopy);
+
+      expect(stateCopy.items).toEqual([]);
+      expect(stateCopy.isLoadingItems).toEqual(false);
+      expect(stateCopy.hasSearchQuery).toEqual(true);
+      expect(stateCopy.isFetchFailed).toEqual(true);
+    });
+  });
+});
diff --git a/spec/javascripts/frequent_items/utils_spec.js b/spec/javascripts/frequent_items/utils_spec.js
new file mode 100644
index 00000000000..cd27d79b29a
--- /dev/null
+++ b/spec/javascripts/frequent_items/utils_spec.js
@@ -0,0 +1,89 @@
+import bp from '~/breakpoints';
+import { isMobile, getTopFrequentItems, updateExistingFrequentItem } from '~/frequent_items/utils';
+import { HOUR_IN_MS, FREQUENT_ITEMS } from '~/frequent_items/constants';
+import { mockProject, unsortedFrequentItems, sortedFrequentItems } from './mock_data';
+
+describe('Frequent Items utils spec', () => {
+  describe('isMobile', () => {
+    it('returns true when the screen is small ', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('sm');
+
+      expect(isMobile()).toBe(true);
+    });
+
+    it('returns true when the screen is extra-small ', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('xs');
+
+      expect(isMobile()).toBe(true);
+    });
+
+    it('returns false when the screen is larger than small ', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('md');
+
+      expect(isMobile()).toBe(false);
+    });
+  });
+
+  describe('getTopFrequentItems', () => {
+    it('returns empty array if no items provided', () => {
+      const result = getTopFrequentItems();
+
+      expect(result.length).toBe(0);
+    });
+
+    it('returns correct amount of items for mobile', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('sm');
+      const result = getTopFrequentItems(unsortedFrequentItems);
+
+      expect(result.length).toBe(FREQUENT_ITEMS.LIST_COUNT_MOBILE);
+    });
+
+    it('returns correct amount of items for desktop', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('lg');
+      const result = getTopFrequentItems(unsortedFrequentItems);
+
+      expect(result.length).toBe(FREQUENT_ITEMS.LIST_COUNT_DESKTOP);
+    });
+
+    it('sorts frequent items in order of frequency and lastAccessedOn', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('lg');
+      const result = getTopFrequentItems(unsortedFrequentItems);
+      const expectedResult = sortedFrequentItems.slice(0, FREQUENT_ITEMS.LIST_COUNT_DESKTOP);
+
+      expect(result).toEqual(expectedResult);
+    });
+  });
+
+  describe('updateExistingFrequentItem', () => {
+    let mockedProject;
+
+    beforeEach(() => {
+      mockedProject = {
+        ...mockProject,
+        frequency: 1,
+        lastAccessedOn: 1497979281815,
+      };
+    });
+
+    it('updates item if accessed over an hour ago', () => {
+      const newTimestamp = Date.now() + HOUR_IN_MS + 1;
+      const newItem = {
+        ...mockedProject,
+        lastAccessedOn: newTimestamp,
+      };
+      const result = updateExistingFrequentItem(mockedProject, newItem);
+
+      expect(result.frequency).toBe(mockedProject.frequency + 1);
+    });
+
+    it('does not update item if accessed within the hour', () => {
+      const newItem = {
+        ...mockedProject,
+        lastAccessedOn: mockedProject.lastAccessedOn + HOUR_IN_MS,
+      };
+      const result = updateExistingFrequentItem(mockedProject, newItem);
+
+      expect(result.frequency).toBe(mockedProject.frequency);
+    });
+  });
+});