Resolve "Add dropdown to Groups link in top bar"

16 files changed, 1051 insertions, 939 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/projects_dropdown/components/projects_list_item_spec.js b/spec/javascripts/frequent_items/components/frequent_items_list_item_spec.js
index c193258474e..201aca77b10 100644
--- a/spec/javascripts/projects_dropdown/components/projects_list_item_spec.js
+++ b/spec/javascripts/frequent_items/components/frequent_items_list_item_spec.js
@@ -1,23 +1,21 @@
 import Vue from 'vue';
-
-import projectsListItemComponent from '~/projects_dropdown/components/projects_list_item.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';
+import { mockProject } from '../mock_data'; // can also use 'mockGroup', but not useful to test here
 
 const createComponent = () => {
-  const Component = Vue.extend(projectsListItemComponent);
+  const Component = Vue.extend(frequentItemsListItemComponent);
 
   return mountComponent(Component, {
-    projectId: mockProject.id,
-    projectName: mockProject.name,
+    itemId: mockProject.id,
+    itemName: mockProject.name,
     namespace: mockProject.namespace,
     webUrl: mockProject.webUrl,
     avatarUrl: mockProject.avatarUrl,
   });
 };
 
-describe('ProjectsListItemComponent', () => {
+describe('FrequentItemsListItemComponent', () => {
   let vm;
 
   beforeEach(() => {
@@ -32,22 +30,22 @@ describe('ProjectsListItemComponent', () => {
     describe('hasAvatar', () => {
       it('should return `true` or `false` if whether avatar is present or not', () => {
         vm.avatarUrl = 'path/to/avatar.png';
-        expect(vm.hasAvatar).toBeTruthy();
+        expect(vm.hasAvatar).toBe(true);
 
         vm.avatarUrl = null;
-        expect(vm.hasAvatar).toBeFalsy();
+        expect(vm.hasAvatar).toBe(false);
       });
     });
 
-    describe('highlightedProjectName', () => {
+    describe('highlightedItemName', () => {
       it('should enclose part of project name in <b> & </b> which matches with `matcher` prop', () => {
         vm.matcher = 'lab';
-        expect(vm.highlightedProjectName).toContain('<b>Lab</b>');
+        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.highlightedProjectName).toBe(mockProject.name);
+        expect(vm.highlightedItemName).toBe(mockProject.name);
       });
     });
 
@@ -66,12 +64,12 @@ describe('ProjectsListItemComponent', () => {
 
   describe('template', () => {
     it('should render component element', () => {
-      expect(vm.$el.classList.contains('projects-list-item-container')).toBeTruthy();
+      expect(vm.$el.classList.contains('frequent-items-list-item-container')).toBeTruthy();
       expect(vm.$el.querySelectorAll('a').length).toBe(1);
-      expect(vm.$el.querySelectorAll('.project-item-avatar-container').length).toBe(1);
-      expect(vm.$el.querySelectorAll('.project-item-metadata-container').length).toBe(1);
-      expect(vm.$el.querySelectorAll('.project-title').length).toBe(1);
-      expect(vm.$el.querySelectorAll('.project-namespace').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);
+    });
+  });
+});
diff --git a/spec/javascripts/projects_dropdown/components/app_spec.js b/spec/javascripts/projects_dropdown/components/app_spec.js
deleted file mode 100644
index 38b31c3d727..00000000000
--- a/spec/javascripts/projects_dropdown/components/app_spec.js
+++ /dev/null
@@ -1,349 +0,0 @@
-import Vue from 'vue';
-
-import bp from '~/breakpoints';
-import appComponent from '~/projects_dropdown/components/app.vue';
-import eventHub from '~/projects_dropdown/event_hub';
-import ProjectsStore from '~/projects_dropdown/store/projects_store';
-import ProjectsService from '~/projects_dropdown/service/projects_service';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { currentSession, mockProject, mockRawProject } from '../mock_data';
-
-const createComponent = () => {
-  gon.api_version = currentSession.apiVersion;
-  const Component = Vue.extend(appComponent);
-  const store = new ProjectsStore();
-  const service = new ProjectsService(currentSession.username);
-
-  return mountComponent(Component, {
-    store,
-    service,
-    currentUserName: currentSession.username,
-    currentProject: currentSession.project,
-  });
-};
-
-const returnServicePromise = (data, failed) =>
-  new Promise((resolve, reject) => {
-    if (failed) {
-      reject(data);
-    } else {
-      resolve({
-        json() {
-          return data;
-        },
-      });
-    }
-  });
-
-describe('AppComponent', () => {
-  describe('computed', () => {
-    let vm;
-
-    beforeEach(() => {
-      vm = createComponent();
-    });
-
-    afterEach(() => {
-      vm.$destroy();
-    });
-
-    describe('frequentProjects', () => {
-      it('should return list of frequently accessed projects from store', () => {
-        expect(vm.frequentProjects).toBeDefined();
-        expect(vm.frequentProjects.length).toBe(0);
-
-        vm.store.setFrequentProjects([mockProject]);
-        expect(vm.frequentProjects).toBeDefined();
-        expect(vm.frequentProjects.length).toBe(1);
-      });
-    });
-
-    describe('searchProjects', () => {
-      it('should return list of frequently accessed projects from store', () => {
-        expect(vm.searchProjects).toBeDefined();
-        expect(vm.searchProjects.length).toBe(0);
-
-        vm.store.setSearchedProjects([mockRawProject]);
-        expect(vm.searchProjects).toBeDefined();
-        expect(vm.searchProjects.length).toBe(1);
-      });
-    });
-  });
-
-  describe('methods', () => {
-    let vm;
-
-    beforeEach(() => {
-      vm = createComponent();
-    });
-
-    afterEach(() => {
-      vm.$destroy();
-    });
-
-    describe('toggleFrequentProjectsList', () => {
-      it('should toggle props which control visibility of Frequent Projects list from state passed', () => {
-        vm.toggleFrequentProjectsList(true);
-        expect(vm.isLoadingProjects).toBeFalsy();
-        expect(vm.isSearchListVisible).toBeFalsy();
-        expect(vm.isFrequentsListVisible).toBeTruthy();
-
-        vm.toggleFrequentProjectsList(false);
-        expect(vm.isLoadingProjects).toBeTruthy();
-        expect(vm.isSearchListVisible).toBeTruthy();
-        expect(vm.isFrequentsListVisible).toBeFalsy();
-      });
-    });
-
-    describe('toggleSearchProjectsList', () => {
-      it('should toggle props which control visibility of Searched Projects list from state passed', () => {
-        vm.toggleSearchProjectsList(true);
-        expect(vm.isLoadingProjects).toBeFalsy();
-        expect(vm.isFrequentsListVisible).toBeFalsy();
-        expect(vm.isSearchListVisible).toBeTruthy();
-
-        vm.toggleSearchProjectsList(false);
-        expect(vm.isLoadingProjects).toBeTruthy();
-        expect(vm.isFrequentsListVisible).toBeTruthy();
-        expect(vm.isSearchListVisible).toBeFalsy();
-      });
-    });
-
-    describe('toggleLoader', () => {
-      it('should toggle props which control visibility of list loading animation from state passed', () => {
-        vm.toggleLoader(true);
-        expect(vm.isFrequentsListVisible).toBeFalsy();
-        expect(vm.isSearchListVisible).toBeFalsy();
-        expect(vm.isLoadingProjects).toBeTruthy();
-
-        vm.toggleLoader(false);
-        expect(vm.isFrequentsListVisible).toBeTruthy();
-        expect(vm.isSearchListVisible).toBeTruthy();
-        expect(vm.isLoadingProjects).toBeFalsy();
-      });
-    });
-
-    describe('fetchFrequentProjects', () => {
-      it('should set props for loading animation to `true` while frequent projects list is being loaded', () => {
-        spyOn(vm, 'toggleLoader');
-
-        vm.fetchFrequentProjects();
-        expect(vm.isLocalStorageFailed).toBeFalsy();
-        expect(vm.toggleLoader).toHaveBeenCalledWith(true);
-      });
-
-      it('should set props for loading animation to `false` and props for frequent projects list to `true` once data is loaded', () => {
-        const mockData = [mockProject];
-
-        spyOn(vm.service, 'getFrequentProjects').and.returnValue(mockData);
-        spyOn(vm.store, 'setFrequentProjects');
-        spyOn(vm, 'toggleFrequentProjectsList');
-
-        vm.fetchFrequentProjects();
-        expect(vm.service.getFrequentProjects).toHaveBeenCalled();
-        expect(vm.store.setFrequentProjects).toHaveBeenCalledWith(mockData);
-        expect(vm.toggleFrequentProjectsList).toHaveBeenCalledWith(true);
-      });
-
-      it('should set props for failure message to `true` when method fails to fetch frequent projects list', () => {
-        spyOn(vm.service, 'getFrequentProjects').and.returnValue(null);
-        spyOn(vm.store, 'setFrequentProjects');
-        spyOn(vm, 'toggleFrequentProjectsList');
-
-        expect(vm.isLocalStorageFailed).toBeFalsy();
-
-        vm.fetchFrequentProjects();
-        expect(vm.service.getFrequentProjects).toHaveBeenCalled();
-        expect(vm.store.setFrequentProjects).toHaveBeenCalledWith([]);
-        expect(vm.toggleFrequentProjectsList).toHaveBeenCalledWith(true);
-        expect(vm.isLocalStorageFailed).toBeTruthy();
-      });
-
-      it('should set props for search results list to `true` if search query was already made previously', () => {
-        spyOn(bp, 'getBreakpointSize').and.returnValue('md');
-        spyOn(vm.service, 'getFrequentProjects');
-        spyOn(vm, 'toggleSearchProjectsList');
-
-        vm.searchQuery = 'test';
-        vm.fetchFrequentProjects();
-        expect(vm.service.getFrequentProjects).not.toHaveBeenCalled();
-        expect(vm.toggleSearchProjectsList).toHaveBeenCalledWith(true);
-      });
-
-      it('should set props for frequent projects list to `true` if search query was already made but screen size is less than 768px', () => {
-        spyOn(bp, 'getBreakpointSize').and.returnValue('sm');
-        spyOn(vm, 'toggleSearchProjectsList');
-        spyOn(vm.service, 'getFrequentProjects');
-
-        vm.searchQuery = 'test';
-        vm.fetchFrequentProjects();
-        expect(vm.service.getFrequentProjects).toHaveBeenCalled();
-        expect(vm.toggleSearchProjectsList).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('fetchSearchedProjects', () => {
-      const searchQuery = 'test';
-
-      it('should perform search with provided search query', done => {
-        const mockData = [mockRawProject];
-        spyOn(vm, 'toggleLoader');
-        spyOn(vm, 'toggleSearchProjectsList');
-        spyOn(vm.service, 'getSearchedProjects').and.returnValue(returnServicePromise(mockData));
-        spyOn(vm.store, 'setSearchedProjects');
-
-        vm.fetchSearchedProjects(searchQuery);
-        setTimeout(() => {
-          expect(vm.searchQuery).toBe(searchQuery);
-          expect(vm.toggleLoader).toHaveBeenCalledWith(true);
-          expect(vm.service.getSearchedProjects).toHaveBeenCalledWith(searchQuery);
-          expect(vm.toggleSearchProjectsList).toHaveBeenCalledWith(true);
-          expect(vm.store.setSearchedProjects).toHaveBeenCalledWith(mockData);
-          done();
-        }, 0);
-      });
-
-      it('should update props for showing search failure', done => {
-        spyOn(vm, 'toggleSearchProjectsList');
-        spyOn(vm.service, 'getSearchedProjects').and.returnValue(returnServicePromise({}, true));
-
-        vm.fetchSearchedProjects(searchQuery);
-        setTimeout(() => {
-          expect(vm.searchQuery).toBe(searchQuery);
-          expect(vm.service.getSearchedProjects).toHaveBeenCalledWith(searchQuery);
-          expect(vm.isSearchFailed).toBeTruthy();
-          expect(vm.toggleSearchProjectsList).toHaveBeenCalledWith(true);
-          done();
-        }, 0);
-      });
-    });
-
-    describe('logCurrentProjectAccess', () => {
-      it('should log current project access via service', done => {
-        spyOn(vm.service, 'logProjectAccess');
-
-        vm.currentProject = mockProject;
-        vm.logCurrentProjectAccess();
-
-        setTimeout(() => {
-          expect(vm.service.logProjectAccess).toHaveBeenCalledWith(mockProject);
-          done();
-        }, 1);
-      });
-    });
-
-    describe('handleSearchClear', () => {
-      it('should show frequent projects list when search input is cleared', () => {
-        spyOn(vm.store, 'clearSearchedProjects');
-        spyOn(vm, 'toggleFrequentProjectsList');
-
-        vm.handleSearchClear();
-
-        expect(vm.toggleFrequentProjectsList).toHaveBeenCalledWith(true);
-        expect(vm.store.clearSearchedProjects).toHaveBeenCalled();
-        expect(vm.searchQuery).toBe('');
-      });
-    });
-
-    describe('handleSearchFailure', () => {
-      it('should show failure message within dropdown', () => {
-        spyOn(vm, 'toggleSearchProjectsList');
-
-        vm.handleSearchFailure();
-        expect(vm.toggleSearchProjectsList).toHaveBeenCalledWith(true);
-        expect(vm.isSearchFailed).toBeTruthy();
-      });
-    });
-  });
-
-  describe('created', () => {
-    it('should bind event listeners on eventHub', done => {
-      spyOn(eventHub, '$on');
-
-      createComponent().$mount();
-
-      Vue.nextTick(() => {
-        expect(eventHub.$on).toHaveBeenCalledWith('dropdownOpen', jasmine.any(Function));
-        expect(eventHub.$on).toHaveBeenCalledWith('searchProjects', jasmine.any(Function));
-        expect(eventHub.$on).toHaveBeenCalledWith('searchCleared', jasmine.any(Function));
-        expect(eventHub.$on).toHaveBeenCalledWith('searchFailed', jasmine.any(Function));
-        done();
-      });
-    });
-  });
-
-  describe('beforeDestroy', () => {
-    it('should unbind event listeners on eventHub', done => {
-      const vm = createComponent();
-      spyOn(eventHub, '$off');
-
-      vm.$mount();
-      vm.$destroy();
-
-      Vue.nextTick(() => {
-        expect(eventHub.$off).toHaveBeenCalledWith('dropdownOpen', jasmine.any(Function));
-        expect(eventHub.$off).toHaveBeenCalledWith('searchProjects', jasmine.any(Function));
-        expect(eventHub.$off).toHaveBeenCalledWith('searchCleared', jasmine.any(Function));
-        expect(eventHub.$off).toHaveBeenCalledWith('searchFailed', jasmine.any(Function));
-        done();
-      });
-    });
-  });
-
-  describe('template', () => {
-    let vm;
-
-    beforeEach(() => {
-      vm = createComponent();
-    });
-
-    afterEach(() => {
-      vm.$destroy();
-    });
-
-    it('should render search input', () => {
-      expect(vm.$el.querySelector('.search-input-container')).toBeDefined();
-    });
-
-    it('should render loading animation', done => {
-      vm.toggleLoader(true);
-      Vue.nextTick(() => {
-        const loadingEl = vm.$el.querySelector('.loading-animation');
-
-        expect(loadingEl).toBeDefined();
-        expect(loadingEl.classList.contains('prepend-top-20')).toBeTruthy();
-        expect(loadingEl.querySelector('i').getAttribute('aria-label')).toBe('Loading projects');
-        done();
-      });
-    });
-
-    it('should render frequent projects list header', done => {
-      vm.toggleFrequentProjectsList(true);
-      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 => {
-      vm.toggleFrequentProjectsList(true);
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.projects-list-frequent-container')).toBeDefined();
-        done();
-      });
-    });
-
-    it('should render searched projects list', done => {
-      vm.toggleSearchProjectsList(true);
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.section-header')).toBe(null);
-        expect(vm.$el.querySelector('.projects-list-search-container')).toBeDefined();
-        done();
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/projects_dropdown/components/projects_list_frequent_spec.js b/spec/javascripts/projects_dropdown/components/projects_list_frequent_spec.js
deleted file mode 100644
index 2bafb4e81ca..00000000000
--- a/spec/javascripts/projects_dropdown/components/projects_list_frequent_spec.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import Vue from 'vue';
-
-import projectsListFrequentComponent from '~/projects_dropdown/components/projects_list_frequent.vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockFrequents } from '../mock_data';
-
-const createComponent = () => {
-  const Component = Vue.extend(projectsListFrequentComponent);
-
-  return mountComponent(Component, {
-    projects: mockFrequents,
-    localStorageFailed: false,
-  });
-};
-
-describe('ProjectsListFrequentComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('computed', () => {
-    describe('isListEmpty', () => {
-      it('should return `true` or `false` representing whether if `projects` is empty of not', () => {
-        vm.projects = [];
-        expect(vm.isListEmpty).toBeTruthy();
-
-        vm.projects = mockFrequents;
-        expect(vm.isListEmpty).toBeFalsy();
-      });
-    });
-
-    describe('listEmptyMessage', () => {
-      it('should return appropriate empty list message based on value of `localStorageFailed` prop', () => {
-        vm.localStorageFailed = true;
-        expect(vm.listEmptyMessage).toBe('This feature requires browser localStorage support');
-
-        vm.localStorageFailed = false;
-        expect(vm.listEmptyMessage).toBe('Projects you visit often will appear here');
-      });
-    });
-  });
-
-  describe('template', () => {
-    it('should render component element with list of projects', (done) => {
-      vm.projects = mockFrequents;
-
-      Vue.nextTick(() => {
-        expect(vm.$el.classList.contains('projects-list-frequent-container')).toBeTruthy();
-        expect(vm.$el.querySelectorAll('ul.list-unstyled').length).toBe(1);
-        expect(vm.$el.querySelectorAll('li.projects-list-item-container').length).toBe(5);
-        done();
-      });
-    });
-
-    it('should render component element with empty message', (done) => {
-      vm.projects = [];
-
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelectorAll('li.section-empty').length).toBe(1);
-        expect(vm.$el.querySelectorAll('li.projects-list-item-container').length).toBe(0);
-        done();
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/projects_dropdown/components/projects_list_search_spec.js b/spec/javascripts/projects_dropdown/components/projects_list_search_spec.js
deleted file mode 100644
index c4b86d77034..00000000000
--- a/spec/javascripts/projects_dropdown/components/projects_list_search_spec.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import Vue from 'vue';
-
-import projectsListSearchComponent from '~/projects_dropdown/components/projects_list_search.vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockProject } from '../mock_data';
-
-const createComponent = () => {
-  const Component = Vue.extend(projectsListSearchComponent);
-
-  return mountComponent(Component, {
-    projects: [mockProject],
-    matcher: 'lab',
-    searchFailed: false,
-  });
-};
-
-describe('ProjectsListSearchComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('computed', () => {
-    describe('isListEmpty', () => {
-      it('should return `true` or `false` representing whether if `projects` is empty of not', () => {
-        vm.projects = [];
-        expect(vm.isListEmpty).toBeTruthy();
-
-        vm.projects = [mockProject];
-        expect(vm.isListEmpty).toBeFalsy();
-      });
-    });
-
-    describe('listEmptyMessage', () => {
-      it('should return appropriate empty list message based on value of `searchFailed` prop', () => {
-        vm.searchFailed = true;
-        expect(vm.listEmptyMessage).toBe('Something went wrong on our end.');
-
-        vm.searchFailed = false;
-        expect(vm.listEmptyMessage).toBe('Sorry, no projects matched your search');
-      });
-    });
-  });
-
-  describe('template', () => {
-    it('should render component element with list of projects', (done) => {
-      vm.projects = [mockProject];
-
-      Vue.nextTick(() => {
-        expect(vm.$el.classList.contains('projects-list-search-container')).toBeTruthy();
-        expect(vm.$el.querySelectorAll('ul.list-unstyled').length).toBe(1);
-        expect(vm.$el.querySelectorAll('li.projects-list-item-container').length).toBe(1);
-        done();
-      });
-    });
-
-    it('should render component element with empty message', (done) => {
-      vm.projects = [];
-
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelectorAll('li.section-empty').length).toBe(1);
-        expect(vm.$el.querySelectorAll('li.projects-list-item-container').length).toBe(0);
-        done();
-      });
-    });
-
-    it('should render component element with failure message', (done) => {
-      vm.searchFailed = true;
-      vm.projects = [];
-
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelectorAll('li.section-empty.section-failure').length).toBe(1);
-        expect(vm.$el.querySelectorAll('li.projects-list-item-container').length).toBe(0);
-        done();
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/projects_dropdown/components/search_spec.js b/spec/javascripts/projects_dropdown/components/search_spec.js
deleted file mode 100644
index 427f5024e3a..00000000000
--- a/spec/javascripts/projects_dropdown/components/search_spec.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import Vue from 'vue';
-
-import searchComponent from '~/projects_dropdown/components/search.vue';
-import eventHub from '~/projects_dropdown/event_hub';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-const createComponent = () => {
-  const Component = Vue.extend(searchComponent);
-
-  return mountComponent(Component);
-};
-
-describe('SearchComponent', () => {
-  describe('methods', () => {
-    let vm;
-
-    beforeEach(() => {
-      vm = createComponent();
-    });
-
-    afterEach(() => {
-      vm.$destroy();
-    });
-
-    describe('setFocus', () => {
-      it('should set focus to search input', () => {
-        spyOn(vm.$refs.search, 'focus');
-
-        vm.setFocus();
-        expect(vm.$refs.search.focus).toHaveBeenCalled();
-      });
-    });
-
-    describe('emitSearchEvents', () => {
-      it('should emit `searchProjects` event via eventHub when `searchQuery` present', () => {
-        const searchQuery = 'test';
-        spyOn(eventHub, '$emit');
-        vm.searchQuery = searchQuery;
-        vm.emitSearchEvents();
-        expect(eventHub.$emit).toHaveBeenCalledWith('searchProjects', searchQuery);
-      });
-
-      it('should emit `searchCleared` event via eventHub when `searchQuery` is cleared', () => {
-        spyOn(eventHub, '$emit');
-        vm.searchQuery = '';
-        vm.emitSearchEvents();
-        expect(eventHub.$emit).toHaveBeenCalledWith('searchCleared');
-      });
-    });
-  });
-
-  describe('mounted', () => {
-    it('should listen `dropdownOpen` event', (done) => {
-      spyOn(eventHub, '$on');
-      createComponent();
-
-      Vue.nextTick(() => {
-        expect(eventHub.$on).toHaveBeenCalledWith('dropdownOpen', jasmine.any(Function));
-        done();
-      });
-    });
-  });
-
-  describe('beforeDestroy', () => {
-    it('should unbind event listeners on eventHub', (done) => {
-      const vm = createComponent();
-      spyOn(eventHub, '$off');
-
-      vm.$mount();
-      vm.$destroy();
-
-      Vue.nextTick(() => {
-        expect(eventHub.$off).toHaveBeenCalledWith('dropdownOpen', jasmine.any(Function));
-        done();
-      });
-    });
-  });
-
-  describe('template', () => {
-    let vm;
-
-    beforeEach(() => {
-      vm = createComponent();
-    });
-
-    afterEach(() => {
-      vm.$destroy();
-    });
-
-    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/projects_dropdown/mock_data.js b/spec/javascripts/projects_dropdown/mock_data.js
deleted file mode 100644
index d6a79fb8ac1..00000000000
--- a/spec/javascripts/projects_dropdown/mock_data.js
+++ /dev/null
@@ -1,96 +0,0 @@
-export const currentSession = {
-  username: 'root',
-  storageKey: 'root/frequent-projects',
-  apiVersion: 'v4',
-  project: {
-    id: 1,
-    name: 'dummy-project',
-    namespace: 'SamepleGroup / Dummy-Project',
-    webUrl: 'http://127.0.0.1/samplegroup/dummy-project',
-    avatarUrl: null,
-    lastAccessedOn: Date.now(),
-  },
-};
-
-export const mockProject = {
-  id: 1,
-  name: 'GitLab Community Edition',
-  namespace: 'gitlab-org / gitlab-ce',
-  webUrl: 'http://127.0.0.1:3000/gitlab-org/gitlab-ce',
-  avatarUrl: null,
-};
-
-export const mockRawProject = {
-  id: 1,
-  name: 'GitLab Community Edition',
-  name_with_namespace: 'gitlab-org / gitlab-ce',
-  web_url: 'http://127.0.0.1:3000/gitlab-org/gitlab-ce',
-  avatar_url: null,
-};
-
-export const mockFrequents = [
-  {
-    id: 1,
-    name: 'GitLab Community Edition',
-    namespace: 'gitlab-org / gitlab-ce',
-    webUrl: 'http://127.0.0.1:3000/gitlab-org/gitlab-ce',
-    avatarUrl: null,
-  },
-  {
-    id: 2,
-    name: 'GitLab CI',
-    namespace: 'gitlab-org / gitlab-ci',
-    webUrl: 'http://127.0.0.1:3000/gitlab-org/gitlab-ci',
-    avatarUrl: null,
-  },
-  {
-    id: 3,
-    name: 'Typeahead.Js',
-    namespace: 'twitter / typeahead-js',
-    webUrl: 'http://127.0.0.1:3000/twitter/typeahead-js',
-    avatarUrl: '/uploads/-/system/project/avatar/7/TWBS.png',
-  },
-  {
-    id: 4,
-    name: 'Intel',
-    namespace: 'platform / hardware / bsp / intel',
-    webUrl: 'http://127.0.0.1:3000/platform/hardware/bsp/intel',
-    avatarUrl: null,
-  },
-  {
-    id: 5,
-    name: 'v4.4',
-    namespace: 'platform / hardware / bsp / kernel / common / v4.4',
-    webUrl: 'http://localhost:3000/platform/hardware/bsp/kernel/common/v4.4',
-    avatarUrl: null,
-  },
-];
-
-export const unsortedFrequents = [
-  { 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 `ProjectsService.getTopFrequentProjects` method so
- * DO NOT change order of items in this const.
- */
-export const sortedFrequents = [
-  { 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/projects_dropdown/service/projects_service_spec.js b/spec/javascripts/projects_dropdown/service/projects_service_spec.js
deleted file mode 100644
index cfd1bb7d24f..00000000000
--- a/spec/javascripts/projects_dropdown/service/projects_service_spec.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-import bp from '~/breakpoints';
-import ProjectsService from '~/projects_dropdown/service/projects_service';
-import { FREQUENT_PROJECTS } from '~/projects_dropdown/constants';
-import { currentSession, unsortedFrequents, sortedFrequents } from '../mock_data';
-
-Vue.use(VueResource);
-
-FREQUENT_PROJECTS.MAX_COUNT = 3;
-
-describe('ProjectsService', () => {
-  let service;
-
-  beforeEach(() => {
-    gon.api_version = currentSession.apiVersion;
-    gon.current_user_id = 1;
-    service = new ProjectsService(currentSession.username);
-  });
-
-  describe('contructor', () => {
-    it('should initialize default properties of class', () => {
-      expect(service.isLocalStorageAvailable).toBeTruthy();
-      expect(service.currentUserName).toBe(currentSession.username);
-      expect(service.storageKey).toBe(currentSession.storageKey);
-      expect(service.projectsPath).toBeDefined();
-    });
-  });
-
-  describe('getSearchedProjects', () => {
-    it('should return promise from VueResource HTTP GET', () => {
-      spyOn(service.projectsPath, 'get').and.stub();
-
-      const searchQuery = 'lab';
-      const queryParams = {
-        simple: true,
-        per_page: 20,
-        membership: true,
-        order_by: 'last_activity_at',
-        search: searchQuery,
-      };
-
-      service.getSearchedProjects(searchQuery);
-      expect(service.projectsPath.get).toHaveBeenCalledWith(queryParams);
-    });
-  });
-
-  describe('logProjectAccess', () => {
-    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', () => {
-      service.logProjectAccess(currentSession.project);
-
-      const projects = JSON.parse(storage[currentSession.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', () => {
-      service.logProjectAccess(currentSession.project);
-      service.logProjectAccess(currentSession.project);
-
-      const projects = JSON.parse(storage[currentSession.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;
-      spyOn(Math, 'abs').and.returnValue(3600001); // this will lead to `diff` > 1;
-      service.logProjectAccess(currentSession.project);
-
-      projects = JSON.parse(storage[currentSession.storageKey]);
-      expect(projects[0].frequency).toBe(1);
-
-      service.logProjectAccess(currentSession.project);
-      projects = JSON.parse(storage[currentSession.storageKey]);
-      expect(projects[0].frequency).toBe(2);
-      expect(projects[0].lastAccessedOn).not.toBe(currentSession.project.lastAccessedOn);
-    });
-
-    it('should always update project metadata', () => {
-      let projects;
-      const oldProject = {
-        ...currentSession.project,
-      };
-
-      const newProject = {
-        ...currentSession.project,
-        name: 'New Name',
-        avatarUrl: 'new/avatar.png',
-        namespace: 'New / Namespace',
-        webUrl: 'http://localhost/new/web/url',
-      };
-
-      service.logProjectAccess(oldProject);
-      projects = JSON.parse(storage[currentSession.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);
-
-      service.logProjectAccess(newProject);
-      projects = JSON.parse(storage[currentSession.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 i = 1; i <= 5; i += 1) {
-        const project = Object.assign(currentSession.project, { id: i });
-        service.logProjectAccess(project);
-      }
-
-      const projects = JSON.parse(storage[currentSession.storageKey]);
-      expect(projects.length).toBe(3);
-    });
-  });
-
-  describe('getTopFrequentProjects', () => {
-    let storage = {};
-
-    beforeEach(() => {
-      storage[currentSession.storageKey] = JSON.stringify(unsortedFrequents);
-
-      spyOn(window.localStorage, 'getItem').and.callFake((storageKey) => {
-        if (storage[storageKey]) {
-          return storage[storageKey];
-        }
-
-        return null;
-      });
-    });
-
-    it('should return top 5 frequently accessed projects for desktop screens', () => {
-      spyOn(bp, 'getBreakpointSize').and.returnValue('md');
-      const frequentProjects = service.getTopFrequentProjects();
-
-      expect(frequentProjects.length).toBe(5);
-      frequentProjects.forEach((project, index) => {
-        expect(project.id).toBe(sortedFrequents[index].id);
-      });
-    });
-
-    it('should return top 3 frequently accessed projects for mobile screens', () => {
-      spyOn(bp, 'getBreakpointSize').and.returnValue('sm');
-      const frequentProjects = service.getTopFrequentProjects();
-
-      expect(frequentProjects.length).toBe(3);
-      frequentProjects.forEach((project, index) => {
-        expect(project.id).toBe(sortedFrequents[index].id);
-      });
-    });
-
-    it('should return empty array if there are no projects available in store', () => {
-      storage = {};
-      expect(service.getTopFrequentProjects().length).toBe(0);
-    });
-  });
-});
diff --git a/spec/javascripts/projects_dropdown/store/projects_store_spec.js b/spec/javascripts/projects_dropdown/store/projects_store_spec.js
deleted file mode 100644
index e57399d37cd..00000000000
--- a/spec/javascripts/projects_dropdown/store/projects_store_spec.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import ProjectsStore from '~/projects_dropdown/store/projects_store';
-import { mockProject, mockRawProject } from '../mock_data';
-
-describe('ProjectsStore', () => {
-  let store;
-
-  beforeEach(() => {
-    store = new ProjectsStore();
-  });
-
-  describe('setFrequentProjects', () => {
-    it('should set frequent projects list to state', () => {
-      store.setFrequentProjects([mockProject]);
-
-      expect(store.getFrequentProjects().length).toBe(1);
-      expect(store.getFrequentProjects()[0].id).toBe(mockProject.id);
-    });
-  });
-
-  describe('setSearchedProjects', () => {
-    it('should set searched projects list to state', () => {
-      store.setSearchedProjects([mockRawProject]);
-
-      const processedProjects = store.getSearchedProjects();
-      expect(processedProjects.length).toBe(1);
-      expect(processedProjects[0].id).toBe(mockRawProject.id);
-      expect(processedProjects[0].namespace).toBe(mockRawProject.name_with_namespace);
-      expect(processedProjects[0].webUrl).toBe(mockRawProject.web_url);
-      expect(processedProjects[0].avatarUrl).toBe(mockRawProject.avatar_url);
-    });
-  });
-
-  describe('clearSearchedProjects', () => {
-    it('should clear searched projects list from state', () => {
-      store.setSearchedProjects([mockRawProject]);
-      expect(store.getSearchedProjects().length).toBe(1);
-      store.clearSearchedProjects();
-      expect(store.getSearchedProjects().length).toBe(0);
-    });
-  });
-});