Merge branch 'master' into 'issue_38337'

# Conflicts:
#   app/models/group.rb
#   db/schema.rb

66 files changed, 1372 insertions, 4466 deletions

diff --git a/spec/javascripts/boards/board_card_spec.js b/spec/javascripts/boards/board_card_spec.js
index 80a598e63bd..13d607a06d2 100644
--- a/spec/javascripts/boards/board_card_spec.js
+++ b/spec/javascripts/boards/board_card_spec.js
@@ -9,8 +9,8 @@ import axios from '~/lib/utils/axios_utils';
 import '~/boards/models/assignee';
 
 import eventHub from '~/boards/eventhub';
+import '~/vue_shared/models/label';
 import '~/boards/models/list';
-import '~/boards/models/label';
 import '~/boards/stores/boards_store';
 import boardCard from '~/boards/components/board_card.vue';
 import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';
diff --git a/spec/javascripts/boards/boards_store_spec.js b/spec/javascripts/boards/boards_store_spec.js
index 8411f4dd8a6..0cf9e4c9ba1 100644
--- a/spec/javascripts/boards/boards_store_spec.js
+++ b/spec/javascripts/boards/boards_store_spec.js
@@ -7,8 +7,8 @@ import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import Cookies from 'js-cookie';
 
+import '~/vue_shared/models/label';
 import '~/boards/models/issue';
-import '~/boards/models/label';
 import '~/boards/models/list';
 import '~/boards/models/assignee';
 import '~/boards/services/board_service';
diff --git a/spec/javascripts/boards/issue_card_spec.js b/spec/javascripts/boards/issue_card_spec.js
index 278155c585e..37088a6421c 100644
--- a/spec/javascripts/boards/issue_card_spec.js
+++ b/spec/javascripts/boards/issue_card_spec.js
@@ -4,8 +4,8 @@
 
 import Vue from 'vue';
 
+import '~/vue_shared/models/label';
 import '~/boards/models/issue';
-import '~/boards/models/label';
 import '~/boards/models/list';
 import '~/boards/models/assignee';
 import '~/boards/stores/boards_store';
diff --git a/spec/javascripts/boards/issue_spec.js b/spec/javascripts/boards/issue_spec.js
index dbbe14fe3e0..4a11131b55c 100644
--- a/spec/javascripts/boards/issue_spec.js
+++ b/spec/javascripts/boards/issue_spec.js
@@ -3,8 +3,8 @@
 /* global ListIssue */
 
 import Vue from 'vue';
+import '~/vue_shared/models/label';
 import '~/boards/models/issue';
-import '~/boards/models/label';
 import '~/boards/models/list';
 import '~/boards/models/assignee';
 import '~/boards/services/board_service';
diff --git a/spec/javascripts/boards/list_spec.js b/spec/javascripts/boards/list_spec.js
index 34964b20b05..d9a1d692949 100644
--- a/spec/javascripts/boards/list_spec.js
+++ b/spec/javascripts/boards/list_spec.js
@@ -6,8 +6,8 @@
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import _ from 'underscore';
+import '~/vue_shared/models/label';
 import '~/boards/models/issue';
-import '~/boards/models/label';
 import '~/boards/models/list';
 import '~/boards/models/assignee';
 import '~/boards/services/board_service';
diff --git a/spec/javascripts/boards/modal_store_spec.js b/spec/javascripts/boards/modal_store_spec.js
index 7eecb58a4c3..e9d77f035e3 100644
--- a/spec/javascripts/boards/modal_store_spec.js
+++ b/spec/javascripts/boards/modal_store_spec.js
@@ -1,7 +1,7 @@
 /* global ListIssue */
 
+import '~/vue_shared/models/label';
 import '~/boards/models/issue';
-import '~/boards/models/label';
 import '~/boards/models/list';
 import '~/boards/models/assignee';
 import '~/boards/stores/modal_store';
diff --git a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
index f1da5f81c0f..756a654765b 100644
--- a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
@@ -128,6 +128,24 @@ describe('Filtered Search Visual Tokens', () => {
     });
   });
 
+  describe('getEndpointWithQueryParams', () => {
+    it('returns `endpoint` string as is when second param `endpointQueryParams` is undefined, null or empty string', () => {
+      const endpoint = 'foo/bar/labels.json';
+      expect(subject.getEndpointWithQueryParams(endpoint)).toBe(endpoint);
+      expect(subject.getEndpointWithQueryParams(endpoint, null)).toBe(endpoint);
+      expect(subject.getEndpointWithQueryParams(endpoint, '')).toBe(endpoint);
+    });
+
+    it('returns `endpoint` string with values of `endpointQueryParams`', () => {
+      const endpoint = 'foo/bar/labels.json';
+      const singleQueryParams = '{"foo":"true"}';
+      const multipleQueryParams = '{"foo":"true","bar":"true"}';
+
+      expect(subject.getEndpointWithQueryParams(endpoint, singleQueryParams)).toBe(`${endpoint}?foo=true`);
+      expect(subject.getEndpointWithQueryParams(endpoint, multipleQueryParams)).toBe(`${endpoint}?foo=true&bar=true`);
+    });
+  });
+
   describe('unselectTokens', () => {
     it('does nothing when there are no tokens', () => {
       const beforeHTML = tokensContainer.innerHTML;
diff --git a/spec/javascripts/groups/components/app_spec.js b/spec/javascripts/groups/components/app_spec.js
index 3adc29262f3..46c7b9f54f2 100644
--- a/spec/javascripts/groups/components/app_spec.js
+++ b/spec/javascripts/groups/components/app_spec.js
@@ -129,7 +129,7 @@ describe('AppComponent', () => {
 
         vm.fetchGroups({});
         setTimeout(() => {
-          expect(vm.isLoading).toBeFalsy();
+          expect(vm.isLoading).toBe(false);
           expect($.scrollTo).toHaveBeenCalledWith(0);
           expect(window.Flash).toHaveBeenCalledWith('An error occurred. Please try again.');
           done();
@@ -144,10 +144,10 @@ describe('AppComponent', () => {
         spyOn(vm, 'updateGroups').and.callThrough();
 
         vm.fetchAllGroups();
-        expect(vm.isLoading).toBeTruthy();
+        expect(vm.isLoading).toBe(true);
         expect(vm.fetchGroups).toHaveBeenCalled();
         setTimeout(() => {
-          expect(vm.isLoading).toBeFalsy();
+          expect(vm.isLoading).toBe(false);
           expect(vm.updateGroups).toHaveBeenCalled();
           done();
         }, 0);
@@ -181,7 +181,7 @@ describe('AppComponent', () => {
         spyOn($, 'scrollTo');
 
         vm.fetchPage(2, null, null, true);
-        expect(vm.isLoading).toBeTruthy();
+        expect(vm.isLoading).toBe(true);
         expect(vm.fetchGroups).toHaveBeenCalledWith({
           page: 2,
           filterGroupsBy: null,
@@ -190,7 +190,7 @@ describe('AppComponent', () => {
           archived: true,
         });
         setTimeout(() => {
-          expect(vm.isLoading).toBeFalsy();
+          expect(vm.isLoading).toBe(false);
           expect($.scrollTo).toHaveBeenCalledWith(0);
           expect(utils.mergeUrlParams).toHaveBeenCalledWith({ page: 2 }, jasmine.any(String));
           expect(window.history.replaceState).toHaveBeenCalledWith({
@@ -216,7 +216,7 @@ describe('AppComponent', () => {
         spyOn(vm.store, 'setGroupChildren');
 
         vm.toggleChildren(groupItem);
-        expect(groupItem.isChildrenLoading).toBeTruthy();
+        expect(groupItem.isChildrenLoading).toBe(true);
         expect(vm.fetchGroups).toHaveBeenCalledWith({
           parentId: groupItem.id,
         });
@@ -232,7 +232,7 @@ describe('AppComponent', () => {
 
         vm.toggleChildren(groupItem);
         expect(vm.fetchGroups).not.toHaveBeenCalled();
-        expect(groupItem.isOpen).toBeTruthy();
+        expect(groupItem.isOpen).toBe(true);
       });
 
       it('should collapse group if it is already expanded', () => {
@@ -241,16 +241,16 @@ describe('AppComponent', () => {
 
         vm.toggleChildren(groupItem);
         expect(vm.fetchGroups).not.toHaveBeenCalled();
-        expect(groupItem.isOpen).toBeFalsy();
+        expect(groupItem.isOpen).toBe(false);
       });
 
       it('should set `isChildrenLoading` back to `false` if load request fails', (done) => {
         spyOn(vm, 'fetchGroups').and.returnValue(returnServicePromise({}, true));
 
         vm.toggleChildren(groupItem);
-        expect(groupItem.isChildrenLoading).toBeTruthy();
+        expect(groupItem.isChildrenLoading).toBe(true);
         setTimeout(() => {
-          expect(groupItem.isChildrenLoading).toBeFalsy();
+          expect(groupItem.isChildrenLoading).toBe(false);
           done();
         }, 0);
       });
@@ -268,10 +268,10 @@ describe('AppComponent', () => {
 
       it('updates props which show modal confirmation dialog', () => {
         const group = Object.assign({}, mockParentGroupItem);
-        expect(vm.updateModal).toBeFalsy();
+        expect(vm.showModal).toBe(false);
         expect(vm.groupLeaveConfirmationMessage).toBe('');
         vm.showLeaveGroupModal(group, mockParentGroupItem);
-        expect(vm.updateModal).toBeTruthy();
+        expect(vm.showModal).toBe(true);
         expect(vm.groupLeaveConfirmationMessage).toBe(`Are you sure you want to leave the "${group.fullName}" group?`);
       });
     });
@@ -280,9 +280,9 @@ describe('AppComponent', () => {
       it('hides modal confirmation which is shown before leaving the group', () => {
         const group = Object.assign({}, mockParentGroupItem);
         vm.showLeaveGroupModal(group, mockParentGroupItem);
-        expect(vm.updateModal).toBeTruthy();
+        expect(vm.showModal).toBe(true);
         vm.hideLeaveGroupModal();
-        expect(vm.updateModal).toBeFalsy();
+        expect(vm.showModal).toBe(false);
       });
     });
 
@@ -307,8 +307,8 @@ describe('AppComponent', () => {
         spyOn($, 'scrollTo');
 
         vm.leaveGroup();
-        expect(vm.updateModal).toBeFalsy();
-        expect(vm.targetGroup.isBeingRemoved).toBeTruthy();
+        expect(vm.showModal).toBe(false);
+        expect(vm.targetGroup.isBeingRemoved).toBe(true);
         expect(vm.service.leaveGroup).toHaveBeenCalledWith(vm.targetGroup.leavePath);
         setTimeout(() => {
           expect($.scrollTo).toHaveBeenCalledWith(0);
@@ -325,12 +325,12 @@ describe('AppComponent', () => {
         spyOn(window, 'Flash');
 
         vm.leaveGroup();
-        expect(vm.targetGroup.isBeingRemoved).toBeTruthy();
+        expect(vm.targetGroup.isBeingRemoved).toBe(true);
         expect(vm.service.leaveGroup).toHaveBeenCalledWith(childGroupItem.leavePath);
         setTimeout(() => {
           expect(vm.store.removeGroup).not.toHaveBeenCalled();
           expect(window.Flash).toHaveBeenCalledWith(message);
-          expect(vm.targetGroup.isBeingRemoved).toBeFalsy();
+          expect(vm.targetGroup.isBeingRemoved).toBe(false);
           done();
         }, 0);
       });
@@ -342,12 +342,12 @@ describe('AppComponent', () => {
         spyOn(window, 'Flash');
 
         vm.leaveGroup(childGroupItem, groupItem);
-        expect(vm.targetGroup.isBeingRemoved).toBeTruthy();
+        expect(vm.targetGroup.isBeingRemoved).toBe(true);
         expect(vm.service.leaveGroup).toHaveBeenCalledWith(childGroupItem.leavePath);
         setTimeout(() => {
           expect(vm.store.removeGroup).not.toHaveBeenCalled();
           expect(window.Flash).toHaveBeenCalledWith(message);
-          expect(vm.targetGroup.isBeingRemoved).toBeFalsy();
+          expect(vm.targetGroup.isBeingRemoved).toBe(false);
           done();
         }, 0);
       });
@@ -379,10 +379,10 @@ describe('AppComponent', () => {
 
       it('should set `isSearchEmpty` prop based on groups count', () => {
         vm.updateGroups(mockGroups);
-        expect(vm.isSearchEmpty).toBeFalsy();
+        expect(vm.isSearchEmpty).toBe(false);
 
         vm.updateGroups([]);
-        expect(vm.isSearchEmpty).toBeTruthy();
+        expect(vm.isSearchEmpty).toBe(true);
       });
     });
   });
@@ -473,13 +473,16 @@ describe('AppComponent', () => {
       });
     });
 
-    it('renders modal confirmation dialog', () => {
+    it('renders modal confirmation dialog', (done) => {
       vm.groupLeaveConfirmationMessage = 'Are you sure you want to leave the "foo" group?';
-      vm.updateModal = true;
-      const modalDialogEl = vm.$el.querySelector('.modal');
-      expect(modalDialogEl).not.toBe(null);
-      expect(modalDialogEl.querySelector('.modal-title').innerText.trim()).toBe('Are you sure?');
-      expect(modalDialogEl.querySelector('.btn.btn-warning').innerText.trim()).toBe('Leave');
+      vm.showModal = true;
+      Vue.nextTick(() => {
+        const modalDialogEl = vm.$el.querySelector('.modal');
+        expect(modalDialogEl).not.toBe(null);
+        expect(modalDialogEl.querySelector('.modal-title').innerText.trim()).toBe('Are you sure?');
+        expect(modalDialogEl.querySelector('.btn.btn-warning').innerText.trim()).toBe('Leave');
+        done();
+      });
     });
   });
 });
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index 49799c31995..27f06573432 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -166,6 +166,21 @@ describe('common_utils', () => {
     });
   });
 
+  describe('objectToQueryString', () => {
+    it('returns empty string when `param` is undefined, null or empty string', () => {
+      expect(commonUtils.objectToQueryString()).toBe('');
+      expect(commonUtils.objectToQueryString('')).toBe('');
+    });
+
+    it('returns query string with values of `params`', () => {
+      const singleQueryParams = { foo: true };
+      const multipleQueryParams = { foo: true, bar: true };
+
+      expect(commonUtils.objectToQueryString(singleQueryParams)).toBe('foo=true');
+      expect(commonUtils.objectToQueryString(multipleQueryParams)).toBe('foo=true&bar=true');
+    });
+  });
+
   describe('buildUrlWithCurrentLocation', () => {
     it('should build an url with current location and given parameters', () => {
       expect(commonUtils.buildUrlWithCurrentLocation()).toEqual(window.location.pathname);
diff --git a/spec/javascripts/pipelines/blank_state_spec.js b/spec/javascripts/pipelines/blank_state_spec.js
new file mode 100644
index 00000000000..b7a9b60d85c
--- /dev/null
+++ b/spec/javascripts/pipelines/blank_state_spec.js
@@ -0,0 +1,29 @@
+import Vue from 'vue';
+import component from '~/pipelines/components/blank_state.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
+
+describe('Pipelines Blank State', () => {
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(component);
+
+    vm = mountComponent(Component,
+      {
+        svgPath: 'foo',
+        message: 'Blank State',
+      },
+    );
+  });
+
+  it('should render svg', () => {
+    expect(vm.$el.querySelector('.svg-content img').getAttribute('src')).toEqual('foo');
+  });
+
+  it('should render message', () => {
+    expect(
+      vm.$el.querySelector('h4').textContent.trim(),
+    ).toEqual('Blank State');
+  });
+});
diff --git a/spec/javascripts/pipelines/empty_state_spec.js b/spec/javascripts/pipelines/empty_state_spec.js
index 97f04844b3a..71f77e5f42e 100644
--- a/spec/javascripts/pipelines/empty_state_spec.js
+++ b/spec/javascripts/pipelines/empty_state_spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import emptyStateComp from '~/pipelines/components/empty_state.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
 
 describe('Pipelines Empty State', () => {
   let component;
@@ -8,12 +9,15 @@ describe('Pipelines Empty State', () => {
   beforeEach(() => {
     EmptyStateComponent = Vue.extend(emptyStateComp);
 
-    component = new EmptyStateComponent({
-      propsData: {
-        helpPagePath: 'foo',
-        emptyStateSvgPath: 'foo',
-      },
-    }).$mount();
+    component = mountComponent(EmptyStateComponent, {
+      helpPagePath: 'foo',
+      emptyStateSvgPath: 'foo',
+      canSetCi: true,
+    });
+  });
+
+  afterEach(() => {
+    component.$destroy();
   });
 
   it('should render empty state SVG', () => {
@@ -24,16 +28,16 @@ describe('Pipelines Empty State', () => {
     expect(component.$el.querySelector('h4').textContent).toContain('Build with confidence');
 
     expect(
-      component.$el.querySelector('p').textContent.trim().replace(/[\r\n]+/g, ' '),
-    ).toContain('Continous Integration can help catch bugs by running your tests automatically');
+      component.$el.querySelector('p').innerHTML.trim().replace(/\n+\s+/m, ' ').replace(/\s\s+/g, ' '),
+    ).toContain('Continous Integration can help catch bugs by running your tests automatically,');
 
     expect(
-      component.$el.querySelector('p').textContent.trim().replace(/[\r\n]+/g, ' '),
-    ).toContain('Continuous Deployment can help you deliver code to your product environment');
+      component.$el.querySelector('p').innerHTML.trim().replace(/\n+\s+/m, ' ').replace(/\s\s+/g, ' '),
+    ).toContain('while Continuous Deployment can help you deliver code to your product environment');
   });
 
   it('should render a link with provided help path', () => {
-    expect(component.$el.querySelector('.btn-info').getAttribute('href')).toEqual('foo');
-    expect(component.$el.querySelector('.btn-info').textContent).toContain('Get started with Pipelines');
+    expect(component.$el.querySelector('.js-get-started-pipelines').getAttribute('href')).toEqual('foo');
+    expect(component.$el.querySelector('.js-get-started-pipelines').textContent).toContain('Get started with Pipelines');
   });
 });
diff --git a/spec/javascripts/pipelines/error_state_spec.js b/spec/javascripts/pipelines/error_state_spec.js
deleted file mode 100644
index a402857a4d1..00000000000
--- a/spec/javascripts/pipelines/error_state_spec.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Vue from 'vue';
-import errorStateComp from '~/pipelines/components/error_state.vue';
-
-describe('Pipelines Error State', () => {
-  let component;
-  let ErrorStateComponent;
-
-  beforeEach(() => {
-    ErrorStateComponent = Vue.extend(errorStateComp);
-
-    component = new ErrorStateComponent({
-      propsData: {
-        errorStateSvgPath: 'foo',
-      },
-    }).$mount();
-  });
-
-  it('should render error state SVG', () => {
-    expect(component.$el.querySelector('.svg-content svg')).toBeDefined();
-  });
-
-  it('should render emtpy state information', () => {
-    expect(
-      component.$el.querySelector('h4').textContent,
-    ).toContain('The API failed to fetch the pipelines');
-  });
-});
diff --git a/spec/javascripts/pipelines/nav_controls_spec.js b/spec/javascripts/pipelines/nav_controls_spec.js
index 09a0c14d96c..77c5258f74c 100644
--- a/spec/javascripts/pipelines/nav_controls_spec.js
+++ b/spec/javascripts/pipelines/nav_controls_spec.js
@@ -1,116 +1,68 @@
 import Vue from 'vue';
 import navControlsComp from '~/pipelines/components/nav_controls.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
 
 describe('Pipelines Nav Controls', () => {
   let NavControlsComponent;
+  let component;
 
   beforeEach(() => {
     NavControlsComponent = Vue.extend(navControlsComp);
   });
 
+  afterEach(() => {
+    component.$destroy();
+  });
+
   it('should render link to create a new pipeline', () => {
     const mockData = {
       newPipelinePath: 'foo',
-      hasCiEnabled: true,
-      helpPagePath: 'foo',
       ciLintPath: 'foo',
       resetCachePath: 'foo',
-      canCreatePipeline: true,
     };
 
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
+    component = mountComponent(NavControlsComponent, mockData);
 
-    expect(component.$el.querySelector('.btn-create').textContent).toContain('Run Pipeline');
-    expect(component.$el.querySelector('.btn-create').getAttribute('href')).toEqual(mockData.newPipelinePath);
+    expect(component.$el.querySelector('.js-run-pipeline').textContent).toContain('Run Pipeline');
+    expect(component.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(mockData.newPipelinePath);
   });
 
-  it('should not render link to create pipeline if no permission is provided', () => {
+  it('should not render link to create pipeline if no path is provided', () => {
     const mockData = {
-      newPipelinePath: 'foo',
-      hasCiEnabled: true,
       helpPagePath: 'foo',
       ciLintPath: 'foo',
       resetCachePath: 'foo',
-      canCreatePipeline: false,
     };
 
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
+    component = mountComponent(NavControlsComponent, mockData);
 
-    expect(component.$el.querySelector('.btn-create')).toEqual(null);
+    expect(component.$el.querySelector('.js-run-pipeline')).toEqual(null);
   });
 
   it('should render link for resetting runner caches', () => {
     const mockData = {
       newPipelinePath: 'foo',
-      hasCiEnabled: true,
-      helpPagePath: 'foo',
       ciLintPath: 'foo',
       resetCachePath: 'foo',
-      canCreatePipeline: false,
     };
 
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
+    component = mountComponent(NavControlsComponent, mockData);
 
-    expect(component.$el.querySelectorAll('.btn-default')[0].textContent).toContain('Clear runner caches');
-    expect(component.$el.querySelectorAll('.btn-default')[0].getAttribute('href')).toEqual(mockData.resetCachePath);
+    expect(component.$el.querySelector('.js-clear-cache').textContent.trim()).toContain('Clear Runner Caches');
+    expect(component.$el.querySelector('.js-clear-cache').getAttribute('href')).toEqual(mockData.resetCachePath);
   });
 
   it('should render link for CI lint', () => {
     const mockData = {
       newPipelinePath: 'foo',
-      hasCiEnabled: true,
-      helpPagePath: 'foo',
-      ciLintPath: 'foo',
-      resetCachePath: 'foo',
-      canCreatePipeline: true,
-    };
-
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
-
-    expect(component.$el.querySelectorAll('.btn-default')[1].textContent).toContain('CI Lint');
-    expect(component.$el.querySelectorAll('.btn-default')[1].getAttribute('href')).toEqual(mockData.ciLintPath);
-  });
-
-  it('should render link to help page when CI is not enabled', () => {
-    const mockData = {
-      newPipelinePath: 'foo',
-      hasCiEnabled: false,
-      helpPagePath: 'foo',
-      ciLintPath: 'foo',
-      resetCachePath: 'foo',
-      canCreatePipeline: true,
-    };
-
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
-
-    expect(component.$el.querySelector('.btn-info').textContent).toContain('Get started with Pipelines');
-    expect(component.$el.querySelector('.btn-info').getAttribute('href')).toEqual(mockData.helpPagePath);
-  });
-
-  it('should not render link to help page when CI is enabled', () => {
-    const mockData = {
-      newPipelinePath: 'foo',
-      hasCiEnabled: true,
       helpPagePath: 'foo',
       ciLintPath: 'foo',
       resetCachePath: 'foo',
-      canCreatePipeline: true,
     };
 
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
+    component = mountComponent(NavControlsComponent, mockData);
 
-    expect(component.$el.querySelector('.btn-info')).toEqual(null);
+    expect(component.$el.querySelector('.js-ci-lint').textContent.trim()).toContain('CI Lint');
+    expect(component.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(mockData.ciLintPath);
   });
 });
diff --git a/spec/javascripts/pipelines/pipelines_spec.js b/spec/javascripts/pipelines/pipelines_spec.js
index 54d5bfd51e6..84fd0329f08 100644
--- a/spec/javascripts/pipelines/pipelines_spec.js
+++ b/spec/javascripts/pipelines/pipelines_spec.js
@@ -7,36 +7,380 @@ import mountComponent from 'spec/helpers/vue_mount_component_helper';
 describe('Pipelines', () => {
   const jsonFixtureName = 'pipelines/pipelines.json';
 
-  preloadFixtures('static/pipelines.html.raw');
   preloadFixtures(jsonFixtureName);
 
   let PipelinesComponent;
   let pipelines;
-  let component;
+  let vm;
+  const paths = {
+    endpoint: 'twitter/flight/pipelines.json',
+    autoDevopsPath: '/help/topics/autodevops/index.md',
+    helpPagePath: '/help/ci/quick_start/README',
+    emptyStateSvgPath: '/assets/illustrations/pipelines_empty.svg',
+    errorStateSvgPath: '/assets/illustrations/pipelines_failed.svg',
+    noPipelinesSvgPath: '/assets/illustrations/pipelines_pending.svg',
+    ciLintPath: '/ci/lint',
+    resetCachePath: '/twitter/flight/settings/ci_cd/reset_cache',
+    newPipelinePath: '/twitter/flight/pipelines/new',
+  };
+
+  const noPermissions = {
+    endpoint: 'twitter/flight/pipelines.json',
+    autoDevopsPath: '/help/topics/autodevops/index.md',
+    helpPagePath: '/help/ci/quick_start/README',
+    emptyStateSvgPath: '/assets/illustrations/pipelines_empty.svg',
+    errorStateSvgPath: '/assets/illustrations/pipelines_failed.svg',
+    noPipelinesSvgPath: '/assets/illustrations/pipelines_pending.svg',
+  };
 
   beforeEach(() => {
-    loadFixtures('static/pipelines.html.raw');
     pipelines = getJSONFixture(jsonFixtureName);
 
     PipelinesComponent = Vue.extend(pipelinesComp);
   });
 
   afterEach(() => {
-    component.$destroy();
+    vm.$destroy();
+  });
+
+  const pipelinesInterceptor = (request, next) => {
+    next(request.respondWith(JSON.stringify(pipelines), {
+      status: 200,
+    }));
+  };
+
+  const emptyStateInterceptor = (request, next) => {
+    next(request.respondWith(JSON.stringify({
+      pipelines: [],
+      count: {
+        all: 0,
+        pending: 0,
+        running: 0,
+        finished: 0,
+      },
+    }), {
+      status: 200,
+    }));
+  };
+
+  const errorInterceptor = (request, next) => {
+    next(request.respondWith(JSON.stringify({}), {
+      status: 500,
+    }));
+  };
+
+  describe('With permission', () => {
+    describe('With pipelines in main tab', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(pipelinesInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: true,
+          canCreatePipeline: true,
+          ...paths,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, pipelinesInterceptor,
+        );
+      });
+
+      it('renders tabs', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
+      });
+
+      it('renders Run Pipeline button', () => {
+        expect(vm.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(paths.newPipelinePath);
+      });
+
+      it('renders CI Lint button', () => {
+        expect(vm.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(paths.ciLintPath);
+      });
+
+      it('renders Clear Runner Cache button', () => {
+        expect(vm.$el.querySelector('.js-clear-cache').getAttribute('href')).toEqual(paths.resetCachePath);
+      });
+
+      it('renders pipelines table', () => {
+        expect(
+          vm.$el.querySelectorAll('.gl-responsive-table-row').length,
+        ).toEqual(pipelines.pipelines.length + 1);
+      });
+    });
+
+    describe('Without pipelines on main tab with CI', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(emptyStateInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: true,
+          canCreatePipeline: true,
+          ...paths,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, emptyStateInterceptor,
+        );
+      });
+
+      it('renders tabs', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
+      });
+
+      it('renders Run Pipeline button', () => {
+        expect(vm.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(paths.newPipelinePath);
+      });
+
+      it('renders CI Lint button', () => {
+        expect(vm.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(paths.ciLintPath);
+      });
+
+      it('renders Clear Runner Cache button', () => {
+        expect(vm.$el.querySelector('.js-clear-cache').getAttribute('href')).toEqual(paths.resetCachePath);
+      });
+
+      it('renders tab empty state', () => {
+        expect(vm.$el.querySelector('.empty-state h4').textContent.trim()).toEqual('There are currently no pipelines.');
+      });
+    });
+
+    describe('Without pipelines nor CI', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(emptyStateInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: false,
+          canCreatePipeline: true,
+          ...paths,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, emptyStateInterceptor,
+        );
+      });
+
+      it('renders empty state', () => {
+        expect(vm.$el.querySelector('.js-empty-state h4').textContent.trim()).toEqual('Build with confidence');
+        expect(vm.$el.querySelector('.js-get-started-pipelines').getAttribute('href')).toEqual(paths.helpPagePath);
+      });
+
+      it('does not render tabs nor buttons', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all')).toBeNull();
+        expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull();
+        expect(vm.$el.querySelector('.js-ci-lint')).toBeNull();
+        expect(vm.$el.querySelector('.js-clear-cache')).toBeNull();
+      });
+    });
+
+    describe('When API returns error', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(errorInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: false,
+          canCreatePipeline: true,
+          ...paths,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, errorInterceptor,
+        );
+      });
+
+      it('renders tabs', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
+      });
+
+      it('renders buttons', () => {
+        expect(vm.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(paths.newPipelinePath);
+        expect(vm.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(paths.ciLintPath);
+        expect(vm.$el.querySelector('.js-clear-cache').getAttribute('href')).toEqual(paths.resetCachePath);
+      });
+
+      it('renders error state', () => {
+        expect(vm.$el.querySelector('.empty-state').textContent.trim()).toContain('There was an error fetching the pipelines.');
+      });
+    });
+  });
+
+  describe('Without permission', () => {
+    describe('With pipelines in main tab', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(pipelinesInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: false,
+          canCreatePipeline: false,
+          ...noPermissions,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, pipelinesInterceptor,
+        );
+      });
+
+      it('renders tabs', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
+      });
+
+      it('does not render buttons', () => {
+        expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull();
+        expect(vm.$el.querySelector('.js-ci-lint')).toBeNull();
+        expect(vm.$el.querySelector('.js-clear-cache')).toBeNull();
+      });
+
+      it('renders pipelines table', () => {
+        expect(
+          vm.$el.querySelectorAll('.gl-responsive-table-row').length,
+        ).toEqual(pipelines.pipelines.length + 1);
+      });
+    });
+
+    describe('Without pipelines on main tab with CI', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(emptyStateInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: true,
+          canCreatePipeline: false,
+          ...noPermissions,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, emptyStateInterceptor,
+        );
+      });
+      it('renders tabs', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
+      });
+
+      it('does not render buttons', () => {
+        expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull();
+        expect(vm.$el.querySelector('.js-ci-lint')).toBeNull();
+        expect(vm.$el.querySelector('.js-clear-cache')).toBeNull();
+      });
+
+      it('renders tab empty state', () => {
+        expect(vm.$el.querySelector('.empty-state h4').textContent.trim()).toEqual('There are currently no pipelines.');
+      });
+    });
+
+    describe('Without pipelines nor CI', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(emptyStateInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: false,
+          canCreatePipeline: false,
+          ...noPermissions,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, emptyStateInterceptor,
+        );
+      });
+
+      it('renders empty state without button to set CI', () => {
+        expect(vm.$el.querySelector('.js-empty-state').textContent.trim()).toEqual('This project is not currently set up to run pipelines.');
+        expect(vm.$el.querySelector('.js-get-started-pipelines')).toBeNull();
+      });
+
+      it('does not render tabs or buttons', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all')).toBeNull();
+        expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull();
+        expect(vm.$el.querySelector('.js-ci-lint')).toBeNull();
+        expect(vm.$el.querySelector('.js-clear-cache')).toBeNull();
+      });
+    });
+
+    describe('When API returns error', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(errorInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: false,
+          canCreatePipeline: true,
+          ...noPermissions,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, errorInterceptor,
+        );
+      });
+
+      it('renders tabs', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
+      });
+
+      it('does not renders buttons', () => {
+        expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull();
+        expect(vm.$el.querySelector('.js-ci-lint')).toBeNull();
+        expect(vm.$el.querySelector('.js-clear-cache')).toBeNull();
+      });
+
+      it('renders error state', () => {
+        expect(vm.$el.querySelector('.empty-state').textContent.trim()).toContain('There was an error fetching the pipelines.');
+      });
+    });
   });
 
   describe('successfull request', () => {
     describe('with pipelines', () => {
-      const pipelinesInterceptor = (request, next) => {
-        next(request.respondWith(JSON.stringify(pipelines), {
-          status: 200,
-        }));
-      };
-
       beforeEach(() => {
         Vue.http.interceptors.push(pipelinesInterceptor);
-        component = mountComponent(PipelinesComponent, {
+        vm = mountComponent(PipelinesComponent, {
           store: new Store(),
+          hasGitlabCi: true,
+          canCreatePipeline: true,
+          ...paths,
         });
       });
 
@@ -48,9 +392,9 @@ describe('Pipelines', () => {
 
       it('should render table', (done) => {
         setTimeout(() => {
-          expect(component.$el.querySelector('.table-holder')).toBeDefined();
+          expect(vm.$el.querySelector('.table-holder')).toBeDefined();
           expect(
-            component.$el.querySelectorAll('.gl-responsive-table-row').length,
+            vm.$el.querySelectorAll('.gl-responsive-table-row').length,
           ).toEqual(pipelines.pipelines.length + 1);
           done();
         });
@@ -59,22 +403,22 @@ describe('Pipelines', () => {
       it('should render navigation tabs', (done) => {
         setTimeout(() => {
           expect(
-            component.$el.querySelector('.js-pipelines-tab-pending').textContent.trim(),
+            vm.$el.querySelector('.js-pipelines-tab-pending').textContent.trim(),
           ).toContain('Pending');
           expect(
-            component.$el.querySelector('.js-pipelines-tab-all').textContent.trim(),
+            vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim(),
           ).toContain('All');
           expect(
-            component.$el.querySelector('.js-pipelines-tab-running').textContent.trim(),
+            vm.$el.querySelector('.js-pipelines-tab-running').textContent.trim(),
           ).toContain('Running');
           expect(
-            component.$el.querySelector('.js-pipelines-tab-finished').textContent.trim(),
+            vm.$el.querySelector('.js-pipelines-tab-finished').textContent.trim(),
           ).toContain('Finished');
           expect(
-            component.$el.querySelector('.js-pipelines-tab-branches').textContent.trim(),
+            vm.$el.querySelector('.js-pipelines-tab-branches').textContent.trim(),
           ).toContain('Branches');
           expect(
-            component.$el.querySelector('.js-pipelines-tab-tags').textContent.trim(),
+            vm.$el.querySelector('.js-pipelines-tab-tags').textContent.trim(),
           ).toContain('Tags');
           done();
         });
@@ -82,10 +426,10 @@ describe('Pipelines', () => {
 
       it('should make an API request when using tabs', (done) => {
         setTimeout(() => {
-          spyOn(component, 'updateContent');
-          component.$el.querySelector('.js-pipelines-tab-finished').click();
+          spyOn(vm, 'updateContent');
+          vm.$el.querySelector('.js-pipelines-tab-finished').click();
 
-          expect(component.updateContent).toHaveBeenCalledWith({ scope: 'finished', page: '1' });
+          expect(vm.updateContent).toHaveBeenCalledWith({ scope: 'finished', page: '1' });
           done();
         });
       });
@@ -93,9 +437,9 @@ describe('Pipelines', () => {
       describe('with pagination', () => {
         it('should make an API request when using pagination', (done) => {
           setTimeout(() => {
-            spyOn(component, 'updateContent');
+            spyOn(vm, 'updateContent');
             // Mock pagination
-            component.store.state.pageInfo = {
+            vm.store.state.pageInfo = {
               page: 1,
               total: 10,
               perPage: 2,
@@ -103,9 +447,9 @@ describe('Pipelines', () => {
               totalPages: 5,
             };
 
-            Vue.nextTick(() => {
-              component.$el.querySelector('.js-next-button a').click();
-              expect(component.updateContent).toHaveBeenCalledWith({ scope: 'all', page: '2' });
+            vm.$nextTick(() => {
+              vm.$el.querySelector('.js-next-button a').click();
+              expect(vm.updateContent).toHaveBeenCalledWith({ scope: 'all', page: '2' });
 
               done();
             });
@@ -113,112 +457,249 @@ describe('Pipelines', () => {
         });
       });
     });
+  });
 
-    describe('without pipelines', () => {
-      const emptyInterceptor = (request, next) => {
-        next(request.respondWith(JSON.stringify([]), {
-          status: 200,
-        }));
-      };
+  describe('methods', () => {
+    beforeEach(() => {
+      spyOn(history, 'pushState').and.stub();
+    });
 
-      beforeEach(() => {
-        Vue.http.interceptors.push(emptyInterceptor);
-      });
+    describe('updateContent', () => {
+      it('should set given parameters', () => {
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: true,
+          canCreatePipeline: true,
+          ...paths,
+        });
+        vm.updateContent({ scope: 'finished', page: '4' });
 
-      afterEach(() => {
-        Vue.http.interceptors = _.without(
-          Vue.http.interceptors, emptyInterceptor,
-        );
+        expect(vm.page).toEqual('4');
+        expect(vm.scope).toEqual('finished');
+        expect(vm.requestData.scope).toEqual('finished');
+        expect(vm.requestData.page).toEqual('4');
       });
+    });
+
+    describe('onChangeTab', () => {
+      it('should set page to 1', () => {
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: true,
+          canCreatePipeline: true,
+          ...paths,
+        });
+        spyOn(vm, 'updateContent');
 
-      it('should render empty state', (done) => {
-        component = new PipelinesComponent({
-          propsData: {
-            store: new Store(),
-          },
-        }).$mount();
+        vm.onChangeTab('running');
 
-        setTimeout(() => {
-          expect(component.$el.querySelector('.empty-state')).not.toBe(null);
-          done();
+        expect(vm.updateContent).toHaveBeenCalledWith({ scope: 'running', page: '1' });
+      });
+    });
+
+    describe('onChangePage', () => {
+      it('should update page and keep scope', () => {
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: true,
+          canCreatePipeline: true,
+          ...paths,
         });
+        spyOn(vm, 'updateContent');
+
+        vm.onChangePage(4);
+
+        expect(vm.updateContent).toHaveBeenCalledWith({ scope: vm.scope, page: '4' });
       });
     });
   });
 
-  describe('unsuccessfull request', () => {
-    const errorInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify([]), {
-        status: 500,
-      }));
-    };
-
+  describe('computed properties', () => {
     beforeEach(() => {
-      Vue.http.interceptors.push(errorInterceptor);
+      vm = mountComponent(PipelinesComponent, {
+        store: new Store(),
+        hasGitlabCi: true,
+        canCreatePipeline: true,
+        ...paths,
+      });
     });
 
-    afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, errorInterceptor,
-      );
+    describe('tabs', () => {
+      it('returns default tabs', () => {
+        expect(vm.tabs).toEqual([
+          { name: 'All', scope: 'all', count: undefined, isActive: true },
+          { name: 'Pending', scope: 'pending', count: undefined, isActive: false },
+          { name: 'Running', scope: 'running', count: undefined, isActive: false },
+          { name: 'Finished', scope: 'finished', count: undefined, isActive: false },
+          { name: 'Branches', scope: 'branches', isActive: false },
+          { name: 'Tags', scope: 'tags', isActive: false },
+        ]);
+      });
     });
 
-    it('should render error state', (done) => {
-      component = new PipelinesComponent({
-        propsData: {
-          store: new Store(),
-        },
-      }).$mount();
+    describe('emptyTabMessage', () => {
+      it('returns message with scope', (done) => {
+        vm.scope = 'pending';
 
-      setTimeout(() => {
-        expect(component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
-        done();
+        vm.$nextTick(() => {
+          expect(vm.emptyTabMessage).toEqual('There are currently no pending pipelines.');
+          done();
+        });
       });
-    });
-  });
 
-  describe('methods', () => {
-    beforeEach(() => {
-      spyOn(history, 'pushState').and.stub();
+      it('returns message without scope when scope is `all`', () => {
+        expect(vm.emptyTabMessage).toEqual('There are currently no pipelines.');
+      });
     });
 
-    describe('updateContent', () => {
-      it('should set given parameters', () => {
-        component = mountComponent(PipelinesComponent, {
-          store: new Store(),
+    describe('stateToRender', () => {
+      it('returns loading state when the app is loading', () => {
+        expect(vm.stateToRender).toEqual('loading');
+      });
+
+      it('returns error state when app has error', (done) => {
+        vm.hasError = true;
+        vm.isLoading = false;
+
+        vm.$nextTick(() => {
+          expect(vm.stateToRender).toEqual('error');
+          done();
+        });
+      });
+
+      it('returns table list when app has pipelines', (done) => {
+        vm.isLoading = false;
+        vm.hasError = false;
+        vm.state.pipelines = pipelines.pipelines;
+
+        vm.$nextTick(() => {
+          expect(vm.stateToRender).toEqual('tableList');
+
+          done();
+        });
+      });
+
+      it('returns empty tab when app does not have pipelines but project has pipelines', (done) => {
+        vm.state.count.all = 10;
+        vm.isLoading = false;
+
+        vm.$nextTick(() => {
+          expect(vm.stateToRender).toEqual('emptyTab');
+
+          done();
         });
-        component.updateContent({ scope: 'finished', page: '4' });
+      });
+
+      it('returns empty tab when project has CI', (done) => {
+        vm.isLoading = false;
+        vm.$nextTick(() => {
+          expect(vm.stateToRender).toEqual('emptyTab');
 
-        expect(component.page).toEqual('4');
-        expect(component.scope).toEqual('finished');
-        expect(component.requestData.scope).toEqual('finished');
-        expect(component.requestData.page).toEqual('4');
+          done();
+        });
+      });
+
+      it('returns empty state when project does not have pipelines nor CI', (done) => {
+        vm.isLoading = false;
+        vm.hasGitlabCi = false;
+        vm.$nextTick(() => {
+          expect(vm.stateToRender).toEqual('emptyState');
+
+          done();
+        });
       });
     });
 
-    describe('onChangeTab', () => {
-      it('should set page to 1', () => {
-        component = mountComponent(PipelinesComponent, {
-          store: new Store(),
+    describe('shouldRenderTabs', () => {
+      it('returns true when state is loading & has already made the first request', (done) => {
+        vm.isLoading = true;
+        vm.hasMadeRequest = true;
+
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderTabs).toEqual(true);
+
+          done();
         });
-        spyOn(component, 'updateContent');
+      });
 
-        component.onChangeTab('running');
+      it('returns true when state is tableList & has already made the first request', (done) => {
+        vm.isLoading = false;
+        vm.state.pipelines = pipelines.pipelines;
+        vm.hasMadeRequest = true;
 
-        expect(component.updateContent).toHaveBeenCalledWith({ scope: 'running', page: '1' });
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderTabs).toEqual(true);
+
+          done();
+        });
+      });
+
+      it('returns true when state is error & has already made the first request', (done) => {
+        vm.isLoading = false;
+        vm.hasError = true;
+        vm.hasMadeRequest = true;
+
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderTabs).toEqual(true);
+
+          done();
+        });
+      });
+
+      it('returns true when state is empty tab & has already made the first request', (done) => {
+        vm.isLoading = false;
+        vm.state.count.all = 10;
+        vm.hasMadeRequest = true;
+
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderTabs).toEqual(true);
+
+          done();
+        });
+      });
+
+      it('returns false when has not made first request', (done) => {
+        vm.hasMadeRequest = false;
+
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderTabs).toEqual(false);
+
+          done();
+        });
+      });
+
+      it('returns false when state is emtpy state', (done) => {
+        vm.isLoading = false;
+        vm.hasMadeRequest = true;
+        vm.hasGitlabCi = false;
+
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderTabs).toEqual(false);
+
+          done();
+        });
       });
     });
 
-    describe('onChangePage', () => {
-      it('should update page and keep scope', () => {
-        component = mountComponent(PipelinesComponent, {
-          store: new Store(),
+    describe('shouldRenderButtons', () => {
+      it('returns true when it has paths & has made the first request', (done) => {
+        vm.hasMadeRequest = true;
+
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderButtons).toEqual(true);
+
+          done();
         });
-        spyOn(component, 'updateContent');
+      });
+
+      it('returns false when it has not made the first request', (done) => {
+        vm.hasMadeRequest = false;
 
-        component.onChangePage(4);
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderButtons).toEqual(false);
 
-        expect(component.updateContent).toHaveBeenCalledWith({ scope: component.scope, page: '4' });
+          done();
+        });
       });
     });
   });
diff --git a/spec/javascripts/repo/components/commit_sidebar/list_collapsed_spec.js b/spec/javascripts/repo/components/commit_sidebar/list_collapsed_spec.js
deleted file mode 100644
index b509cedbe80..00000000000
--- a/spec/javascripts/repo/components/commit_sidebar/list_collapsed_spec.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import listCollapsed from '~/ide/components/commit_sidebar/list_collapsed.vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { file } from '../../helpers';
-
-describe('Multi-file editor commit sidebar list collapsed', () => {
-  let vm;
-
-  beforeEach(() => {
-    const Component = Vue.extend(listCollapsed);
-
-    vm = createComponentWithStore(Component, store);
-
-    vm.$store.state.openFiles.push(file('file1'), file('file2'));
-    vm.$store.state.openFiles[0].tempFile = true;
-    vm.$store.state.openFiles.forEach((f) => {
-      Object.assign(f, {
-        changed: true,
-      });
-    });
-
-    vm.$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  it('renders added & modified files count', () => {
-    expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toBe('1 1');
-  });
-});
diff --git a/spec/javascripts/repo/components/commit_sidebar/list_item_spec.js b/spec/javascripts/repo/components/commit_sidebar/list_item_spec.js
deleted file mode 100644
index 6f1a1d874d3..00000000000
--- a/spec/javascripts/repo/components/commit_sidebar/list_item_spec.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import Vue from 'vue';
-import listItem from '~/ide/components/commit_sidebar/list_item.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { file } from '../../helpers';
-
-describe('Multi-file editor commit sidebar list item', () => {
-  let vm;
-  let f;
-
-  beforeEach(() => {
-    const Component = Vue.extend(listItem);
-
-    f = file('test-file');
-
-    vm = mountComponent(Component, {
-      file: f,
-    });
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  it('renders file path', () => {
-    expect(vm.$el.querySelector('.multi-file-commit-list-path').textContent.trim()).toBe(f.path);
-  });
-
-  describe('computed', () => {
-    describe('iconName', () => {
-      it('returns modified when not a tempFile', () => {
-        expect(vm.iconName).toBe('file-modified');
-      });
-
-      it('returns addition when not a tempFile', () => {
-        f.tempFile = true;
-
-        expect(vm.iconName).toBe('file-addition');
-      });
-    });
-
-    describe('iconClass', () => {
-      it('returns modified when not a tempFile', () => {
-        expect(vm.iconClass).toContain('multi-file-modified');
-      });
-
-      it('returns addition when not a tempFile', () => {
-        f.tempFile = true;
-
-        expect(vm.iconClass).toContain('multi-file-addition');
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/commit_sidebar/list_spec.js b/spec/javascripts/repo/components/commit_sidebar/list_spec.js
deleted file mode 100644
index aeb9de9ace4..00000000000
--- a/spec/javascripts/repo/components/commit_sidebar/list_spec.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import commitSidebarList from '~/ide/components/commit_sidebar/list.vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { file } from '../../helpers';
-
-describe('Multi-file editor commit sidebar list', () => {
-  let vm;
-
-  beforeEach(() => {
-    const Component = Vue.extend(commitSidebarList);
-
-    vm = createComponentWithStore(Component, store, {
-      title: 'Staged',
-      fileList: [],
-    });
-
-    vm.$store.state.rightPanelCollapsed = false;
-
-    vm.$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('empty file list', () => {
-    it('renders no changes text', () => {
-      expect(vm.$el.querySelector('.help-block').textContent.trim()).toBe('No changes');
-    });
-  });
-
-  describe('with a list of files', () => {
-    beforeEach((done) => {
-      const f = file('file name');
-      f.changed = true;
-      vm.fileList.push(f);
-
-      Vue.nextTick(done);
-    });
-
-    it('renders list', () => {
-      expect(vm.$el.querySelectorAll('li').length).toBe(1);
-    });
-  });
-
-  describe('collapsed', () => {
-    beforeEach((done) => {
-      vm.$store.state.rightPanelCollapsed = true;
-
-      Vue.nextTick(done);
-    });
-
-    it('hides list', () => {
-      expect(vm.$el.querySelector('.list-unstyled')).toBeNull();
-      expect(vm.$el.querySelector('.help-block')).toBeNull();
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/ide_context_bar_spec.js b/spec/javascripts/repo/components/ide_context_bar_spec.js
deleted file mode 100644
index 935da259a99..00000000000
--- a/spec/javascripts/repo/components/ide_context_bar_spec.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import ideContextBar from '~/ide/components/ide_context_bar.vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-
-describe('Multi-file editor right context bar', () => {
-  let vm;
-
-  beforeEach(() => {
-    const Component = Vue.extend(ideContextBar);
-
-    vm = createComponentWithStore(Component, store);
-
-    vm.$store.state.rightPanelCollapsed = false;
-
-    vm.$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('collapsed', () => {
-    beforeEach((done) => {
-      vm.$store.state.rightPanelCollapsed = true;
-
-      Vue.nextTick(done);
-    });
-
-    it('adds collapsed class', () => {
-      expect(vm.$el.querySelector('.is-collapsed')).not.toBeNull();
-    });
-
-    it('shows correct icon', () => {
-      expect(vm.currentIcon).toBe('angle-double-left');
-    });
-  });
-
-  it('clicking toggle collapse button collapses the bar', () => {
-    spyOn(vm, 'setPanelCollapsedStatus').and.returnValue(Promise.resolve());
-
-    vm.$el.querySelector('.multi-file-commit-panel-collapse-btn').click();
-
-    expect(vm.setPanelCollapsedStatus).toHaveBeenCalledWith({
-      side: 'right',
-      collapsed: true,
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/ide_repo_tree_spec.js b/spec/javascripts/repo/components/ide_repo_tree_spec.js
deleted file mode 100644
index e3bbda514da..00000000000
--- a/spec/javascripts/repo/components/ide_repo_tree_spec.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import ideRepoTree from '~/ide/components/ide_repo_tree.vue';
-import { file, resetStore } from '../helpers';
-
-describe('IdeRepoTree', () => {
-  let vm;
-
-  beforeEach(() => {
-    const IdeRepoTree = Vue.extend(ideRepoTree);
-
-    vm = new IdeRepoTree({
-      store,
-      propsData: {
-        treeId: 'abcproject/mybranch',
-      },
-    });
-
-    vm.$store.state.currentBranch = 'master';
-    vm.$store.state.isRoot = true;
-    vm.$store.state.trees['abcproject/mybranch'] = {
-      tree: [file()],
-    };
-
-    vm.$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  it('renders a sidebar', () => {
-    const tbody = vm.$el.querySelector('tbody');
-
-    expect(vm.$el.classList.contains('sidebar-mini')).toBeFalsy();
-    expect(tbody.querySelector('.repo-file-options')).toBeFalsy();
-    expect(tbody.querySelector('.prev-directory')).toBeFalsy();
-    expect(tbody.querySelector('.loading-file')).toBeFalsy();
-    expect(tbody.querySelector('.file')).toBeTruthy();
-  });
-
-  it('renders 3 loading files if tree is loading', (done) => {
-    vm.treeId = '123';
-
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toEqual(3);
-
-      done();
-    });
-  });
-
-  it('renders a prev directory if is not root', (done) => {
-    vm.$store.state.isRoot = false;
-
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelector('tbody .prev-directory')).toBeTruthy();
-
-      done();
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/ide_side_bar_spec.js b/spec/javascripts/repo/components/ide_side_bar_spec.js
deleted file mode 100644
index 79c3c8128e8..00000000000
--- a/spec/javascripts/repo/components/ide_side_bar_spec.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import ideSidebar from '~/ide/components/ide_side_bar.vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { resetStore } from '../helpers';
-
-describe('IdeSidebar', () => {
-  let vm;
-
-  beforeEach(() => {
-    const Component = Vue.extend(ideSidebar);
-
-    vm = createComponentWithStore(Component, store).$mount();
-
-    vm.$store.state.leftPanelCollapsed = false;
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  it('renders a sidebar', () => {
-    expect(vm.$el.querySelector('.multi-file-commit-panel-inner')).not.toBeNull();
-  });
-
-  describe('collapsed', () => {
-    beforeEach((done) => {
-      vm.$store.state.leftPanelCollapsed = true;
-
-      Vue.nextTick(done);
-    });
-
-    it('adds collapsed class', () => {
-      expect(vm.$el.classList).toContain('is-collapsed');
-    });
-
-    it('shows correct icon', () => {
-      expect(vm.currentIcon).toBe('angle-double-right');
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/ide_spec.js b/spec/javascripts/repo/components/ide_spec.js
deleted file mode 100644
index 18135177b5e..00000000000
--- a/spec/javascripts/repo/components/ide_spec.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import ide from '~/ide/components/ide.vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { file, resetStore } from '../helpers';
-
-describe('ide component', () => {
-  let vm;
-
-  beforeEach(() => {
-    const Component = Vue.extend(ide);
-
-    vm = createComponentWithStore(Component, store, {
-      emptyStateSvgPath: 'svg',
-    }).$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  it('does not render panel right when no files open', () => {
-    expect(vm.$el.querySelector('.panel-right')).toBeNull();
-  });
-
-  it('renders panel right when files are open', (done) => {
-    vm.$store.state.trees['abcproject/mybranch'] = {
-      tree: [file()],
-    };
-
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelector('.panel-right')).toBeNull();
-
-      done();
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/new_branch_form_spec.js b/spec/javascripts/repo/components/new_branch_form_spec.js
deleted file mode 100644
index 82597fc75e8..00000000000
--- a/spec/javascripts/repo/components/new_branch_form_spec.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import newBranchForm from '~/ide/components/new_branch_form.vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { resetStore } from '../helpers';
-
-describe('Multi-file editor new branch form', () => {
-  let vm;
-
-  beforeEach(() => {
-    const Component = Vue.extend(newBranchForm);
-
-    vm = createComponentWithStore(Component, store);
-
-    vm.$store.state.currentBranch = 'master';
-
-    vm.$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  describe('template', () => {
-    it('renders submit as disabled', () => {
-      expect(vm.$el.querySelector('.btn').getAttribute('disabled')).toBe('disabled');
-    });
-
-    it('enables the submit button when branch is not empty', (done) => {
-      vm.branchName = 'testing';
-
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.btn').getAttribute('disabled')).toBeNull();
-
-        done();
-      });
-    });
-
-    it('displays current branch creating from', (done) => {
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelector('p').textContent.replace(/\s+/g, ' ').trim()).toBe('Create from: master');
-
-        done();
-      });
-    });
-  });
-
-  describe('submitNewBranch', () => {
-    beforeEach(() => {
-      spyOn(vm, 'createNewBranch').and.returnValue(Promise.resolve());
-    });
-
-    it('sets to loading', () => {
-      vm.submitNewBranch();
-
-      expect(vm.loading).toBeTruthy();
-    });
-
-    it('hides current flash element', (done) => {
-      vm.$refs.flashContainer.innerHTML = '<div class="flash-alert"></div>';
-
-      vm.submitNewBranch();
-
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.flash-alert')).toBeNull();
-
-        done();
-      });
-    });
-
-    it('calls createdNewBranch with branchName', () => {
-      vm.branchName = 'testing';
-
-      vm.submitNewBranch();
-
-      expect(vm.createNewBranch).toHaveBeenCalledWith('testing');
-    });
-  });
-
-  describe('submitNewBranch with error', () => {
-    beforeEach(() => {
-      spyOn(vm, 'createNewBranch').and.returnValue(Promise.reject({
-        json: () => Promise.resolve({
-          message: 'error message',
-        }),
-      }));
-    });
-
-    it('sets loading to false', (done) => {
-      vm.loading = true;
-
-      vm.submitNewBranch();
-
-      setTimeout(() => {
-        expect(vm.loading).toBeFalsy();
-
-        done();
-      });
-    });
-
-    it('creates flash element', (done) => {
-      vm.submitNewBranch();
-
-      setTimeout(() => {
-        expect(vm.$el.querySelector('.flash-alert')).not.toBeNull();
-        expect(vm.$el.querySelector('.flash-alert').textContent.trim()).toBe('error message');
-
-        done();
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/new_dropdown/index_spec.js b/spec/javascripts/repo/components/new_dropdown/index_spec.js
deleted file mode 100644
index 4a8e4445e2f..00000000000
--- a/spec/javascripts/repo/components/new_dropdown/index_spec.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import newDropdown from '~/ide/components/new_dropdown/index.vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { resetStore } from '../../helpers';
-
-describe('new dropdown component', () => {
-  let vm;
-
-  beforeEach(() => {
-    const component = Vue.extend(newDropdown);
-
-    vm = createComponentWithStore(component, store, {
-      branch: 'master',
-      path: '',
-    });
-
-    vm.$store.state.currentProjectId = 'abcproject';
-    vm.$store.state.path = '';
-
-    vm.$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  it('renders new file, upload and new directory links', () => {
-    expect(vm.$el.querySelectorAll('a')[0].textContent.trim()).toBe('New file');
-    expect(vm.$el.querySelectorAll('a')[1].textContent.trim()).toBe('Upload file');
-    expect(vm.$el.querySelectorAll('a')[2].textContent.trim()).toBe('New directory');
-  });
-
-  describe('createNewItem', () => {
-    it('sets modalType to blob when new file is clicked', () => {
-      vm.$el.querySelectorAll('a')[0].click();
-
-      expect(vm.modalType).toBe('blob');
-    });
-
-    it('sets modalType to tree when new directory is clicked', () => {
-      vm.$el.querySelectorAll('a')[2].click();
-
-      expect(vm.modalType).toBe('tree');
-    });
-
-    it('opens modal when link is clicked', (done) => {
-      vm.$el.querySelectorAll('a')[0].click();
-
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.modal')).not.toBeNull();
-
-        done();
-      });
-    });
-  });
-
-  describe('hideModal', () => {
-    beforeAll((done) => {
-      vm.openModal = true;
-      Vue.nextTick(done);
-    });
-
-    it('closes modal after toggling', (done) => {
-      vm.hideModal();
-
-      Vue.nextTick()
-        .then(() => {
-          expect(vm.$el.querySelector('.modal')).toBeNull();
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/new_dropdown/modal_spec.js b/spec/javascripts/repo/components/new_dropdown/modal_spec.js
deleted file mode 100644
index d6a1fdd115c..00000000000
--- a/spec/javascripts/repo/components/new_dropdown/modal_spec.js
+++ /dev/null
@@ -1,237 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import service from '~/ide/services';
-import modal from '~/ide/components/new_dropdown/modal.vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { file, resetStore } from '../../helpers';
-
-describe('new file modal component', () => {
-  const Component = Vue.extend(modal);
-  let vm;
-  let projectTree;
-
-  beforeEach(() => {
-    spyOn(service, 'getProjectData').and.returnValue(Promise.resolve({
-      data: {
-        id: '123',
-      },
-    }));
-
-    spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-      data: {
-        commit: {
-          id: '123branch',
-        },
-      },
-    }));
-
-    spyOn(service, 'getTreeData').and.returnValue(Promise.resolve({
-      headers: {
-        'page-title': 'test',
-      },
-      json: () => Promise.resolve({
-        last_commit_path: 'last_commit_path',
-        parent_tree_url: 'parent_tree_url',
-        path: '/',
-        trees: [{ name: 'tree' }],
-        blobs: [{ name: 'blob' }],
-        submodules: [{ name: 'submodule' }],
-      }),
-    }));
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  ['tree', 'blob'].forEach((type) => {
-    describe(type, () => {
-      beforeEach(() => {
-        store.state.projects.abcproject = {
-          web_url: '',
-        };
-        store.state.trees = [];
-        store.state.trees['abcproject/mybranch'] = {
-          tree: [],
-        };
-        projectTree = store.state.trees['abcproject/mybranch'];
-        store.state.currentProjectId = 'abcproject';
-
-        vm = createComponentWithStore(Component, store, {
-          type,
-          branchId: 'master',
-          path: '',
-          parent: projectTree,
-        });
-
-        vm.entryName = 'testing';
-
-        vm.$mount();
-      });
-
-      it(`sets modal title as ${type}`, () => {
-        const title = type === 'tree' ? 'directory' : 'file';
-
-        expect(vm.$el.querySelector('.modal-title').textContent.trim()).toBe(`Create new ${title}`);
-      });
-
-      it(`sets button label as ${type}`, () => {
-        const title = type === 'tree' ? 'directory' : 'file';
-
-        expect(vm.$el.querySelector('.btn-success').textContent.trim()).toBe(`Create ${title}`);
-      });
-
-      it(`sets form label as ${type}`, () => {
-        const title = type === 'tree' ? 'Directory' : 'File';
-
-        expect(vm.$el.querySelector('.label-light').textContent.trim()).toBe(`${title} name`);
-      });
-
-      describe('createEntryInStore', () => {
-        it('calls createTempEntry', () => {
-          spyOn(vm, 'createTempEntry');
-
-          vm.createEntryInStore();
-
-          expect(vm.createTempEntry).toHaveBeenCalledWith({
-            projectId: 'abcproject',
-            branchId: 'master',
-            parent: projectTree,
-            name: 'testing',
-            type,
-          });
-        });
-
-        it('sets editMode to true', (done) => {
-          vm.createEntryInStore();
-
-          setTimeout(() => {
-            expect(vm.$store.state.editMode).toBeTruthy();
-
-            done();
-          });
-        });
-
-        it('toggles blob view', (done) => {
-          vm.createEntryInStore();
-
-          setTimeout(() => {
-            expect(vm.$store.state.currentBlobView).toBe('repo-editor');
-
-            done();
-          });
-        });
-
-        it('opens newly created file', (done) => {
-          if (type === 'blob') {
-            vm.createEntryInStore();
-
-            setTimeout(() => {
-              expect(vm.$store.state.openFiles.length).toBe(1);
-              expect(vm.$store.state.openFiles[0].name).toBe(type === 'blob' ? 'testing' : '.gitkeep');
-
-              done();
-            });
-          } else {
-            done();
-          }
-        });
-
-        if (type === 'blob') {
-          it('creates new file', (done) => {
-            vm.createEntryInStore();
-
-            setTimeout(() => {
-              const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-              expect(baseTree.length).toBe(1);
-              expect(baseTree[0].name).toBe('testing');
-              expect(baseTree[0].type).toBe('blob');
-              expect(baseTree[0].tempFile).toBeTruthy();
-
-              done();
-            });
-          });
-
-          it('does not create temp file when file already exists', (done) => {
-            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-            baseTree.push(file('testing', '1', type));
-
-            vm.createEntryInStore();
-
-            setTimeout(() => {
-              expect(baseTree.length).toBe(1);
-              expect(baseTree[0].name).toBe('testing');
-              expect(baseTree[0].type).toBe('blob');
-              expect(baseTree[0].tempFile).toBeFalsy();
-
-              done();
-            });
-          });
-        } else {
-          it('creates new tree', () => {
-            vm.createEntryInStore();
-
-            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-            expect(baseTree.length).toBe(1);
-            expect(baseTree[0].name).toBe('testing');
-            expect(baseTree[0].type).toBe('tree');
-            expect(baseTree[0].tempFile).toBeTruthy();
-          });
-
-          it('creates multiple trees when entryName has slashes', () => {
-            vm.entryName = 'app/test';
-            vm.createEntryInStore();
-
-            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-            expect(baseTree.length).toBe(1);
-            expect(baseTree[0].name).toBe('app');
-          });
-
-          it('creates tree in existing tree', () => {
-            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-            baseTree.push(file('app', '1', 'tree'));
-
-            vm.entryName = 'app/test';
-            vm.createEntryInStore();
-
-            expect(baseTree.length).toBe(1);
-            expect(baseTree[0].name).toBe('app');
-            expect(baseTree[0].tempFile).toBeFalsy();
-            expect(baseTree[0].tree[0].tempFile).toBeTruthy();
-            expect(baseTree[0].tree[0].name).toBe('test');
-          });
-
-          it('does not create new tree when already exists', () => {
-            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-            baseTree.push(file('app', '1', 'tree'));
-
-            vm.entryName = 'app';
-            vm.createEntryInStore();
-
-            expect(baseTree.length).toBe(1);
-            expect(baseTree[0].name).toBe('app');
-            expect(baseTree[0].tempFile).toBeFalsy();
-            expect(baseTree[0].tree.length).toBe(0);
-          });
-        }
-      });
-    });
-  });
-
-  it('focuses field on mount', () => {
-    document.body.innerHTML += '<div class="js-test"></div>';
-
-    vm = createComponentWithStore(Component, store, {
-      type: 'tree',
-      projectId: 'abcproject',
-      branchId: 'master',
-      path: '',
-    }).$mount('.js-test');
-
-    expect(document.activeElement).toBe(vm.$refs.fieldName);
-
-    vm.$el.remove();
-  });
-});
diff --git a/spec/javascripts/repo/components/new_dropdown/upload_spec.js b/spec/javascripts/repo/components/new_dropdown/upload_spec.js
deleted file mode 100644
index ee8aab3a252..00000000000
--- a/spec/javascripts/repo/components/new_dropdown/upload_spec.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import Vue from 'vue';
-import upload from '~/ide/components/new_dropdown/upload.vue';
-import store from '~/ide/stores';
-import service from '~/ide/services';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { resetStore } from '../../helpers';
-
-describe('new dropdown upload', () => {
-  let vm;
-  let projectTree;
-
-  beforeEach(() => {
-    spyOn(service, 'getProjectData').and.returnValue(Promise.resolve({
-      data: {
-        id: '123',
-      },
-    }));
-
-    spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-      data: {
-        commit: {
-          id: '123branch',
-        },
-      },
-    }));
-
-    spyOn(service, 'getTreeData').and.returnValue(Promise.resolve({
-      headers: {
-        'page-title': 'test',
-      },
-      json: () => Promise.resolve({
-        last_commit_path: 'last_commit_path',
-        parent_tree_url: 'parent_tree_url',
-        path: '/',
-        trees: [{ name: 'tree' }],
-        blobs: [{ name: 'blob' }],
-        submodules: [{ name: 'submodule' }],
-      }),
-    }));
-
-    const Component = Vue.extend(upload);
-
-    store.state.projects.abcproject = {
-      web_url: '',
-    };
-    store.state.currentProjectId = 'abcproject';
-    store.state.trees = [];
-    store.state.trees['abcproject/mybranch'] = {
-      tree: [],
-    };
-    projectTree = store.state.trees['abcproject/mybranch'];
-
-    vm = createComponentWithStore(Component, store, {
-      branchId: 'master',
-      path: '',
-      parent: projectTree,
-    });
-
-    vm.entryName = 'testing';
-
-    vm.$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  describe('readFile', () => {
-    beforeEach(() => {
-      spyOn(FileReader.prototype, 'readAsText');
-      spyOn(FileReader.prototype, 'readAsDataURL');
-    });
-
-    it('calls readAsText for text files', () => {
-      const file = {
-        type: 'text/html',
-      };
-
-      vm.readFile(file);
-
-      expect(FileReader.prototype.readAsText).toHaveBeenCalledWith(file);
-    });
-
-    it('calls readAsDataURL for non-text files', () => {
-      const file = {
-        type: 'images/png',
-      };
-
-      vm.readFile(file);
-
-      expect(FileReader.prototype.readAsDataURL).toHaveBeenCalledWith(file);
-    });
-  });
-
-  describe('createFile', () => {
-    const target = {
-      result: 'content',
-    };
-    const binaryTarget = {
-      result: 'base64,base64content',
-    };
-    const file = {
-      name: 'file',
-    };
-
-    it('creates new file', (done) => {
-      vm.createFile(target, file, true);
-
-      vm.$nextTick(() => {
-        const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-        expect(baseTree.length).toBe(1);
-        expect(baseTree[0].name).toBe(file.name);
-        expect(baseTree[0].content).toBe(target.result);
-
-        done();
-      });
-    });
-
-    it('creates new file in path', (done) => {
-      const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-      const tree = {
-        type: 'tree',
-        name: 'testing',
-        path: 'testing',
-        tree: [],
-      };
-      baseTree.push(tree);
-
-      vm.parent = tree;
-      vm.createFile(target, file, true);
-
-      vm.$nextTick(() => {
-        expect(baseTree.length).toBe(1);
-        expect(baseTree[0].tree[0].name).toBe(file.name);
-        expect(baseTree[0].tree[0].content).toBe(target.result);
-        expect(baseTree[0].tree[0].path).toBe(`testing/${file.name}`);
-
-        done();
-      });
-    });
-
-    it('splits content on base64 if binary', (done) => {
-      vm.createFile(binaryTarget, file, false);
-
-      vm.$nextTick(() => {
-        const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-        expect(baseTree.length).toBe(1);
-        expect(baseTree[0].name).toBe(file.name);
-        expect(baseTree[0].content).toBe(binaryTarget.result.split('base64,')[1]);
-        expect(baseTree[0].base64).toBe(true);
-
-        done();
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/repo_commit_section_spec.js b/spec/javascripts/repo/components/repo_commit_section_spec.js
deleted file mode 100644
index 934ada9dec2..00000000000
--- a/spec/javascripts/repo/components/repo_commit_section_spec.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import Vue from 'vue';
-import * as urlUtils from '~/lib/utils/url_utility';
-import store from '~/ide/stores';
-import service from '~/ide/services';
-import repoCommitSection from '~/ide/components/repo_commit_section.vue';
-import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper';
-import { file, resetStore } from '../helpers';
-
-describe('RepoCommitSection', () => {
-  let vm;
-
-  function createComponent() {
-    const RepoCommitSection = Vue.extend(repoCommitSection);
-
-    const comp = new RepoCommitSection({
-      store,
-    }).$mount();
-
-    comp.$store.state.currentProjectId = 'abcproject';
-    comp.$store.state.currentBranchId = 'master';
-    comp.$store.state.projects.abcproject = {
-      web_url: '',
-      branches: {
-        master: {
-          workingReference: '1',
-        },
-      },
-    };
-
-    comp.$store.state.rightPanelCollapsed = false;
-    comp.$store.state.currentBranch = 'master';
-    comp.$store.state.openFiles = [file('file1'), file('file2')];
-    comp.$store.state.openFiles.forEach(f => Object.assign(f, {
-      changed: true,
-      content: 'testing',
-    }));
-
-    return comp.$mount();
-  }
-
-  beforeEach((done) => {
-    vm = createComponent();
-
-    spyOn(service, 'getTreeData').and.returnValue(Promise.resolve({
-      headers: {
-        'page-title': 'test',
-      },
-      json: () => Promise.resolve({
-        last_commit_path: 'last_commit_path',
-        parent_tree_url: 'parent_tree_url',
-        path: '/',
-        trees: [{ name: 'tree' }],
-        blobs: [{ name: 'blob' }],
-        submodules: [{ name: 'submodule' }],
-      }),
-    }));
-
-    Vue.nextTick(done);
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  it('renders a commit section', () => {
-    const changedFileElements = [...vm.$el.querySelectorAll('.multi-file-commit-list li')];
-    const submitCommit = vm.$el.querySelector('form .btn');
-
-    expect(vm.$el.querySelector('.multi-file-commit-form')).not.toBeNull();
-    expect(changedFileElements.length).toEqual(2);
-
-    changedFileElements.forEach((changedFile, i) => {
-      expect(changedFile.textContent.trim()).toEqual(vm.$store.getters.changedFiles[i].path);
-    });
-
-    expect(submitCommit.disabled).toBeTruthy();
-    expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeNull();
-  });
-
-  describe('when submitting', () => {
-    let changedFiles;
-
-    beforeEach(() => {
-      vm.commitMessage = 'testing';
-      changedFiles = JSON.parse(JSON.stringify(vm.$store.getters.changedFiles));
-
-      spyOn(service, 'commit').and.returnValue(Promise.resolve({
-        data: {
-          short_id: '1',
-          stats: {},
-        },
-      }));
-    });
-
-    it('allows you to submit', () => {
-      expect(vm.$el.querySelector('form .btn').disabled).toBeTruthy();
-    });
-
-    it('submits commit', (done) => {
-      vm.makeCommit();
-
-      // Wait for the branch check to finish
-      getSetTimeoutPromise()
-        .then(() => Vue.nextTick())
-        .then(() => {
-          const args = service.commit.calls.allArgs()[0];
-          const { commit_message, actions, branch: payloadBranch } = args[1];
-
-          expect(commit_message).toBe('testing');
-          expect(actions.length).toEqual(2);
-          expect(payloadBranch).toEqual('master');
-          expect(actions[0].action).toEqual('update');
-          expect(actions[1].action).toEqual('update');
-          expect(actions[0].content).toEqual(changedFiles[0].content);
-          expect(actions[1].content).toEqual(changedFiles[1].content);
-          expect(actions[0].file_path).toEqual(changedFiles[0].path);
-          expect(actions[1].file_path).toEqual(changedFiles[1].path);
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-
-    it('redirects to MR creation page if start new MR checkbox checked', (done) => {
-      spyOn(urlUtils, 'visitUrl');
-      vm.startNewMR = true;
-
-      vm.makeCommit();
-
-      getSetTimeoutPromise()
-        .then(() => Vue.nextTick())
-        .then(() => {
-          expect(urlUtils.visitUrl).toHaveBeenCalled();
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/repo_edit_button_spec.js b/spec/javascripts/repo/components/repo_edit_button_spec.js
deleted file mode 100644
index 2895b794506..00000000000
--- a/spec/javascripts/repo/components/repo_edit_button_spec.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import repoEditButton from '~/ide/components/repo_edit_button.vue';
-import { file, resetStore } from '../helpers';
-
-describe('RepoEditButton', () => {
-  let vm;
-
-  beforeEach(() => {
-    const f = file();
-    const RepoEditButton = Vue.extend(repoEditButton);
-
-    vm = new RepoEditButton({
-      store,
-    });
-
-    f.active = true;
-    vm.$store.dispatch('setInitialData', {
-      canCommit: true,
-      onTopOfBranch: true,
-    });
-    vm.$store.state.openFiles.push(f);
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  it('renders an edit button', () => {
-    vm.$mount();
-
-    expect(vm.$el.querySelector('.btn')).not.toBeNull();
-    expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Cancel edit');
-  });
-
-  it('renders edit button with cancel text', () => {
-    vm.$store.state.editMode = true;
-
-    vm.$mount();
-
-    expect(vm.$el.querySelector('.btn')).not.toBeNull();
-    expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Cancel edit');
-  });
-
-  it('toggles edit mode on click', (done) => {
-    vm.$mount();
-
-    vm.$el.querySelector('.btn').click();
-
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Edit');
-
-      done();
-    });
-  });
-
-  describe('discardPopupOpen', () => {
-    beforeEach(() => {
-      vm.$store.state.discardPopupOpen = true;
-      vm.$store.state.editMode = true;
-      vm.$store.state.openFiles[0].changed = true;
-
-      vm.$mount();
-    });
-
-    it('renders popup', () => {
-      expect(vm.$el.querySelector('.modal')).not.toBeNull();
-    });
-
-    it('removes all changed files', (done) => {
-      vm.$el.querySelector('.btn-warning').click();
-
-      vm.$nextTick(() => {
-        expect(vm.$store.getters.changedFiles.length).toBe(0);
-        expect(vm.$el.querySelector('.modal')).toBeNull();
-
-        done();
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/repo_editor_spec.js b/spec/javascripts/repo/components/repo_editor_spec.js
deleted file mode 100644
index e7b2ed08acd..00000000000
--- a/spec/javascripts/repo/components/repo_editor_spec.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import repoEditor from '~/ide/components/repo_editor.vue';
-import monacoLoader from '~/ide/monaco_loader';
-import { file, resetStore } from '../helpers';
-
-describe('RepoEditor', () => {
-  let vm;
-
-  beforeEach((done) => {
-    const f = file();
-    const RepoEditor = Vue.extend(repoEditor);
-
-    vm = new RepoEditor({
-      store,
-    });
-
-    f.active = true;
-    f.tempFile = true;
-    vm.$store.state.openFiles.push(f);
-    vm.$store.getters.activeFile.html = 'testing';
-    vm.monaco = true;
-
-    vm.$mount();
-
-    monacoLoader(['vs/editor/editor.main'], () => {
-      setTimeout(done, 0);
-    });
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  it('renders an ide container', (done) => {
-    Vue.nextTick(() => {
-      expect(vm.shouldHideEditor).toBeFalsy();
-
-      done();
-    });
-  });
-
-  describe('when open file is binary and not raw', () => {
-    beforeEach((done) => {
-      vm.$store.getters.activeFile.binary = true;
-
-      Vue.nextTick(done);
-    });
-
-    it('does not render the IDE', () => {
-      expect(vm.shouldHideEditor).toBeTruthy();
-    });
-
-    it('shows activeFile html', () => {
-      expect(vm.$el.textContent).toContain('testing');
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/repo_file_buttons_spec.js b/spec/javascripts/repo/components/repo_file_buttons_spec.js
deleted file mode 100644
index 115569a9117..00000000000
--- a/spec/javascripts/repo/components/repo_file_buttons_spec.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import repoFileButtons from '~/ide/components/repo_file_buttons.vue';
-import { file, resetStore } from '../helpers';
-
-describe('RepoFileButtons', () => {
-  const activeFile = file();
-  let vm;
-
-  function createComponent() {
-    const RepoFileButtons = Vue.extend(repoFileButtons);
-
-    activeFile.rawPath = 'test';
-    activeFile.blamePath = 'test';
-    activeFile.commitsPath = 'test';
-    activeFile.active = true;
-    store.state.openFiles.push(activeFile);
-
-    return new RepoFileButtons({
-      store,
-    }).$mount();
-  }
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  it('renders Raw, Blame, History, Permalink and Preview toggle', (done) => {
-    vm = createComponent();
-
-    vm.$nextTick(() => {
-      const raw = vm.$el.querySelector('.raw');
-      const blame = vm.$el.querySelector('.blame');
-      const history = vm.$el.querySelector('.history');
-
-      expect(raw.href).toMatch(`/${activeFile.rawPath}`);
-      expect(raw.textContent.trim()).toEqual('Raw');
-      expect(blame.href).toMatch(`/${activeFile.blamePath}`);
-      expect(blame.textContent.trim()).toEqual('Blame');
-      expect(history.href).toMatch(`/${activeFile.commitsPath}`);
-      expect(history.textContent.trim()).toEqual('History');
-      expect(vm.$el.querySelector('.permalink').textContent.trim()).toEqual('Permalink');
-
-      done();
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/repo_file_spec.js b/spec/javascripts/repo/components/repo_file_spec.js
deleted file mode 100644
index 27b55ed1f87..00000000000
--- a/spec/javascripts/repo/components/repo_file_spec.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import repoFile from '~/ide/components/repo_file.vue';
-import { file, resetStore } from '../helpers';
-
-describe('RepoFile', () => {
-  const updated = 'updated';
-  let vm;
-
-  function createComponent(propsData) {
-    const RepoFile = Vue.extend(repoFile);
-
-    return new RepoFile({
-      store,
-      propsData,
-    }).$mount();
-  }
-
-  afterEach(() => {
-    resetStore(vm.$store);
-  });
-
-  it('renders link, icon and name', () => {
-    const RepoFile = Vue.extend(repoFile);
-    vm = new RepoFile({
-      store,
-      propsData: {
-        file: file('t4'),
-      },
-    });
-    spyOn(vm, 'timeFormated').and.returnValue(updated);
-    vm.$mount();
-
-    const name = vm.$el.querySelector('.repo-file-name');
-
-    expect(name.href).toMatch('');
-    expect(name.textContent.trim()).toEqual(vm.file.name);
-  });
-
-  it('does render if hasFiles is true and is loading tree', () => {
-    vm = createComponent({
-      file: file('t1'),
-    });
-
-    expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy();
-  });
-
-  it('does not render commit message and datetime if mini', (done) => {
-    vm = createComponent({
-      file: file('t2'),
-    });
-    vm.$store.state.openFiles.push(vm.file);
-
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.commit-message')).toBeFalsy();
-      expect(vm.$el.querySelector('.commit-update')).toBeFalsy();
-
-      done();
-    });
-  });
-
-  it('fires clickFile when the link is clicked', () => {
-    vm = createComponent({
-      file: file('t3'),
-    });
-
-    spyOn(vm, 'clickFile');
-
-    vm.$el.click();
-
-    expect(vm.clickFile).toHaveBeenCalledWith(vm.file);
-  });
-
-  describe('submodule', () => {
-    let f;
-
-    beforeEach(() => {
-      f = file('submodule name', '123456789');
-      f.type = 'submodule';
-
-      vm = createComponent({
-        file: f,
-      });
-    });
-
-    afterEach(() => {
-      vm.$destroy();
-    });
-
-    it('renders submodule short ID', () => {
-      expect(vm.$el.querySelector('.commit-sha').textContent.trim()).toBe('12345678');
-    });
-
-    it('renders ID next to submodule name', () => {
-      expect(vm.$el.querySelector('td').textContent.replace(/\s+/g, ' ')).toContain('submodule name @ 12345678');
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/repo_loading_file_spec.js b/spec/javascripts/repo/components/repo_loading_file_spec.js
deleted file mode 100644
index 18366fb89bc..00000000000
--- a/spec/javascripts/repo/components/repo_loading_file_spec.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import repoLoadingFile from '~/ide/components/repo_loading_file.vue';
-import { resetStore } from '../helpers';
-
-describe('RepoLoadingFile', () => {
-  let vm;
-
-  function createComponent() {
-    const RepoLoadingFile = Vue.extend(repoLoadingFile);
-
-    return new RepoLoadingFile({
-      store,
-    }).$mount();
-  }
-
-  function assertLines(lines) {
-    lines.forEach((line, n) => {
-      const index = n + 1;
-      expect(line.classList.contains(`skeleton-line-${index}`)).toBeTruthy();
-    });
-  }
-
-  function assertColumns(columns) {
-    columns.forEach((column) => {
-      const container = column.querySelector('.animation-container');
-      const lines = [...container.querySelectorAll(':scope > div')];
-
-      expect(container).toBeTruthy();
-      expect(lines.length).toEqual(6);
-      assertLines(lines);
-    });
-  }
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  it('renders 3 columns of animated LoC', () => {
-    vm = createComponent();
-    const columns = [...vm.$el.querySelectorAll('td')];
-
-    expect(columns.length).toEqual(3);
-    assertColumns(columns);
-  });
-
-  it('renders 1 column of animated LoC if isMini', (done) => {
-    vm = createComponent();
-    vm.$store.state.leftPanelCollapsed = true;
-    vm.$store.state.openFiles.push('test');
-
-    vm.$nextTick(() => {
-      const columns = [...vm.$el.querySelectorAll('td')];
-
-      expect(columns.length).toEqual(1);
-      assertColumns(columns);
-
-      done();
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/repo_prev_directory_spec.js b/spec/javascripts/repo/components/repo_prev_directory_spec.js
deleted file mode 100644
index ff26cab2262..00000000000
--- a/spec/javascripts/repo/components/repo_prev_directory_spec.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import repoPrevDirectory from '~/ide/components/repo_prev_directory.vue';
-import { resetStore } from '../helpers';
-
-describe('RepoPrevDirectory', () => {
-  let vm;
-  const parentLink = 'parent';
-  function createComponent() {
-    const RepoPrevDirectory = Vue.extend(repoPrevDirectory);
-
-    const comp = new RepoPrevDirectory({
-      store,
-    });
-
-    comp.$store.state.parentTreeUrl = parentLink;
-
-    return comp.$mount();
-  }
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  it('renders a prev dir link', () => {
-    const link = vm.$el.querySelector('a');
-
-    expect(link.href).toMatch(`/${parentLink}`);
-    expect(link.textContent).toEqual('...');
-  });
-
-  it('clicking row triggers getTreeData', () => {
-    spyOn(vm, 'getTreeData');
-
-    vm.$el.querySelector('td').click();
-
-    expect(vm.getTreeData).toHaveBeenCalledWith({ endpoint: parentLink });
-  });
-});
diff --git a/spec/javascripts/repo/components/repo_preview_spec.js b/spec/javascripts/repo/components/repo_preview_spec.js
deleted file mode 100644
index e90837e4cb2..00000000000
--- a/spec/javascripts/repo/components/repo_preview_spec.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import repoPreview from '~/ide/components/repo_preview.vue';
-import { file, resetStore } from '../helpers';
-
-describe('RepoPreview', () => {
-  let vm;
-
-  function createComponent() {
-    const f = file();
-    const RepoPreview = Vue.extend(repoPreview);
-
-    const comp = new RepoPreview({
-      store,
-    });
-
-    f.active = true;
-    f.html = 'test';
-
-    comp.$store.state.openFiles.push(f);
-
-    return comp.$mount();
-  }
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  it('renders a div with the activeFile html', () => {
-    vm = createComponent();
-
-    expect(vm.$el.tagName).toEqual('DIV');
-    expect(vm.$el.innerHTML).toContain('test');
-  });
-});
diff --git a/spec/javascripts/repo/components/repo_tab_spec.js b/spec/javascripts/repo/components/repo_tab_spec.js
deleted file mode 100644
index 933e8d3a06a..00000000000
--- a/spec/javascripts/repo/components/repo_tab_spec.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import repoTab from '~/ide/components/repo_tab.vue';
-import { file, resetStore } from '../helpers';
-
-describe('RepoTab', () => {
-  let vm;
-
-  function createComponent(propsData) {
-    const RepoTab = Vue.extend(repoTab);
-
-    return new RepoTab({
-      store,
-      propsData,
-    }).$mount();
-  }
-
-  afterEach(() => {
-    resetStore(vm.$store);
-  });
-
-  it('renders a close link and a name link', () => {
-    vm = createComponent({
-      tab: file(),
-    });
-    vm.$store.state.openFiles.push(vm.tab);
-    const close = vm.$el.querySelector('.multi-file-tab-close');
-    const name = vm.$el.querySelector(`[title="${vm.tab.url}"]`);
-
-    expect(close.querySelector('.fa-times')).toBeTruthy();
-    expect(name.textContent.trim()).toEqual(vm.tab.name);
-  });
-
-  it('fires clickFile when the link is clicked', () => {
-    vm = createComponent({
-      tab: file(),
-    });
-
-    spyOn(vm, 'clickFile');
-
-    vm.$el.click();
-
-    expect(vm.clickFile).toHaveBeenCalledWith(vm.tab);
-  });
-
-  it('calls closeFile when clicking close button', () => {
-    vm = createComponent({
-      tab: file(),
-    });
-
-    spyOn(vm, 'closeFile');
-
-    vm.$el.querySelector('.multi-file-tab-close').click();
-
-    expect(vm.closeFile).toHaveBeenCalledWith({ file: vm.tab });
-  });
-
-  it('renders an fa-circle icon if tab is changed', () => {
-    const tab = file('changedFile');
-    tab.changed = true;
-    vm = createComponent({
-      tab,
-    });
-
-    expect(vm.$el.querySelector('.multi-file-tab-close .fa-circle')).not.toBeNull();
-  });
-
-  describe('methods', () => {
-    describe('closeTab', () => {
-      it('does not close tab if is changed', (done) => {
-        const tab = file('closeFile');
-        tab.changed = true;
-        tab.opened = true;
-        vm = createComponent({
-          tab,
-        });
-        vm.$store.state.openFiles.push(tab);
-        vm.$store.dispatch('setFileActive', tab);
-
-        vm.$el.querySelector('.multi-file-tab-close').click();
-
-        vm.$nextTick(() => {
-          expect(tab.opened).toBeTruthy();
-
-          done();
-        });
-      });
-
-      it('closes tab when clicking close btn', (done) => {
-        const tab = file('lose');
-        tab.opened = true;
-        vm = createComponent({
-          tab,
-        });
-        vm.$store.state.openFiles.push(tab);
-        vm.$store.dispatch('setFileActive', tab);
-
-        vm.$el.querySelector('.multi-file-tab-close').click();
-
-        vm.$nextTick(() => {
-          expect(tab.opened).toBeFalsy();
-
-          done();
-        });
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/repo/components/repo_tabs_spec.js b/spec/javascripts/repo/components/repo_tabs_spec.js
deleted file mode 100644
index 2c363364d70..00000000000
--- a/spec/javascripts/repo/components/repo_tabs_spec.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import repoTabs from '~/ide/components/repo_tabs.vue';
-import { file, resetStore } from '../helpers';
-
-describe('RepoTabs', () => {
-  const openedFiles = [file('open1'), file('open2')];
-  let vm;
-
-  function createComponent() {
-    const RepoTabs = Vue.extend(repoTabs);
-
-    return new RepoTabs({
-      store,
-    }).$mount();
-  }
-
-  afterEach(() => {
-    resetStore(vm.$store);
-  });
-
-  it('renders a list of tabs', (done) => {
-    vm = createComponent();
-    openedFiles[0].active = true;
-    vm.$store.state.openFiles = openedFiles;
-
-    vm.$nextTick(() => {
-      const tabs = [...vm.$el.querySelectorAll('.multi-file-tab')];
-
-      expect(tabs.length).toEqual(2);
-      expect(tabs[0].classList.contains('active')).toBeTruthy();
-      expect(tabs[1].classList.contains('active')).toBeFalsy();
-
-      done();
-    });
-  });
-});
diff --git a/spec/javascripts/repo/helpers.js b/spec/javascripts/repo/helpers.js
deleted file mode 100644
index ac43d221198..00000000000
--- a/spec/javascripts/repo/helpers.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { decorateData } from '~/ide/stores/utils';
-import state from '~/ide/stores/state';
-
-export const resetStore = (store) => {
-  store.replaceState(state());
-};
-
-export const file = (name = 'name', id = name, type = '') => decorateData({
-  id,
-  type,
-  icon: 'icon',
-  url: 'url',
-  name,
-  path: name,
-  lastCommit: {},
-});
diff --git a/spec/javascripts/repo/lib/common/disposable_spec.js b/spec/javascripts/repo/lib/common/disposable_spec.js
deleted file mode 100644
index af12ca15369..00000000000
--- a/spec/javascripts/repo/lib/common/disposable_spec.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import Disposable from '~/ide/lib/common/disposable';
-
-describe('Multi-file editor library disposable class', () => {
-  let instance;
-  let disposableClass;
-
-  beforeEach(() => {
-    instance = new Disposable();
-
-    disposableClass = {
-      dispose: jasmine.createSpy('dispose'),
-    };
-  });
-
-  afterEach(() => {
-    instance.dispose();
-  });
-
-  describe('add', () => {
-    it('adds disposable classes', () => {
-      instance.add(disposableClass);
-
-      expect(instance.disposers.size).toBe(1);
-    });
-  });
-
-  describe('dispose', () => {
-    beforeEach(() => {
-      instance.add(disposableClass);
-    });
-
-    it('calls dispose on all cached disposers', () => {
-      instance.dispose();
-
-      expect(disposableClass.dispose).toHaveBeenCalled();
-    });
-
-    it('clears cached disposers', () => {
-      instance.dispose();
-
-      expect(instance.disposers.size).toBe(0);
-    });
-  });
-});
diff --git a/spec/javascripts/repo/lib/common/model_manager_spec.js b/spec/javascripts/repo/lib/common/model_manager_spec.js
deleted file mode 100644
index 563c2e33834..00000000000
--- a/spec/javascripts/repo/lib/common/model_manager_spec.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/* global monaco */
-import monacoLoader from '~/ide/monaco_loader';
-import ModelManager from '~/ide/lib/common/model_manager';
-import { file } from '../../helpers';
-
-describe('Multi-file editor library model manager', () => {
-  let instance;
-
-  beforeEach((done) => {
-    monacoLoader(['vs/editor/editor.main'], () => {
-      instance = new ModelManager(monaco);
-
-      done();
-    });
-  });
-
-  afterEach(() => {
-    instance.dispose();
-  });
-
-  describe('addModel', () => {
-    it('caches model', () => {
-      instance.addModel(file());
-
-      expect(instance.models.size).toBe(1);
-    });
-
-    it('caches model by file path', () => {
-      instance.addModel(file('path-name'));
-
-      expect(instance.models.keys().next().value).toBe('path-name');
-    });
-
-    it('adds model into disposable', () => {
-      spyOn(instance.disposable, 'add').and.callThrough();
-
-      instance.addModel(file());
-
-      expect(instance.disposable.add).toHaveBeenCalled();
-    });
-
-    it('returns cached model', () => {
-      spyOn(instance.models, 'get').and.callThrough();
-
-      instance.addModel(file());
-      instance.addModel(file());
-
-      expect(instance.models.get).toHaveBeenCalled();
-    });
-  });
-
-  describe('hasCachedModel', () => {
-    it('returns false when no models exist', () => {
-      expect(instance.hasCachedModel('path')).toBeFalsy();
-    });
-
-    it('returns true when model exists', () => {
-      instance.addModel(file('path-name'));
-
-      expect(instance.hasCachedModel('path-name')).toBeTruthy();
-    });
-  });
-
-  describe('dispose', () => {
-    it('clears cached models', () => {
-      instance.addModel(file());
-
-      instance.dispose();
-
-      expect(instance.models.size).toBe(0);
-    });
-
-    it('calls disposable dispose', () => {
-      spyOn(instance.disposable, 'dispose').and.callThrough();
-
-      instance.dispose();
-
-      expect(instance.disposable.dispose).toHaveBeenCalled();
-    });
-  });
-});
diff --git a/spec/javascripts/repo/lib/common/model_spec.js b/spec/javascripts/repo/lib/common/model_spec.js
deleted file mode 100644
index 878a4a3f3fe..00000000000
--- a/spec/javascripts/repo/lib/common/model_spec.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/* global monaco */
-import monacoLoader from '~/ide/monaco_loader';
-import Model from '~/ide/lib/common/model';
-import { file } from '../../helpers';
-
-describe('Multi-file editor library model', () => {
-  let model;
-
-  beforeEach((done) => {
-    monacoLoader(['vs/editor/editor.main'], () => {
-      model = new Model(monaco, file('path'));
-
-      done();
-    });
-  });
-
-  afterEach(() => {
-    model.dispose();
-  });
-
-  it('creates original model & new model', () => {
-    expect(model.originalModel).not.toBeNull();
-    expect(model.model).not.toBeNull();
-  });
-
-  describe('path', () => {
-    it('returns file path', () => {
-      expect(model.path).toBe('path');
-    });
-  });
-
-  describe('getModel', () => {
-    it('returns model', () => {
-      expect(model.getModel()).toBe(model.model);
-    });
-  });
-
-  describe('getOriginalModel', () => {
-    it('returns original model', () => {
-      expect(model.getOriginalModel()).toBe(model.originalModel);
-    });
-  });
-
-  describe('onChange', () => {
-    it('caches event by path', () => {
-      model.onChange(() => {});
-
-      expect(model.events.size).toBe(1);
-      expect(model.events.keys().next().value).toBe('path');
-    });
-
-    it('calls callback on change', (done) => {
-      const spy = jasmine.createSpy();
-      model.onChange(spy);
-
-      model.getModel().setValue('123');
-
-      setTimeout(() => {
-        expect(spy).toHaveBeenCalledWith(model.getModel(), jasmine.anything());
-        done();
-      });
-    });
-  });
-
-  describe('dispose', () => {
-    it('calls disposable dispose', () => {
-      spyOn(model.disposable, 'dispose').and.callThrough();
-
-      model.dispose();
-
-      expect(model.disposable.dispose).toHaveBeenCalled();
-    });
-
-    it('clears events', () => {
-      model.onChange(() => {});
-
-      expect(model.events.size).toBe(1);
-
-      model.dispose();
-
-      expect(model.events.size).toBe(0);
-    });
-  });
-});
diff --git a/spec/javascripts/repo/lib/decorations/controller_spec.js b/spec/javascripts/repo/lib/decorations/controller_spec.js
deleted file mode 100644
index fea12d74dca..00000000000
--- a/spec/javascripts/repo/lib/decorations/controller_spec.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/* global monaco */
-import monacoLoader from '~/ide/monaco_loader';
-import editor from '~/ide/lib/editor';
-import DecorationsController from '~/ide/lib/decorations/controller';
-import Model from '~/ide/lib/common/model';
-import { file } from '../../helpers';
-
-describe('Multi-file editor library decorations controller', () => {
-  let editorInstance;
-  let controller;
-  let model;
-
-  beforeEach((done) => {
-    monacoLoader(['vs/editor/editor.main'], () => {
-      editorInstance = editor.create(monaco);
-      editorInstance.createInstance(document.createElement('div'));
-
-      controller = new DecorationsController(editorInstance);
-      model = new Model(monaco, file('path'));
-
-      done();
-    });
-  });
-
-  afterEach(() => {
-    model.dispose();
-    editorInstance.dispose();
-    controller.dispose();
-  });
-
-  describe('getAllDecorationsForModel', () => {
-    it('returns empty array when no decorations exist for model', () => {
-      const decorations = controller.getAllDecorationsForModel(model);
-
-      expect(decorations).toEqual([]);
-    });
-
-    it('returns decorations by model URL', () => {
-      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]);
-
-      const decorations = controller.getAllDecorationsForModel(model);
-
-      expect(decorations[0]).toEqual({ decoration: 'decorationValue' });
-    });
-  });
-
-  describe('addDecorations', () => {
-    it('caches decorations in a new map', () => {
-      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]);
-
-      expect(controller.decorations.size).toBe(1);
-    });
-
-    it('does not create new cache model', () => {
-      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]);
-      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue2' }]);
-
-      expect(controller.decorations.size).toBe(1);
-    });
-
-    it('caches decorations by model URL', () => {
-      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]);
-
-      expect(controller.decorations.size).toBe(1);
-      expect(controller.decorations.keys().next().value).toBe('path');
-    });
-
-    it('calls decorate method', () => {
-      spyOn(controller, 'decorate');
-
-      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]);
-
-      expect(controller.decorate).toHaveBeenCalled();
-    });
-  });
-
-  describe('decorate', () => {
-    it('sets decorations on editor instance', () => {
-      spyOn(controller.editor.instance, 'deltaDecorations');
-
-      controller.decorate(model);
-
-      expect(controller.editor.instance.deltaDecorations).toHaveBeenCalledWith([], []);
-    });
-
-    it('caches decorations', () => {
-      spyOn(controller.editor.instance, 'deltaDecorations').and.returnValue([]);
-
-      controller.decorate(model);
-
-      expect(controller.editorDecorations.size).toBe(1);
-    });
-
-    it('caches decorations by model URL', () => {
-      spyOn(controller.editor.instance, 'deltaDecorations').and.returnValue([]);
-
-      controller.decorate(model);
-
-      expect(controller.editorDecorations.keys().next().value).toBe('path');
-    });
-  });
-
-  describe('dispose', () => {
-    it('clears cached decorations', () => {
-      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]);
-
-      controller.dispose();
-
-      expect(controller.decorations.size).toBe(0);
-    });
-
-    it('clears cached editorDecorations', () => {
-      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]);
-
-      controller.dispose();
-
-      expect(controller.editorDecorations.size).toBe(0);
-    });
-  });
-});
diff --git a/spec/javascripts/repo/lib/diff/controller_spec.js b/spec/javascripts/repo/lib/diff/controller_spec.js
deleted file mode 100644
index 1d55c165260..00000000000
--- a/spec/javascripts/repo/lib/diff/controller_spec.js
+++ /dev/null
@@ -1,176 +0,0 @@
-/* global monaco */
-import monacoLoader from '~/ide/monaco_loader';
-import editor from '~/ide/lib/editor';
-import ModelManager from '~/ide/lib/common/model_manager';
-import DecorationsController from '~/ide/lib/decorations/controller';
-import DirtyDiffController, { getDiffChangeType, getDecorator } from '~/ide/lib/diff/controller';
-import { computeDiff } from '~/ide/lib/diff/diff';
-import { file } from '../../helpers';
-
-describe('Multi-file editor library dirty diff controller', () => {
-  let editorInstance;
-  let controller;
-  let modelManager;
-  let decorationsController;
-  let model;
-
-  beforeEach((done) => {
-    monacoLoader(['vs/editor/editor.main'], () => {
-      editorInstance = editor.create(monaco);
-      editorInstance.createInstance(document.createElement('div'));
-
-      modelManager = new ModelManager(monaco);
-      decorationsController = new DecorationsController(editorInstance);
-
-      model = modelManager.addModel(file());
-
-      controller = new DirtyDiffController(modelManager, decorationsController);
-
-      done();
-    });
-  });
-
-  afterEach(() => {
-    controller.dispose();
-    model.dispose();
-    decorationsController.dispose();
-    editorInstance.dispose();
-  });
-
-  describe('getDiffChangeType', () => {
-    ['added', 'removed', 'modified'].forEach((type) => {
-      it(`returns ${type}`, () => {
-        const change = {
-          [type]: true,
-        };
-
-        expect(getDiffChangeType(change)).toBe(type);
-      });
-    });
-  });
-
-  describe('getDecorator', () => {
-    ['added', 'removed', 'modified'].forEach((type) => {
-      it(`returns with linesDecorationsClassName for ${type}`, () => {
-        const change = {
-          [type]: true,
-        };
-
-        expect(
-          getDecorator(change).options.linesDecorationsClassName,
-        ).toBe(`dirty-diff dirty-diff-${type}`);
-      });
-
-      it('returns with line numbers', () => {
-        const change = {
-          lineNumber: 1,
-          endLineNumber: 2,
-          [type]: true,
-        };
-
-        const range = getDecorator(change).range;
-
-        expect(range.startLineNumber).toBe(1);
-        expect(range.endLineNumber).toBe(2);
-        expect(range.startColumn).toBe(1);
-        expect(range.endColumn).toBe(1);
-      });
-    });
-  });
-
-  describe('attachModel', () => {
-    it('adds change event callback', () => {
-      spyOn(model, 'onChange');
-
-      controller.attachModel(model);
-
-      expect(model.onChange).toHaveBeenCalled();
-    });
-
-    it('calls throttledComputeDiff on change', () => {
-      spyOn(controller, 'throttledComputeDiff');
-
-      controller.attachModel(model);
-
-      model.getModel().setValue('123');
-
-      expect(controller.throttledComputeDiff).toHaveBeenCalled();
-    });
-  });
-
-  describe('computeDiff', () => {
-    it('posts to worker', () => {
-      spyOn(controller.dirtyDiffWorker, 'postMessage');
-
-      controller.computeDiff(model);
-
-      expect(controller.dirtyDiffWorker.postMessage).toHaveBeenCalledWith({
-        path: model.path,
-        originalContent: '',
-        newContent: '',
-      });
-    });
-  });
-
-  describe('reDecorate', () => {
-    it('calls decorations controller decorate', () => {
-      spyOn(controller.decorationsController, 'decorate');
-
-      controller.reDecorate(model);
-
-      expect(controller.decorationsController.decorate).toHaveBeenCalledWith(model);
-    });
-  });
-
-  describe('decorate', () => {
-    it('adds decorations into decorations controller', () => {
-      spyOn(controller.decorationsController, 'addDecorations');
-
-      controller.decorate({ data: { changes: [], path: 'path' } });
-
-      expect(controller.decorationsController.addDecorations).toHaveBeenCalledWith('path', 'dirtyDiff', jasmine.anything());
-    });
-
-    it('adds decorations into editor', () => {
-      const spy = spyOn(controller.decorationsController.editor.instance, 'deltaDecorations');
-
-      controller.decorate({ data: { changes: computeDiff('123', '1234'), path: 'path' } });
-
-      expect(spy).toHaveBeenCalledWith([], [{
-        range: new monaco.Range(
-          1, 1, 1, 1,
-        ),
-        options: {
-          isWholeLine: true,
-          linesDecorationsClassName: 'dirty-diff dirty-diff-modified',
-        },
-      }]);
-    });
-  });
-
-  describe('dispose', () => {
-    it('calls disposable dispose', () => {
-      spyOn(controller.disposable, 'dispose').and.callThrough();
-
-      controller.dispose();
-
-      expect(controller.disposable.dispose).toHaveBeenCalled();
-    });
-
-    it('terminates worker', () => {
-      spyOn(controller.dirtyDiffWorker, 'terminate').and.callThrough();
-
-      controller.dispose();
-
-      expect(controller.dirtyDiffWorker.terminate).toHaveBeenCalled();
-    });
-
-    it('removes worker event listener', () => {
-      spyOn(controller.dirtyDiffWorker, 'removeEventListener').and.callThrough();
-
-      controller.dispose();
-
-      expect(controller.dirtyDiffWorker.removeEventListener).toHaveBeenCalledWith('message', jasmine.anything());
-    });
-  });
-});
diff --git a/spec/javascripts/repo/lib/diff/diff_spec.js b/spec/javascripts/repo/lib/diff/diff_spec.js
deleted file mode 100644
index 57f3ac3d365..00000000000
--- a/spec/javascripts/repo/lib/diff/diff_spec.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { computeDiff } from '~/ide/lib/diff/diff';
-
-describe('Multi-file editor library diff calculator', () => {
-  describe('computeDiff', () => {
-    it('returns empty array if no changes', () => {
-      const diff = computeDiff('123', '123');
-
-      expect(diff).toEqual([]);
-    });
-
-    describe('modified', () => {
-      it('', () => {
-        const diff = computeDiff('123', '1234')[0];
-
-        expect(diff.added).toBeTruthy();
-        expect(diff.modified).toBeTruthy();
-        expect(diff.removed).toBeUndefined();
-      });
-
-      it('', () => {
-        const diff = computeDiff('123\n123\n123', '123\n1234\n123')[0];
-
-        expect(diff.added).toBeTruthy();
-        expect(diff.modified).toBeTruthy();
-        expect(diff.removed).toBeUndefined();
-        expect(diff.lineNumber).toBe(2);
-      });
-    });
-
-    describe('added', () => {
-      it('', () => {
-        const diff = computeDiff('123', '123\n123')[0];
-
-        expect(diff.added).toBeTruthy();
-        expect(diff.modified).toBeUndefined();
-        expect(diff.removed).toBeUndefined();
-      });
-
-      it('', () => {
-        const diff = computeDiff('123\n123\n123', '123\n123\n1234\n123')[0];
-
-        expect(diff.added).toBeTruthy();
-        expect(diff.modified).toBeUndefined();
-        expect(diff.removed).toBeUndefined();
-        expect(diff.lineNumber).toBe(3);
-      });
-    });
-
-    describe('removed', () => {
-      it('', () => {
-        const diff = computeDiff('123', '')[0];
-
-        expect(diff.added).toBeUndefined();
-        expect(diff.modified).toBeUndefined();
-        expect(diff.removed).toBeTruthy();
-      });
-
-      it('', () => {
-        const diff = computeDiff('123\n123\n123', '123\n123')[0];
-
-        expect(diff.added).toBeUndefined();
-        expect(diff.modified).toBeTruthy();
-        expect(diff.removed).toBeTruthy();
-        expect(diff.lineNumber).toBe(2);
-      });
-    });
-
-    it('includes line number of change', () => {
-      const diff = computeDiff('123', '')[0];
-
-      expect(diff.lineNumber).toBe(1);
-    });
-
-    it('includes end line number of change', () => {
-      const diff = computeDiff('123', '')[0];
-
-      expect(diff.endLineNumber).toBe(1);
-    });
-  });
-});
diff --git a/spec/javascripts/repo/lib/editor_options_spec.js b/spec/javascripts/repo/lib/editor_options_spec.js
deleted file mode 100644
index edbf5450dce..00000000000
--- a/spec/javascripts/repo/lib/editor_options_spec.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import editorOptions from '~/ide/lib/editor_options';
-
-describe('Multi-file editor library editor options', () => {
-  it('returns an array', () => {
-    expect(editorOptions).toEqual(jasmine.any(Array));
-  });
-});
diff --git a/spec/javascripts/repo/lib/editor_spec.js b/spec/javascripts/repo/lib/editor_spec.js
deleted file mode 100644
index 8d51d48a782..00000000000
--- a/spec/javascripts/repo/lib/editor_spec.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/* global monaco */
-import monacoLoader from '~/ide/monaco_loader';
-import editor from '~/ide/lib/editor';
-import { file } from '../helpers';
-
-describe('Multi-file editor library', () => {
-  let instance;
-
-  beforeEach((done) => {
-    monacoLoader(['vs/editor/editor.main'], () => {
-      instance = editor.create(monaco);
-
-      done();
-    });
-  });
-
-  afterEach(() => {
-    instance.dispose();
-  });
-
-  it('creates instance of editor', () => {
-    expect(editor.editorInstance).not.toBeNull();
-  });
-
-  describe('createInstance', () => {
-    let el;
-
-    beforeEach(() => {
-      el = document.createElement('div');
-    });
-
-    it('creates editor instance', () => {
-      spyOn(instance.monaco.editor, 'create').and.callThrough();
-
-      instance.createInstance(el);
-
-      expect(instance.monaco.editor.create).toHaveBeenCalled();
-    });
-
-    it('creates dirty diff controller', () => {
-      instance.createInstance(el);
-
-      expect(instance.dirtyDiffController).not.toBeNull();
-    });
-  });
-
-  describe('createModel', () => {
-    it('calls model manager addModel', () => {
-      spyOn(instance.modelManager, 'addModel');
-
-      instance.createModel('FILE');
-
-      expect(instance.modelManager.addModel).toHaveBeenCalledWith('FILE');
-    });
-  });
-
-  describe('attachModel', () => {
-    let model;
-
-    beforeEach(() => {
-      instance.createInstance(document.createElement('div'));
-
-      model = instance.createModel(file());
-    });
-
-    it('sets the current model on the instance', () => {
-      instance.attachModel(model);
-
-      expect(instance.currentModel).toBe(model);
-    });
-
-    it('attaches the model to the current instance', () => {
-      spyOn(instance.instance, 'setModel');
-
-      instance.attachModel(model);
-
-      expect(instance.instance.setModel).toHaveBeenCalledWith(model.getModel());
-    });
-
-    it('attaches the model to the dirty diff controller', () => {
-      spyOn(instance.dirtyDiffController, 'attachModel');
-
-      instance.attachModel(model);
-
-      expect(instance.dirtyDiffController.attachModel).toHaveBeenCalledWith(model);
-    });
-
-    it('re-decorates with the dirty diff controller', () => {
-      spyOn(instance.dirtyDiffController, 'reDecorate');
-
-      instance.attachModel(model);
-
-      expect(instance.dirtyDiffController.reDecorate).toHaveBeenCalledWith(model);
-    });
-  });
-
-  describe('clearEditor', () => {
-    it('resets the editor model', () => {
-      instance.createInstance(document.createElement('div'));
-
-      spyOn(instance.instance, 'setModel');
-
-      instance.clearEditor();
-
-      expect(instance.instance.setModel).toHaveBeenCalledWith(null);
-    });
-  });
-
-  describe('dispose', () => {
-    it('calls disposble dispose method', () => {
-      spyOn(instance.disposable, 'dispose').and.callThrough();
-
-      instance.dispose();
-
-      expect(instance.disposable.dispose).toHaveBeenCalled();
-    });
-
-    it('resets instance', () => {
-      instance.createInstance(document.createElement('div'));
-
-      expect(instance.instance).not.toBeNull();
-
-      instance.dispose();
-
-      expect(instance.instance).toBeNull();
-    });
-  });
-});
diff --git a/spec/javascripts/repo/monaco_loader_spec.js b/spec/javascripts/repo/monaco_loader_spec.js
deleted file mode 100644
index b8ac36972aa..00000000000
--- a/spec/javascripts/repo/monaco_loader_spec.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import monacoContext from 'monaco-editor/dev/vs/loader';
-import monacoLoader from '~/ide/monaco_loader';
-
-describe('MonacoLoader', () => {
-  it('calls require.config and exports require', () => {
-    expect(monacoContext.require.getConfig()).toEqual(jasmine.objectContaining({
-      paths: {
-        vs: `${__webpack_public_path__}monaco-editor/vs`, // eslint-disable-line camelcase
-      },
-    }));
-    expect(monacoLoader).toBe(monacoContext.require);
-  });
-});
diff --git a/spec/javascripts/repo/stores/actions/branch_spec.js b/spec/javascripts/repo/stores/actions/branch_spec.js
deleted file mode 100644
index 00d16fd790d..00000000000
--- a/spec/javascripts/repo/stores/actions/branch_spec.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import store from '~/ide/stores';
-import service from '~/ide/services';
-import { resetStore } from '../../helpers';
-
-describe('Multi-file store branch actions', () => {
-  afterEach(() => {
-    resetStore(store);
-  });
-
-  describe('createNewBranch', () => {
-    beforeEach(() => {
-      spyOn(service, 'createBranch').and.returnValue(Promise.resolve({
-        json: () => ({
-          name: 'testing',
-        }),
-      }));
-      spyOn(history, 'pushState');
-
-      store.state.currentProjectId = 'abcproject';
-      store.state.currentBranchId = 'testing';
-      store.state.projects.abcproject = {
-        branches: {
-          master: {
-            workingReference: '1',
-          },
-        },
-      };
-    });
-
-    it('creates new branch', (done) => {
-      store.dispatch('createNewBranch', 'master')
-        .then(() => {
-          expect(store.state.currentBranchId).toBe('testing');
-          expect(service.createBranch).toHaveBeenCalledWith('abcproject', {
-            branch: 'master',
-            ref: 'testing',
-          });
-
-          done();
-        })
-        .catch(done.fail);
-    });
-  });
-});
diff --git a/spec/javascripts/repo/stores/actions/file_spec.js b/spec/javascripts/repo/stores/actions/file_spec.js
deleted file mode 100644
index e2d8f002e27..00000000000
--- a/spec/javascripts/repo/stores/actions/file_spec.js
+++ /dev/null
@@ -1,431 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import service from '~/ide/services';
-import { file, resetStore } from '../../helpers';
-
-describe('Multi-file store file actions', () => {
-  afterEach(() => {
-    resetStore(store);
-  });
-
-  describe('closeFile', () => {
-    let localFile;
-    let getLastCommitDataSpy;
-    let oldGetLastCommitData;
-
-    beforeEach(() => {
-      getLastCommitDataSpy = jasmine.createSpy('getLastCommitData');
-      oldGetLastCommitData = store._actions.getLastCommitData; // eslint-disable-line
-      store._actions.getLastCommitData = [getLastCommitDataSpy]; // eslint-disable-line
-
-      localFile = file('testFile');
-      localFile.active = true;
-      localFile.opened = true;
-      localFile.parentTreeUrl = 'parentTreeUrl';
-
-      store.state.openFiles.push(localFile);
-    });
-
-    afterEach(() => {
-      store._actions.getLastCommitData = oldGetLastCommitData; // eslint-disable-line
-    });
-
-    it('closes open files', (done) => {
-      store.dispatch('closeFile', { file: localFile })
-        .then(() => {
-          expect(localFile.opened).toBeFalsy();
-          expect(localFile.active).toBeFalsy();
-          expect(store.state.openFiles.length).toBe(0);
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('does not close file if has changed', (done) => {
-      localFile.changed = true;
-
-      store.dispatch('closeFile', { file: localFile })
-        .then(() => {
-          expect(localFile.opened).toBeTruthy();
-          expect(localFile.active).toBeTruthy();
-          expect(store.state.openFiles.length).toBe(1);
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('does not close file if temp file', (done) => {
-      localFile.tempFile = true;
-
-      store.dispatch('closeFile', { file: localFile })
-        .then(() => {
-          expect(localFile.opened).toBeTruthy();
-          expect(localFile.active).toBeTruthy();
-          expect(store.state.openFiles.length).toBe(1);
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('force closes a changed file', (done) => {
-      localFile.changed = true;
-
-      store.dispatch('closeFile', { file: localFile, force: true })
-        .then(() => {
-          expect(localFile.opened).toBeFalsy();
-          expect(localFile.active).toBeFalsy();
-          expect(store.state.openFiles.length).toBe(0);
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('sets next file as active', (done) => {
-      const f = file('otherfile');
-      store.state.openFiles.push(f);
-
-      expect(f.active).toBeFalsy();
-
-      store.dispatch('closeFile', { file: localFile })
-        .then(() => {
-          expect(f.active).toBeTruthy();
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('calls getLastCommitData', (done) => {
-      store.dispatch('closeFile', { file: localFile })
-        .then(() => {
-          expect(getLastCommitDataSpy).toHaveBeenCalled();
-
-          done();
-        }).catch(done.fail);
-    });
-  });
-
-  describe('setFileActive', () => {
-    let scrollToTabSpy;
-    let oldScrollToTab;
-
-    beforeEach(() => {
-      scrollToTabSpy = jasmine.createSpy('scrollToTab');
-      oldScrollToTab = store._actions.scrollToTab; // eslint-disable-line
-      store._actions.scrollToTab = [scrollToTabSpy]; // eslint-disable-line
-    });
-
-    afterEach(() => {
-      store._actions.scrollToTab = oldScrollToTab; // eslint-disable-line
-    });
-
-    it('calls scrollToTab', (done) => {
-      store.dispatch('setFileActive', file('setThisActive'))
-        .then(() => {
-          expect(scrollToTabSpy).toHaveBeenCalled();
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('sets the file active', (done) => {
-      const localFile = file('activeFile');
-
-      store.dispatch('setFileActive', localFile)
-        .then(() => {
-          expect(localFile.active).toBeTruthy();
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('returns early if file is already active', (done) => {
-      const localFile = file('earlyActive');
-      localFile.active = true;
-
-      store.dispatch('setFileActive', localFile)
-        .then(() => {
-          expect(scrollToTabSpy).not.toHaveBeenCalled();
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('sets current active file to not active', (done) => {
-      const localFile = file('currentActive');
-      localFile.active = true;
-      store.state.openFiles.push(localFile);
-
-      store.dispatch('setFileActive', file('newActive'))
-        .then(() => {
-          expect(localFile.active).toBeFalsy();
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('resets location.hash for line highlighting', (done) => {
-      location.hash = 'test';
-
-      store.dispatch('setFileActive', file('otherActive'))
-        .then(() => {
-          expect(location.hash).not.toBe('test');
-
-          done();
-        }).catch(done.fail);
-    });
-  });
-
-  describe('getFileData', () => {
-    let localFile;
-
-    beforeEach(() => {
-      spyOn(service, 'getFileData').and.returnValue(Promise.resolve({
-        headers: {
-          'page-title': 'testing getFileData',
-        },
-        json: () => Promise.resolve({
-          blame_path: 'blame_path',
-          commits_path: 'commits_path',
-          permalink: 'permalink',
-          raw_path: 'raw_path',
-          binary: false,
-          html: '123',
-          render_error: '',
-        }),
-      }));
-
-      localFile = file('newCreate');
-      localFile.url = 'getFileDataURL';
-    });
-
-    afterEach(() => {
-      store.dispatch('closeFile', {
-        file: localFile,
-        force: true,
-      });
-    });
-
-    it('calls the service', (done) => {
-      store.dispatch('getFileData', localFile)
-        .then(() => {
-          expect(service.getFileData).toHaveBeenCalledWith('getFileDataURL');
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('sets the file data', (done) => {
-      store.dispatch('getFileData', localFile)
-        .then(Vue.nextTick)
-        .then(() => {
-          expect(localFile.blamePath).toBe('blame_path');
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('sets document title', (done) => {
-      store.dispatch('getFileData', localFile)
-        .then(() => {
-          expect(document.title).toBe('testing getFileData');
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('sets the file as active', (done) => {
-      store.dispatch('getFileData', localFile)
-        .then(Vue.nextTick)
-        .then(() => {
-          expect(localFile.active).toBeTruthy();
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('adds the file to open files', (done) => {
-      store.dispatch('getFileData', localFile)
-        .then(Vue.nextTick)
-        .then(() => {
-          expect(store.state.openFiles.length).toBe(1);
-          expect(store.state.openFiles[0].name).toBe(localFile.name);
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('toggles the file loading', (done) => {
-      store.dispatch('getFileData', localFile)
-        .then(() => {
-          expect(localFile.loading).toBeTruthy();
-
-          return Vue.nextTick();
-        })
-        .then(() => {
-          expect(localFile.loading).toBeFalsy();
-
-          done();
-        }).catch(done.fail);
-    });
-  });
-
-  describe('getRawFileData', () => {
-    let tmpFile;
-
-    beforeEach(() => {
-      spyOn(service, 'getRawFileData').and.returnValue(Promise.resolve('raw'));
-
-      tmpFile = file('tmpFile');
-    });
-
-    it('calls getRawFileData service method', (done) => {
-      store.dispatch('getRawFileData', tmpFile)
-        .then(() => {
-          expect(service.getRawFileData).toHaveBeenCalledWith(tmpFile);
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('updates file raw data', (done) => {
-      store.dispatch('getRawFileData', tmpFile)
-        .then(() => {
-          expect(tmpFile.raw).toBe('raw');
-
-          done();
-        }).catch(done.fail);
-    });
-  });
-
-  describe('changeFileContent', () => {
-    let tmpFile;
-
-    beforeEach(() => {
-      tmpFile = file('tmpFile');
-    });
-
-    it('updates file content', (done) => {
-      store.dispatch('changeFileContent', {
-        file: tmpFile,
-        content: 'content',
-      })
-      .then(() => {
-        expect(tmpFile.content).toBe('content');
-
-        done();
-      }).catch(done.fail);
-    });
-  });
-
-  describe('createTempFile', () => {
-    let projectTree;
-
-    beforeEach(() => {
-      document.body.innerHTML += '<div class="flash-container"></div>';
-
-      store.state.currentProjectId = 'abcproject';
-      store.state.currentBranchId = 'master';
-      store.state.projects.abcproject = {
-        branches: {
-          master: {
-            workingReference: '1',
-          },
-        },
-      };
-
-      store.state.trees['abcproject/mybranch'] = {
-        tree: [],
-      };
-
-      projectTree = store.state.trees['abcproject/mybranch'];
-    });
-
-    afterEach(() => {
-      document.querySelector('.flash-container').remove();
-    });
-
-    it('creates temp file', (done) => {
-      store.dispatch('createTempFile', {
-        name: 'test',
-        projectId: 'abcproject',
-        branchId: 'mybranch',
-        parent: projectTree,
-      }).then((f) => {
-        expect(f.tempFile).toBeTruthy();
-        expect(store.state.trees['abcproject/mybranch'].tree.length).toBe(1);
-
-        done();
-      }).catch(done.fail);
-    });
-
-    it('adds tmp file to open files', (done) => {
-      store.dispatch('createTempFile', {
-        name: 'test',
-        projectId: 'abcproject',
-        branchId: 'mybranch',
-        parent: projectTree,
-      }).then((f) => {
-        expect(store.state.openFiles.length).toBe(1);
-        expect(store.state.openFiles[0].name).toBe(f.name);
-
-        done();
-      }).catch(done.fail);
-    });
-
-    it('sets tmp file as active', (done) => {
-      store.dispatch('createTempFile', {
-        name: 'test',
-        projectId: 'abcproject',
-        branchId: 'mybranch',
-        parent: projectTree,
-      }).then((f) => {
-        expect(f.active).toBeTruthy();
-
-        done();
-      }).catch(done.fail);
-    });
-
-    it('enters edit mode if file is not base64', (done) => {
-      store.dispatch('createTempFile', {
-        name: 'test',
-        projectId: 'abcproject',
-        branchId: 'mybranch',
-        parent: projectTree,
-      }).then(() => {
-        expect(store.state.editMode).toBeTruthy();
-
-        done();
-      }).catch(done.fail);
-    });
-
-    it('creates flash message is file already exists', (done) => {
-      store.state.trees['abcproject/mybranch'].tree.push(file('test', '1', 'blob'));
-
-      store.dispatch('createTempFile', {
-        name: 'test',
-        projectId: 'abcproject',
-        branchId: 'mybranch',
-        parent: projectTree,
-      }).then(() => {
-        expect(document.querySelector('.flash-alert')).not.toBeNull();
-
-        done();
-      }).catch(done.fail);
-    });
-
-    it('increases level of file', (done) => {
-      store.state.trees['abcproject/mybranch'].level = 1;
-
-      store.dispatch('createTempFile', {
-        name: 'test',
-        projectId: 'abcproject',
-        branchId: 'mybranch',
-        parent: projectTree,
-      }).then((f) => {
-        expect(f.level).toBe(2);
-
-        done();
-      }).catch(done.fail);
-    });
-  });
-});
diff --git a/spec/javascripts/repo/stores/actions/tree_spec.js b/spec/javascripts/repo/stores/actions/tree_spec.js
deleted file mode 100644
index 65351dbb7d9..00000000000
--- a/spec/javascripts/repo/stores/actions/tree_spec.js
+++ /dev/null
@@ -1,350 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import service from '~/ide/services';
-import { file, resetStore } from '../../helpers';
-
-describe('Multi-file store tree actions', () => {
-  let projectTree;
-
-  const basicCallParameters = {
-    endpoint: 'rootEndpoint',
-    projectId: 'abcproject',
-    branch: 'master',
-  };
-
-  beforeEach(() => {
-    store.state.currentProjectId = 'abcproject';
-    store.state.currentBranchId = 'master';
-    store.state.projects.abcproject = {
-      web_url: '',
-      branches: {
-        master: {
-          workingReference: '1',
-        },
-      },
-    };
-  });
-
-  afterEach(() => {
-    resetStore(store);
-  });
-
-  describe('getTreeData', () => {
-    beforeEach(() => {
-      spyOn(service, 'getTreeData').and.returnValue(Promise.resolve({
-        headers: {
-          'page-title': 'test',
-        },
-        json: () => Promise.resolve({
-          last_commit_path: 'last_commit_path',
-          parent_tree_url: 'parent_tree_url',
-          path: '/',
-          trees: [{ name: 'tree' }],
-          blobs: [{ name: 'blob' }],
-          submodules: [{ name: 'submodule' }],
-        }),
-      }));
-    });
-
-    it('calls service getTreeData', (done) => {
-      store.dispatch('getTreeData', basicCallParameters)
-      .then(() => {
-        expect(service.getTreeData).toHaveBeenCalledWith('rootEndpoint');
-
-        done();
-      }).catch(done.fail);
-    });
-
-    it('adds data into tree', (done) => {
-      store.dispatch('getTreeData', basicCallParameters)
-        .then(() => {
-          projectTree = store.state.trees['abcproject/master'];
-          expect(projectTree.tree.length).toBe(3);
-          expect(projectTree.tree[0].type).toBe('tree');
-          expect(projectTree.tree[1].type).toBe('submodule');
-          expect(projectTree.tree[2].type).toBe('blob');
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('sets parent tree URL', (done) => {
-      store.dispatch('getTreeData', basicCallParameters)
-        .then(() => {
-          expect(store.state.parentTreeUrl).toBe('parent_tree_url');
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('sets last commit path', (done) => {
-      store.dispatch('getTreeData', basicCallParameters)
-        .then(() => {
-          expect(store.state.trees['abcproject/master'].lastCommitPath).toBe('last_commit_path');
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('sets root if not currently at root', (done) => {
-      store.state.isInitialRoot = false;
-
-      store.dispatch('getTreeData', basicCallParameters)
-        .then(() => {
-          expect(store.state.isInitialRoot).toBeTruthy();
-          expect(store.state.isRoot).toBeTruthy();
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('sets page title', (done) => {
-      store.dispatch('getTreeData', basicCallParameters)
-        .then(() => {
-          expect(document.title).toBe('test');
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('calls getLastCommitData if prevLastCommitPath is not null', (done) => {
-      const getLastCommitDataSpy = jasmine.createSpy('getLastCommitData');
-      const oldGetLastCommitData = store._actions.getLastCommitData; // eslint-disable-line
-      store._actions.getLastCommitData = [getLastCommitDataSpy]; // eslint-disable-line
-      store.state.prevLastCommitPath = 'test';
-
-      store.dispatch('getTreeData', basicCallParameters)
-        .then(() => {
-          expect(getLastCommitDataSpy).toHaveBeenCalledWith(projectTree);
-
-          store._actions.getLastCommitData = oldGetLastCommitData; // eslint-disable-line
-
-          done();
-        }).catch(done.fail);
-    });
-  });
-
-  describe('toggleTreeOpen', () => {
-    let oldGetTreeData;
-    let getTreeDataSpy;
-    let tree;
-
-    beforeEach(() => {
-      getTreeDataSpy = jasmine.createSpy('getTreeData');
-
-      oldGetTreeData = store._actions.getTreeData;  // eslint-disable-line
-      store._actions.getTreeData = [getTreeDataSpy]; // eslint-disable-line
-
-      tree = {
-        projectId: 'abcproject',
-        branchId: 'master',
-        opened: false,
-        tree: [],
-      };
-    });
-
-    afterEach(() => {
-      store._actions.getTreeData = oldGetTreeData; // eslint-disable-line
-    });
-
-    it('toggles the tree open', (done) => {
-      store.dispatch('toggleTreeOpen', {
-        endpoint: 'test',
-        tree,
-      }).then(() => {
-        expect(tree.opened).toBeTruthy();
-
-        done();
-      }).catch(done.fail);
-    });
-
-    it('calls getTreeData if tree is closed', (done) => {
-      store.dispatch('toggleTreeOpen', {
-        endpoint: 'test',
-        tree,
-      }).then(() => {
-        expect(getTreeDataSpy).toHaveBeenCalledWith({
-          projectId: 'abcproject',
-          branch: 'master',
-          endpoint: 'test',
-          tree,
-        });
-
-        done();
-      }).catch(done.fail);
-    });
-
-    it('resets entries tree', (done) => {
-      Object.assign(tree, {
-        opened: true,
-        tree: ['a'],
-      });
-
-      store.dispatch('toggleTreeOpen', {
-        endpoint: 'test',
-        tree,
-      }).then(() => {
-        expect(tree.tree.length).toBe(0);
-
-        done();
-      }).catch(done.fail);
-    });
-  });
-
-  describe('createTempTree', () => {
-    beforeEach(() => {
-      store.state.trees['abcproject/mybranch'] = {
-        tree: [],
-      };
-      projectTree = store.state.trees['abcproject/mybranch'];
-    });
-
-    it('creates temp tree', (done) => {
-      store.dispatch('createTempTree', {
-        projectId: store.state.currentProjectId,
-        branchId: store.state.currentBranchId,
-        name: 'test',
-        parent: projectTree,
-      })
-      .then(() => {
-        expect(projectTree.tree[0].name).toBe('test');
-        expect(projectTree.tree[0].type).toBe('tree');
-
-        done();
-      }).catch(done.fail);
-    });
-
-    it('creates new folder inside another tree', (done) => {
-      const tree = {
-        type: 'tree',
-        name: 'testing',
-        tree: [],
-      };
-
-      projectTree.tree.push(tree);
-
-      store.dispatch('createTempTree', {
-        projectId: store.state.currentProjectId,
-        branchId: store.state.currentBranchId,
-        name: 'testing/test',
-        parent: projectTree,
-      })
-      .then(() => {
-        expect(projectTree.tree[0].name).toBe('testing');
-        expect(projectTree.tree[0].tree[0].tempFile).toBeTruthy();
-        expect(projectTree.tree[0].tree[0].name).toBe('test');
-        expect(projectTree.tree[0].tree[0].type).toBe('tree');
-
-        done();
-      }).catch(done.fail);
-    });
-
-    it('does not create new tree if already exists', (done) => {
-      const tree = {
-        type: 'tree',
-        name: 'testing',
-        endpoint: 'test',
-        tree: [],
-      };
-
-      projectTree.tree.push(tree);
-
-      store.dispatch('createTempTree', {
-        projectId: store.state.currentProjectId,
-        branchId: store.state.currentBranchId,
-        name: 'testing/test',
-        parent: projectTree,
-      })
-      .then(() => {
-        expect(projectTree.tree[0].name).toBe('testing');
-        expect(projectTree.tree[0].tempFile).toBeUndefined();
-
-        done();
-      }).catch(done.fail);
-    });
-  });
-
-  describe('getLastCommitData', () => {
-    beforeEach(() => {
-      spyOn(service, 'getTreeLastCommit').and.returnValue(Promise.resolve({
-        headers: {
-          'more-logs-url': null,
-        },
-        json: () => Promise.resolve([{
-          type: 'tree',
-          file_name: 'testing',
-          commit: {
-            message: 'commit message',
-            authored_date: '123',
-          },
-        }]),
-      }));
-
-      store.state.trees['abcproject/mybranch'] = {
-        tree: [],
-      };
-
-      projectTree = store.state.trees['abcproject/mybranch'];
-      projectTree.tree.push(file('testing', '1', 'tree'));
-      projectTree.lastCommitPath = 'lastcommitpath';
-    });
-
-    it('calls service with lastCommitPath', (done) => {
-      store.dispatch('getLastCommitData', projectTree)
-        .then(() => {
-          expect(service.getTreeLastCommit).toHaveBeenCalledWith('lastcommitpath');
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('updates trees last commit data', (done) => {
-      store.dispatch('getLastCommitData', projectTree)
-      .then(Vue.nextTick)
-        .then(() => {
-          expect(projectTree.tree[0].lastCommit.message).toBe('commit message');
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('does not update entry if not found', (done) => {
-      projectTree.tree[0].name = 'a';
-
-      store.dispatch('getLastCommitData', projectTree)
-        .then(Vue.nextTick)
-        .then(() => {
-          expect(projectTree.tree[0].lastCommit.message).not.toBe('commit message');
-
-          done();
-        }).catch(done.fail);
-    });
-  });
-
-  describe('updateDirectoryData', () => {
-    it('adds data into tree', (done) => {
-      const tree = {
-        tree: [],
-      };
-      const data = {
-        trees: [{ name: 'tree' }],
-        submodules: [{ name: 'submodule' }],
-        blobs: [{ name: 'blob' }],
-      };
-
-      store.dispatch('updateDirectoryData', {
-        data,
-        tree,
-      }).then(() => {
-        expect(tree.tree[0].name).toBe('tree');
-        expect(tree.tree[0].type).toBe('tree');
-        expect(tree.tree[1].name).toBe('submodule');
-        expect(tree.tree[1].type).toBe('submodule');
-        expect(tree.tree[2].name).toBe('blob');
-        expect(tree.tree[2].type).toBe('blob');
-
-        done();
-      }).catch(done.fail);
-    });
-  });
-});
diff --git a/spec/javascripts/repo/stores/actions_spec.js b/spec/javascripts/repo/stores/actions_spec.js
deleted file mode 100644
index f678967b092..00000000000
--- a/spec/javascripts/repo/stores/actions_spec.js
+++ /dev/null
@@ -1,432 +0,0 @@
-import Vue from 'vue';
-import * as urlUtils from '~/lib/utils/url_utility';
-import store from '~/ide/stores';
-import service from '~/ide/services';
-import { resetStore, file } from '../helpers';
-
-describe('Multi-file store actions', () => {
-  afterEach(() => {
-    resetStore(store);
-  });
-
-  describe('redirectToUrl', () => {
-    it('calls visitUrl', (done) => {
-      spyOn(urlUtils, 'visitUrl');
-
-      store.dispatch('redirectToUrl', 'test')
-        .then(() => {
-          expect(urlUtils.visitUrl).toHaveBeenCalledWith('test');
-
-          done();
-        })
-        .catch(done.fail);
-    });
-  });
-
-  describe('setInitialData', () => {
-    it('commits initial data', (done) => {
-      store.dispatch('setInitialData', { canCommit: true })
-        .then(() => {
-          expect(store.state.canCommit).toBeTruthy();
-          done();
-        })
-        .catch(done.fail);
-    });
-  });
-
-  describe('closeDiscardPopup', () => {
-    it('closes the discard popup', (done) => {
-      store.dispatch('closeDiscardPopup', false)
-        .then(() => {
-          expect(store.state.discardPopupOpen).toBeFalsy();
-
-          done();
-        })
-        .catch(done.fail);
-    });
-  });
-
-  describe('discardAllChanges', () => {
-    beforeEach(() => {
-      store.state.openFiles.push(file('discardAll'));
-      store.state.openFiles[0].changed = true;
-    });
-  });
-
-  describe('closeAllFiles', () => {
-    beforeEach(() => {
-      store.state.openFiles.push(file('closeAll'));
-      store.state.openFiles[0].opened = true;
-    });
-
-    it('closes all open files', (done) => {
-      store.dispatch('closeAllFiles')
-        .then(() => {
-          expect(store.state.openFiles.length).toBe(0);
-
-          done();
-        })
-        .catch(done.fail);
-    });
-  });
-
-  describe('toggleEditMode', () => {
-    it('toggles edit mode', (done) => {
-      store.state.editMode = true;
-
-      store.dispatch('toggleEditMode')
-        .then(() => {
-          expect(store.state.editMode).toBeFalsy();
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('sets preview mode', (done) => {
-      store.state.currentBlobView = 'repo-editor';
-      store.state.editMode = true;
-
-      store.dispatch('toggleEditMode')
-        .then(Vue.nextTick)
-        .then(() => {
-          expect(store.state.currentBlobView).toBe('repo-preview');
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('opens discard popup if there are changed files', (done) => {
-      store.state.editMode = true;
-      store.state.openFiles.push(file('discardChanges'));
-      store.state.openFiles[0].changed = true;
-
-      store.dispatch('toggleEditMode')
-        .then(() => {
-          expect(store.state.discardPopupOpen).toBeTruthy();
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('can force closed if there are changed files', (done) => {
-      store.state.editMode = true;
-
-      store.state.openFiles.push(file('forceClose'));
-      store.state.openFiles[0].changed = true;
-
-      store.dispatch('toggleEditMode', true)
-        .then(() => {
-          expect(store.state.discardPopupOpen).toBeFalsy();
-          expect(store.state.editMode).toBeFalsy();
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('discards file changes', (done) => {
-      const f = file('discard');
-      store.state.editMode = true;
-      store.state.openFiles.push(f);
-      f.changed = true;
-
-      store.dispatch('toggleEditMode', true)
-        .then(Vue.nextTick)
-        .then(() => {
-          expect(f.changed).toBeFalsy();
-
-          done();
-        }).catch(done.fail);
-    });
-  });
-
-  describe('toggleBlobView', () => {
-    it('sets edit mode view if in edit mode', (done) => {
-      store.dispatch('toggleBlobView')
-        .then(() => {
-          expect(store.state.currentBlobView).toBe('repo-editor');
-
-          done();
-        })
-        .catch(done.fail);
-    });
-
-    it('sets preview mode view if not in edit mode', (done) => {
-      store.state.editMode = false;
-
-      store.dispatch('toggleBlobView')
-      .then(() => {
-        expect(store.state.currentBlobView).toBe('repo-preview');
-
-        done();
-      })
-      .catch(done.fail);
-    });
-  });
-
-  describe('checkCommitStatus', () => {
-    beforeEach(() => {
-      store.state.currentProjectId = 'abcproject';
-      store.state.currentBranchId = 'master';
-      store.state.projects.abcproject = {
-        branches: {
-          master: {
-            workingReference: '1',
-          },
-        },
-      };
-    });
-
-    it('calls service', (done) => {
-      spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-        data: {
-          commit: { id: '123' },
-        },
-      }));
-
-      store.dispatch('checkCommitStatus')
-        .then(() => {
-          expect(service.getBranchData).toHaveBeenCalledWith('abcproject', 'master');
-
-          done();
-        })
-        .catch(done.fail);
-    });
-
-    it('returns true if current ref does not equal returned ID', (done) => {
-      spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-        data: {
-          commit: { id: '123' },
-        },
-      }));
-
-      store.dispatch('checkCommitStatus')
-        .then((val) => {
-          expect(val).toBeTruthy();
-
-          done();
-        })
-        .catch(done.fail);
-    });
-
-    it('returns false if current ref equals returned ID', (done) => {
-      spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-        data: {
-          commit: { id: '1' },
-        },
-      }));
-
-      store.dispatch('checkCommitStatus')
-        .then((val) => {
-          expect(val).toBeFalsy();
-
-          done();
-        })
-        .catch(done.fail);
-    });
-  });
-
-  describe('commitChanges', () => {
-    let payload;
-
-    beforeEach(() => {
-      spyOn(window, 'scrollTo');
-
-      document.body.innerHTML += '<div class="flash-container"></div>';
-
-      store.state.currentProjectId = 'abcproject';
-      store.state.currentBranchId = 'master';
-      store.state.projects.abcproject = {
-        web_url: 'webUrl',
-        branches: {
-          master: {
-            workingReference: '1',
-          },
-        },
-      };
-
-      payload = {
-        branch: 'master',
-      };
-    });
-
-    afterEach(() => {
-      document.querySelector('.flash-container').remove();
-    });
-
-    describe('success', () => {
-      beforeEach(() => {
-        spyOn(service, 'commit').and.returnValue(Promise.resolve({
-          data: {
-            id: '123456',
-            short_id: '123',
-            message: 'test message',
-            committed_date: 'date',
-            stats: {
-              additions: '1',
-              deletions: '2',
-            },
-          },
-        }));
-      });
-
-      it('calls service', (done) => {
-        store.dispatch('commitChanges', { payload, newMr: false })
-          .then(() => {
-            expect(service.commit).toHaveBeenCalledWith('abcproject', payload);
-
-            done();
-          }).catch(done.fail);
-      });
-
-      it('shows flash notice', (done) => {
-        store.dispatch('commitChanges', { payload, newMr: false })
-          .then(() => {
-            const alert = document.querySelector('.flash-container');
-
-            expect(alert.querySelector('.flash-notice')).not.toBeNull();
-            expect(alert.textContent.trim()).toBe(
-              'Your changes have been committed. Commit 123 with 1 additions, 2 deletions.',
-            );
-
-            done();
-          }).catch(done.fail);
-      });
-
-      it('adds commit data to changed files', (done) => {
-        const changedFile = file('changed');
-        const f = file('newfile');
-        changedFile.changed = true;
-
-        store.state.openFiles.push(changedFile, f);
-
-        store.dispatch('commitChanges', { payload, newMr: false })
-          .then(() => {
-            expect(changedFile.lastCommit.message).toBe('test message');
-            expect(f.lastCommit.message).not.toBe('test message');
-
-            done();
-          }).catch(done.fail);
-      });
-
-      it('scrolls to top of page', (done) => {
-        store.dispatch('commitChanges', { payload, newMr: false })
-          .then(() => {
-            expect(window.scrollTo).toHaveBeenCalledWith(0, 0);
-
-            done();
-          }).catch(done.fail);
-      });
-
-      it('redirects to new merge request page', (done) => {
-        spyOn(urlUtils, 'visitUrl');
-
-        store.dispatch('commitChanges', { payload, newMr: true })
-          .then(() => {
-            expect(urlUtils.visitUrl).toHaveBeenCalledWith('webUrl/merge_requests/new?merge_request%5Bsource_branch%5D=master');
-
-            done();
-          }).catch(done.fail);
-      });
-    });
-
-    describe('failed', () => {
-      beforeEach(() => {
-        spyOn(service, 'commit').and.returnValue(Promise.resolve({
-          data: {
-            message: 'failed message',
-          },
-        }));
-      });
-
-      it('shows failed message', (done) => {
-        store.dispatch('commitChanges', { payload, newMr: false })
-          .then(() => {
-            const alert = document.querySelector('.flash-container');
-
-            expect(alert.textContent.trim()).toBe(
-              'failed message',
-            );
-
-            done();
-          }).catch(done.fail);
-      });
-    });
-  });
-
-  describe('createTempEntry', () => {
-    beforeEach(() => {
-      store.state.trees['abcproject/mybranch'] = {
-        tree: [],
-      };
-      store.state.projects.abcproject = {
-        web_url: '',
-      };
-    });
-
-    it('creates a temp tree', (done) => {
-      const projectTree = store.state.trees['abcproject/mybranch'];
-
-      store.dispatch('createTempEntry', {
-        projectId: 'abcproject',
-        branchId: 'mybranch',
-        parent: projectTree,
-        name: 'test',
-        type: 'tree',
-      })
-      .then(() => {
-        const baseTree = projectTree.tree;
-        expect(baseTree.length).toBe(1);
-        expect(baseTree[0].tempFile).toBeTruthy();
-        expect(baseTree[0].type).toBe('tree');
-
-        done();
-      })
-      .catch(done.fail);
-    });
-
-    it('creates temp file', (done) => {
-      const projectTree = store.state.trees['abcproject/mybranch'];
-
-      store.dispatch('createTempEntry', {
-        projectId: 'abcproject',
-        branchId: 'mybranch',
-        parent: projectTree,
-        name: 'test',
-        type: 'blob',
-      })
-      .then(() => {
-        const baseTree = projectTree.tree;
-        expect(baseTree.length).toBe(1);
-        expect(baseTree[0].tempFile).toBeTruthy();
-        expect(baseTree[0].type).toBe('blob');
-
-        done();
-      })
-      .catch(done.fail);
-    });
-  });
-
-  describe('popHistoryState', () => {
-
-  });
-
-  describe('scrollToTab', () => {
-    it('focuses the current active element', (done) => {
-      document.body.innerHTML += '<div id="tabs"><div class="active"><div class="repo-tab"></div></div></div>';
-      const el = document.querySelector('.repo-tab');
-      spyOn(el, 'focus');
-
-      store.dispatch('scrollToTab')
-        .then(() => {
-          setTimeout(() => {
-            expect(el.focus).toHaveBeenCalled();
-
-            document.getElementById('tabs').remove();
-
-            done();
-          });
-        })
-        .catch(done.fail);
-    });
-  });
-});
diff --git a/spec/javascripts/repo/stores/getters_spec.js b/spec/javascripts/repo/stores/getters_spec.js
deleted file mode 100644
index d0d5934f29a..00000000000
--- a/spec/javascripts/repo/stores/getters_spec.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import * as getters from '~/ide/stores/getters';
-import state from '~/ide/stores/state';
-import { file } from '../helpers';
-
-describe('Multi-file store getters', () => {
-  let localState;
-
-  beforeEach(() => {
-    localState = state();
-  });
-
-  describe('changedFiles', () => {
-    it('returns a list of changed opened files', () => {
-      localState.openFiles.push(file());
-      localState.openFiles.push(file('changed'));
-      localState.openFiles[1].changed = true;
-
-      const changedFiles = getters.changedFiles(localState);
-
-      expect(changedFiles.length).toBe(1);
-      expect(changedFiles[0].name).toBe('changed');
-    });
-  });
-
-  describe('activeFile', () => {
-    it('returns the current active file', () => {
-      localState.openFiles.push(file());
-      localState.openFiles.push(file('active'));
-      localState.openFiles[1].active = true;
-
-      expect(getters.activeFile(localState).name).toBe('active');
-    });
-
-    it('returns undefined if no active files are found', () => {
-      localState.openFiles.push(file());
-      localState.openFiles.push(file('active'));
-
-      expect(getters.activeFile(localState)).toBeNull();
-    });
-  });
-
-  describe('activeFileExtension', () => {
-    it('returns the file extension for the current active file', () => {
-      localState.openFiles.push(file('active'));
-      localState.openFiles[0].active = true;
-      localState.openFiles[0].path = 'test.js';
-
-      expect(getters.activeFileExtension(localState)).toBe('.js');
-
-      localState.openFiles[0].path = 'test.es6.js';
-
-      expect(getters.activeFileExtension(localState)).toBe('.js');
-    });
-  });
-
-  describe('canEditFile', () => {
-    beforeEach(() => {
-      localState.onTopOfBranch = true;
-      localState.canCommit = true;
-
-      localState.openFiles.push(file());
-      localState.openFiles[0].active = true;
-    });
-
-    it('returns true if user can commit and has open files', () => {
-      expect(getters.canEditFile(localState)).toBeTruthy();
-    });
-
-    it('returns false if user can commit and has no open files', () => {
-      localState.openFiles = [];
-
-      expect(getters.canEditFile(localState)).toBeFalsy();
-    });
-
-    it('returns false if user can commit and active file is binary', () => {
-      localState.openFiles[0].binary = true;
-
-      expect(getters.canEditFile(localState)).toBeFalsy();
-    });
-
-    it('returns false if user cant commit', () => {
-      localState.canCommit = false;
-
-      expect(getters.canEditFile(localState)).toBeFalsy();
-    });
-  });
-
-  describe('modifiedFiles', () => {
-    it('returns a list of modified files', () => {
-      localState.openFiles.push(file());
-      localState.openFiles.push(file('changed'));
-      localState.openFiles[1].changed = true;
-
-      const modifiedFiles = getters.modifiedFiles(localState);
-
-      expect(modifiedFiles.length).toBe(1);
-      expect(modifiedFiles[0].name).toBe('changed');
-    });
-  });
-
-  describe('addedFiles', () => {
-    it('returns a list of added files', () => {
-      localState.openFiles.push(file());
-      localState.openFiles.push(file('added'));
-      localState.openFiles[1].changed = true;
-      localState.openFiles[1].tempFile = true;
-
-      const modifiedFiles = getters.addedFiles(localState);
-
-      expect(modifiedFiles.length).toBe(1);
-      expect(modifiedFiles[0].name).toBe('added');
-    });
-  });
-});
diff --git a/spec/javascripts/repo/stores/mutations/branch_spec.js b/spec/javascripts/repo/stores/mutations/branch_spec.js
deleted file mode 100644
index a7167537ef2..00000000000
--- a/spec/javascripts/repo/stores/mutations/branch_spec.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import mutations from '~/ide/stores/mutations/branch';
-import state from '~/ide/stores/state';
-
-describe('Multi-file store branch mutations', () => {
-  let localState;
-
-  beforeEach(() => {
-    localState = state();
-  });
-
-  describe('SET_CURRENT_BRANCH', () => {
-    it('sets currentBranch', () => {
-      mutations.SET_CURRENT_BRANCH(localState, 'master');
-
-      expect(localState.currentBranchId).toBe('master');
-    });
-  });
-});
diff --git a/spec/javascripts/repo/stores/mutations/file_spec.js b/spec/javascripts/repo/stores/mutations/file_spec.js
deleted file mode 100644
index 6e204ef0404..00000000000
--- a/spec/javascripts/repo/stores/mutations/file_spec.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import mutations from '~/ide/stores/mutations/file';
-import state from '~/ide/stores/state';
-import { file } from '../../helpers';
-
-describe('Multi-file store file mutations', () => {
-  let localState;
-  let localFile;
-
-  beforeEach(() => {
-    localState = state();
-    localFile = file();
-  });
-
-  describe('SET_FILE_ACTIVE', () => {
-    it('sets the file active', () => {
-      mutations.SET_FILE_ACTIVE(localState, {
-        file: localFile,
-        active: true,
-      });
-
-      expect(localFile.active).toBeTruthy();
-    });
-  });
-
-  describe('TOGGLE_FILE_OPEN', () => {
-    beforeEach(() => {
-      mutations.TOGGLE_FILE_OPEN(localState, localFile);
-    });
-
-    it('adds into opened files', () => {
-      expect(localFile.opened).toBeTruthy();
-      expect(localState.openFiles.length).toBe(1);
-    });
-
-    it('removes from opened files', () => {
-      mutations.TOGGLE_FILE_OPEN(localState, localFile);
-
-      expect(localFile.opened).toBeFalsy();
-      expect(localState.openFiles.length).toBe(0);
-    });
-  });
-
-  describe('SET_FILE_DATA', () => {
-    it('sets extra file data', () => {
-      mutations.SET_FILE_DATA(localState, {
-        data: {
-          blame_path: 'blame',
-          commits_path: 'commits',
-          permalink: 'permalink',
-          raw_path: 'raw',
-          binary: true,
-          html: 'html',
-          render_error: 'render_error',
-        },
-        file: localFile,
-      });
-
-      expect(localFile.blamePath).toBe('blame');
-      expect(localFile.commitsPath).toBe('commits');
-      expect(localFile.permalink).toBe('permalink');
-      expect(localFile.rawPath).toBe('raw');
-      expect(localFile.binary).toBeTruthy();
-      expect(localFile.html).toBe('html');
-      expect(localFile.renderError).toBe('render_error');
-    });
-  });
-
-  describe('SET_FILE_RAW_DATA', () => {
-    it('sets raw data', () => {
-      mutations.SET_FILE_RAW_DATA(localState, {
-        file: localFile,
-        raw: 'testing',
-      });
-
-      expect(localFile.raw).toBe('testing');
-    });
-  });
-
-  describe('UPDATE_FILE_CONTENT', () => {
-    beforeEach(() => {
-      localFile.raw = 'test';
-    });
-
-    it('sets content', () => {
-      mutations.UPDATE_FILE_CONTENT(localState, {
-        file: localFile,
-        content: 'test',
-      });
-
-      expect(localFile.content).toBe('test');
-    });
-
-    it('sets changed if content does not match raw', () => {
-      mutations.UPDATE_FILE_CONTENT(localState, {
-        file: localFile,
-        content: 'testing',
-      });
-
-      expect(localFile.content).toBe('testing');
-      expect(localFile.changed).toBeTruthy();
-    });
-  });
-
-  describe('DISCARD_FILE_CHANGES', () => {
-    beforeEach(() => {
-      localFile.content = 'test';
-      localFile.changed = true;
-    });
-
-    it('resets content and changed', () => {
-      mutations.DISCARD_FILE_CHANGES(localState, localFile);
-
-      expect(localFile.content).toBe('');
-      expect(localFile.changed).toBeFalsy();
-    });
-  });
-
-  describe('CREATE_TMP_FILE', () => {
-    it('adds file into parent tree', () => {
-      const f = file('tmpFile');
-
-      mutations.CREATE_TMP_FILE(localState, {
-        file: f,
-        parent: localFile,
-      });
-
-      expect(localFile.tree.length).toBe(1);
-      expect(localFile.tree[0].name).toBe(f.name);
-    });
-  });
-});
diff --git a/spec/javascripts/repo/stores/mutations/tree_spec.js b/spec/javascripts/repo/stores/mutations/tree_spec.js
deleted file mode 100644
index e6ca8ea139e..00000000000
--- a/spec/javascripts/repo/stores/mutations/tree_spec.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import mutations from '~/ide/stores/mutations/tree';
-import state from '~/ide/stores/state';
-import { file } from '../../helpers';
-
-describe('Multi-file store tree mutations', () => {
-  let localState;
-  let localTree;
-
-  beforeEach(() => {
-    localState = state();
-    localTree = file();
-  });
-
-  describe('TOGGLE_TREE_OPEN', () => {
-    it('toggles tree open', () => {
-      mutations.TOGGLE_TREE_OPEN(localState, localTree);
-
-      expect(localTree.opened).toBeTruthy();
-
-      mutations.TOGGLE_TREE_OPEN(localState, localTree);
-
-      expect(localTree.opened).toBeFalsy();
-    });
-  });
-
-  describe('SET_DIRECTORY_DATA', () => {
-    const data = [{
-      name: 'tree',
-    },
-    {
-      name: 'submodule',
-    },
-    {
-      name: 'blob',
-    }];
-
-    it('adds directory data', () => {
-      mutations.SET_DIRECTORY_DATA(localState, {
-        data,
-        tree: localState,
-      });
-
-      expect(localState.tree.length).toBe(3);
-      expect(localState.tree[0].name).toBe('tree');
-      expect(localState.tree[1].name).toBe('submodule');
-      expect(localState.tree[2].name).toBe('blob');
-    });
-  });
-
-  describe('SET_PARENT_TREE_URL', () => {
-    it('sets the parent tree url', () => {
-      mutations.SET_PARENT_TREE_URL(localState, 'test');
-
-      expect(localState.parentTreeUrl).toBe('test');
-    });
-  });
-
-  describe('CREATE_TMP_TREE', () => {
-    it('adds tree into parent tree', () => {
-      const tmpEntry = file('tmpTree');
-
-      mutations.CREATE_TMP_TREE(localState, {
-        tmpEntry,
-        parent: localTree,
-      });
-
-      expect(localTree.tree.length).toBe(1);
-      expect(localTree.tree[0].name).toBe(tmpEntry.name);
-    });
-  });
-});
diff --git a/spec/javascripts/repo/stores/mutations_spec.js b/spec/javascripts/repo/stores/mutations_spec.js
deleted file mode 100644
index 5fd8ad94972..00000000000
--- a/spec/javascripts/repo/stores/mutations_spec.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import mutations from '~/ide/stores/mutations';
-import state from '~/ide/stores/state';
-import { file } from '../helpers';
-
-describe('Multi-file store mutations', () => {
-  let localState;
-  let entry;
-
-  beforeEach(() => {
-    localState = state();
-    entry = file();
-  });
-
-  describe('SET_INITIAL_DATA', () => {
-    it('sets all initial data', () => {
-      mutations.SET_INITIAL_DATA(localState, {
-        test: 'test',
-      });
-
-      expect(localState.test).toBe('test');
-    });
-  });
-
-  describe('SET_PREVIEW_MODE', () => {
-    it('sets currentBlobView to repo-preview', () => {
-      mutations.SET_PREVIEW_MODE(localState);
-
-      expect(localState.currentBlobView).toBe('repo-preview');
-
-      localState.currentBlobView = 'testing';
-
-      mutations.SET_PREVIEW_MODE(localState);
-
-      expect(localState.currentBlobView).toBe('repo-preview');
-    });
-  });
-
-  describe('SET_EDIT_MODE', () => {
-    it('sets currentBlobView to repo-editor', () => {
-      mutations.SET_EDIT_MODE(localState);
-
-      expect(localState.currentBlobView).toBe('repo-editor');
-
-      localState.currentBlobView = 'testing';
-
-      mutations.SET_EDIT_MODE(localState);
-
-      expect(localState.currentBlobView).toBe('repo-editor');
-    });
-  });
-
-  describe('TOGGLE_LOADING', () => {
-    it('toggles loading of entry', () => {
-      mutations.TOGGLE_LOADING(localState, entry);
-
-      expect(entry.loading).toBeTruthy();
-
-      mutations.TOGGLE_LOADING(localState, entry);
-
-      expect(entry.loading).toBeFalsy();
-    });
-  });
-
-  describe('TOGGLE_EDIT_MODE', () => {
-    it('toggles editMode', () => {
-      mutations.TOGGLE_EDIT_MODE(localState);
-
-      expect(localState.editMode).toBeFalsy();
-
-      mutations.TOGGLE_EDIT_MODE(localState);
-
-      expect(localState.editMode).toBeTruthy();
-    });
-  });
-
-  describe('TOGGLE_DISCARD_POPUP', () => {
-    it('sets discardPopupOpen', () => {
-      mutations.TOGGLE_DISCARD_POPUP(localState, true);
-
-      expect(localState.discardPopupOpen).toBeTruthy();
-
-      mutations.TOGGLE_DISCARD_POPUP(localState, false);
-
-      expect(localState.discardPopupOpen).toBeFalsy();
-    });
-  });
-
-  describe('SET_ROOT', () => {
-    it('sets isRoot & initialRoot', () => {
-      mutations.SET_ROOT(localState, true);
-
-      expect(localState.isRoot).toBeTruthy();
-      expect(localState.isInitialRoot).toBeTruthy();
-
-      mutations.SET_ROOT(localState, false);
-
-      expect(localState.isRoot).toBeFalsy();
-      expect(localState.isInitialRoot).toBeFalsy();
-    });
-  });
-
-  describe('SET_LEFT_PANEL_COLLAPSED', () => {
-    it('sets left panel collapsed', () => {
-      mutations.SET_LEFT_PANEL_COLLAPSED(localState, true);
-
-      expect(localState.leftPanelCollapsed).toBeTruthy();
-
-      mutations.SET_LEFT_PANEL_COLLAPSED(localState, false);
-
-      expect(localState.leftPanelCollapsed).toBeFalsy();
-    });
-  });
-
-  describe('SET_RIGHT_PANEL_COLLAPSED', () => {
-    it('sets right panel collapsed', () => {
-      mutations.SET_RIGHT_PANEL_COLLAPSED(localState, true);
-
-      expect(localState.rightPanelCollapsed).toBeTruthy();
-
-      mutations.SET_RIGHT_PANEL_COLLAPSED(localState, false);
-
-      expect(localState.rightPanelCollapsed).toBeFalsy();
-    });
-  });
-});
diff --git a/spec/javascripts/repo/stores/utils_spec.js b/spec/javascripts/repo/stores/utils_spec.js
deleted file mode 100644
index 89745a2029e..00000000000
--- a/spec/javascripts/repo/stores/utils_spec.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import * as utils from '~/ide/stores/utils';
-import state from '~/ide/stores/state';
-import { file } from '../helpers';
-
-describe('Multi-file store utils', () => {
-  describe('setPageTitle', () => {
-    it('sets the document page title', () => {
-      utils.setPageTitle('test');
-
-      expect(document.title).toBe('test');
-    });
-  });
-
-  describe('treeList', () => {
-    let localState;
-
-    beforeEach(() => {
-      localState = state();
-    });
-
-    it('returns flat tree list', () => {
-      localState.trees = [];
-      localState.trees['abcproject/mybranch'] = {
-        tree: [],
-      };
-      const baseTree = localState.trees['abcproject/mybranch'].tree;
-      baseTree.push(file('1'));
-      baseTree[0].tree.push(file('2'));
-      baseTree[0].tree[0].tree.push(file('3'));
-
-      const treeList = utils.treeList(localState, 'abcproject/mybranch');
-
-      expect(treeList.length).toBe(3);
-      expect(treeList[1].name).toBe(baseTree[0].tree[0].name);
-      expect(treeList[2].name).toBe(baseTree[0].tree[0].tree[0].name);
-    });
-  });
-
-  describe('createTemp', () => {
-    it('creates temp tree', () => {
-      const tmp = utils.createTemp({
-        name: 'test',
-        path: 'test',
-        type: 'tree',
-        level: 0,
-        changed: false,
-        content: '',
-        base64: '',
-      });
-
-      expect(tmp.tempFile).toBeTruthy();
-      expect(tmp.icon).toBe('fa-folder');
-    });
-
-    it('creates temp file', () => {
-      const tmp = utils.createTemp({
-        name: 'test',
-        path: 'test',
-        type: 'blob',
-        level: 0,
-        changed: false,
-        content: '',
-        base64: '',
-      });
-
-      expect(tmp.tempFile).toBeTruthy();
-      expect(tmp.icon).toBe('fa-file-text-o');
-    });
-  });
-
-  describe('findIndexOfFile', () => {
-    let localState;
-
-    beforeEach(() => {
-      localState = [{
-        path: '1',
-      }, {
-        path: '2',
-      }];
-    });
-
-    it('finds in the index of an entry by path', () => {
-      const index = utils.findIndexOfFile(localState, {
-        path: '2',
-      });
-
-      expect(index).toBe(1);
-    });
-  });
-
-  describe('findEntry', () => {
-    let localState;
-
-    beforeEach(() => {
-      localState = {
-        tree: [{
-          type: 'tree',
-          name: 'test',
-        }, {
-          type: 'blob',
-          name: 'file',
-        }],
-      };
-    });
-
-    it('returns an entry found by name', () => {
-      const foundEntry = utils.findEntry(localState.tree, 'tree', 'test');
-
-      expect(foundEntry.type).toBe('tree');
-      expect(foundEntry.name).toBe('test');
-    });
-
-    it('returns undefined when no entry found', () => {
-      const foundEntry = utils.findEntry(localState.tree, 'blob', 'test');
-
-      expect(foundEntry).toBeUndefined();
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js
new file mode 100644
index 00000000000..67056793a20
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js
@@ -0,0 +1,81 @@
+import Vue from 'vue';
+
+import LabelsSelect from '~/labels_select';
+import baseComponent from '~/vue_shared/components/sidebar/labels_select/base.vue';
+
+import { mockConfig, mockLabels } from './mock_data';
+
+import mountComponent from '../../../../helpers/vue_mount_component_helper';
+
+const createComponent = (config = mockConfig) => {
+  const Component = Vue.extend(baseComponent);
+
+  return mountComponent(Component, config);
+};
+
+describe('BaseComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('hiddenInputName', () => {
+      it('returns correct string when showCreate prop is `true`', () => {
+        expect(vm.hiddenInputName).toBe('issue[label_names][]');
+      });
+
+      it('returns correct string when showCreate prop is `false`', () => {
+        const mockConfigNonEditable = Object.assign({}, mockConfig, { showCreate: false });
+        const vmNonEditable = createComponent(mockConfigNonEditable);
+        expect(vmNonEditable.hiddenInputName).toBe('label_id[]');
+        vmNonEditable.$destroy();
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('handleClick', () => {
+      it('emits onLabelClick event with label and list of labels as params', () => {
+        spyOn(vm, '$emit');
+        vm.handleClick(mockLabels[0]);
+        expect(vm.$emit).toHaveBeenCalledWith('onLabelClick', mockLabels[0]);
+      });
+    });
+  });
+
+  describe('mounted', () => {
+    it('creates LabelsSelect object and assigns it to `labelsDropdon` as prop', () => {
+      expect(vm.labelsDropdown instanceof LabelsSelect).toBe(true);
+    });
+  });
+
+  describe('template', () => {
+    it('renders component container element with classes `block labels`', () => {
+      expect(vm.$el.classList.contains('block')).toBe(true);
+      expect(vm.$el.classList.contains('labels')).toBe(true);
+    });
+
+    it('renders `.selectbox` element', () => {
+      expect(vm.$el.querySelector('.selectbox')).not.toBeNull();
+      expect(vm.$el.querySelector('.selectbox').getAttribute('style')).toBe('display: none;');
+    });
+
+    it('renders `.dropdown` element', () => {
+      expect(vm.$el.querySelector('.dropdown')).not.toBeNull();
+    });
+
+    it('renders `.dropdown-menu` element', () => {
+      const dropdownMenuEl = vm.$el.querySelector('.dropdown-menu');
+      expect(dropdownMenuEl).not.toBeNull();
+      expect(dropdownMenuEl.querySelector('.dropdown-page-one')).not.toBeNull();
+      expect(dropdownMenuEl.querySelector('.dropdown-content')).not.toBeNull();
+      expect(dropdownMenuEl.querySelector('.dropdown-loading')).not.toBeNull();
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js
new file mode 100644
index 00000000000..ec63ac306d0
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js
@@ -0,0 +1,82 @@
+import Vue from 'vue';
+
+import dropdownButtonComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_button.vue';
+
+import { mockConfig, mockLabels } from './mock_data';
+
+import mountComponent from '../../../../helpers/vue_mount_component_helper';
+
+const componentConfig = Object.assign({}, mockConfig, {
+  fieldName: 'label_id[]',
+  labels: mockLabels,
+  showExtraOptions: false,
+});
+
+const createComponent = (config = componentConfig) => {
+  const Component = Vue.extend(dropdownButtonComponent);
+
+  return mountComponent(Component, config);
+};
+
+describe('DropdownButtonComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('dropdownToggleText', () => {
+      it('returns text as `Label` when `labels` prop is empty array', () => {
+        const mockEmptyLabels = Object.assign({}, componentConfig, { labels: [] });
+        const vmEmptyLabels = createComponent(mockEmptyLabels);
+        expect(vmEmptyLabels.dropdownToggleText).toBe('Label');
+        vmEmptyLabels.$destroy();
+      });
+
+      it('returns first label name with remaining label count when `labels` prop has more than one item', () => {
+        const mockMoreLabels = Object.assign({}, componentConfig, {
+          labels: mockLabels.concat(mockLabels),
+        });
+        const vmMoreLabels = createComponent(mockMoreLabels);
+        expect(vmMoreLabels.dropdownToggleText).toBe('Foo Label +1 more');
+        vmMoreLabels.$destroy();
+      });
+
+      it('returns first label name when `labels` prop has only one item present', () => {
+        expect(vm.dropdownToggleText).toBe('Foo Label');
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders component container element of type `button`', () => {
+      expect(vm.$el.nodeName).toBe('BUTTON');
+    });
+
+    it('renders component container element with required data attributes', () => {
+      expect(vm.$el.dataset.abilityName).toBe(vm.abilityName);
+      expect(vm.$el.dataset.fieldName).toBe(vm.fieldName);
+      expect(vm.$el.dataset.issueUpdate).toBe(vm.updatePath);
+      expect(vm.$el.dataset.labels).toBe(vm.labelsPath);
+      expect(vm.$el.dataset.namespacePath).toBe(vm.namespace);
+      expect(vm.$el.dataset.showAny).not.toBeDefined();
+    });
+
+    it('renders dropdown toggle text element', () => {
+      const dropdownToggleTextEl = vm.$el.querySelector('.dropdown-toggle-text');
+      expect(dropdownToggleTextEl).not.toBeNull();
+      expect(dropdownToggleTextEl.innerText.trim()).toBe('Foo Label');
+    });
+
+    it('renders dropdown button icon', () => {
+      const dropdownIconEl = vm.$el.querySelector('i.fa');
+      expect(dropdownIconEl).not.toBeNull();
+      expect(dropdownIconEl.classList.contains('fa-chevron-down')).toBe(true);
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js
new file mode 100644
index 00000000000..f07aefb2f87
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js
@@ -0,0 +1,84 @@
+import Vue from 'vue';
+
+import dropdownCreateLabelComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue';
+
+import { mockSuggestedColors } from './mock_data';
+
+import mountComponent from '../../../../helpers/vue_mount_component_helper';
+
+const createComponent = () => {
+  const Component = Vue.extend(dropdownCreateLabelComponent);
+
+  return mountComponent(Component);
+};
+
+describe('DropdownCreateLabelComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    gon.suggested_label_colors = mockSuggestedColors;
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('created', () => {
+    it('initializes `suggestedColors` prop on component from `gon.suggested_color_labels` object', () => {
+      expect(vm.suggestedColors.length).toBe(mockSuggestedColors.length);
+    });
+  });
+
+  describe('template', () => {
+    it('renders component container element with classes `dropdown-page-two dropdown-new-label`', () => {
+      expect(vm.$el.classList.contains('dropdown-page-two', 'dropdown-new-label')).toBe(true);
+    });
+
+    it('renders `Go back` button on component header', () => {
+      const backButtonEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-back');
+      expect(backButtonEl).not.toBe(null);
+      expect(backButtonEl.querySelector('.fa-arrow-left')).not.toBe(null);
+    });
+
+    it('renders component header element', () => {
+      const headerEl = vm.$el.querySelector('.dropdown-title');
+      expect(headerEl.innerText.trim()).toContain('Create new label');
+    });
+
+    it('renders `Close` button on component header', () => {
+      const closeButtonEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close');
+      expect(closeButtonEl).not.toBe(null);
+      expect(closeButtonEl.querySelector('.fa-times.dropdown-menu-close-icon')).not.toBe(null);
+    });
+
+    it('renders `Name new label` input element', () => {
+      expect(vm.$el.querySelector('.dropdown-labels-error.js-label-error')).not.toBe(null);
+      expect(vm.$el.querySelector('input#new_label_name.default-dropdown-input')).not.toBe(null);
+    });
+
+    it('renders suggested colors list elements', () => {
+      const colorsListContainerEl = vm.$el.querySelector('.suggest-colors.suggest-colors-dropdown');
+      expect(colorsListContainerEl).not.toBe(null);
+      expect(colorsListContainerEl.querySelectorAll('a').length).toBe(mockSuggestedColors.length);
+
+      const colorItemEl = colorsListContainerEl.querySelectorAll('a')[0];
+      expect(colorItemEl.dataset.color).toBe(vm.suggestedColors[0]);
+      expect(colorItemEl.getAttribute('style')).toBe('background-color: rgb(0, 51, 204);');
+    });
+
+    it('renders color input element', () => {
+      expect(vm.$el.querySelector('.dropdown-label-color-input')).not.toBe(null);
+      expect(vm.$el.querySelector('.dropdown-label-color-preview.js-dropdown-label-color-preview')).not.toBe(null);
+      expect(vm.$el.querySelector('input#new_label_color.default-dropdown-input')).not.toBe(null);
+    });
+
+    it('renders component action buttons', () => {
+      const createBtnEl = vm.$el.querySelector('button.js-new-label-btn');
+      const cancelBtnEl = vm.$el.querySelector('button.js-cancel-label-btn');
+      expect(createBtnEl).not.toBe(null);
+      expect(createBtnEl.innerText.trim()).toBe('Create');
+      expect(cancelBtnEl.innerText.trim()).toBe('Cancel');
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js
new file mode 100644
index 00000000000..809e0327b1c
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js
@@ -0,0 +1,42 @@
+import Vue from 'vue';
+
+import dropdownFooterComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_footer.vue';
+
+import { mockConfig } from './mock_data';
+
+import mountComponent from '../../../../helpers/vue_mount_component_helper';
+
+const createComponent = (labelsWebUrl = mockConfig.labelsWebUrl) => {
+  const Component = Vue.extend(dropdownFooterComponent);
+
+  return mountComponent(Component, {
+    labelsWebUrl,
+  });
+};
+
+describe('DropdownFooterComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('template', () => {
+    it('renders `Create new label` link element', () => {
+      const createLabelEl = vm.$el.querySelector('.dropdown-footer-list .dropdown-toggle-page');
+      expect(createLabelEl).not.toBeNull();
+      expect(createLabelEl.innerText.trim()).toBe('Create new label');
+    });
+
+    it('renders `Manage labels` link element', () => {
+      const manageLabelsEl = vm.$el.querySelector('.dropdown-footer-list .dropdown-external-link');
+      expect(manageLabelsEl).not.toBeNull();
+      expect(manageLabelsEl.getAttribute('href')).toBe(vm.labelsWebUrl);
+      expect(manageLabelsEl.innerText.trim()).toBe('Manage labels');
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js
new file mode 100644
index 00000000000..325fa47c957
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js
@@ -0,0 +1,36 @@
+import Vue from 'vue';
+
+import dropdownHeaderComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_header.vue';
+
+import mountComponent from '../../../../helpers/vue_mount_component_helper';
+
+const createComponent = () => {
+  const Component = Vue.extend(dropdownHeaderComponent);
+
+  return mountComponent(Component);
+};
+
+describe('DropdownHeaderComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('template', () => {
+    it('renders header text element', () => {
+      const headerEl = vm.$el.querySelector('.dropdown-title span');
+      expect(headerEl.innerText.trim()).toBe('Assign labels');
+    });
+
+    it('renders `Close` button element', () => {
+      const closeBtnEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close');
+      expect(closeBtnEl).not.toBeNull();
+      expect(closeBtnEl.querySelector('.fa-times.dropdown-menu-close-icon')).not.toBeNull();
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input_spec.js
new file mode 100644
index 00000000000..703b87498c7
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input_spec.js
@@ -0,0 +1,37 @@
+import Vue from 'vue';
+
+import dropdownHiddenInputComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue';
+
+import { mockLabels } from './mock_data';
+
+import mountComponent from '../../../../helpers/vue_mount_component_helper';
+
+const createComponent = (name = 'label_id[]', label = mockLabels[0]) => {
+  const Component = Vue.extend(dropdownHiddenInputComponent);
+
+  return mountComponent(Component, {
+    name,
+    label,
+  });
+};
+
+describe('DropdownHiddenInputComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('template', () => {
+    it('renders input element of type `hidden`', () => {
+      expect(vm.$el.nodeName).toBe('INPUT');
+      expect(vm.$el.getAttribute('type')).toBe('hidden');
+      expect(vm.$el.getAttribute('name')).toBe(vm.name);
+      expect(vm.$el.getAttribute('value')).toBe(`${vm.label.id}`);
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js
new file mode 100644
index 00000000000..69e11d966c2
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js
@@ -0,0 +1,39 @@
+import Vue from 'vue';
+
+import dropdownSearchInputComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue';
+
+import mountComponent from '../../../../helpers/vue_mount_component_helper';
+
+const createComponent = () => {
+  const Component = Vue.extend(dropdownSearchInputComponent);
+
+  return mountComponent(Component);
+};
+
+describe('DropdownSearchInputComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('template', () => {
+    it('renders input element with type `search`', () => {
+      const inputEl = vm.$el.querySelector('input.dropdown-input-field');
+      expect(inputEl).not.toBeNull();
+      expect(inputEl.getAttribute('type')).toBe('search');
+    });
+
+    it('renders search icon element', () => {
+      expect(vm.$el.querySelector('.fa-search.dropdown-input-search')).not.toBeNull();
+    });
+
+    it('renders clear search icon element', () => {
+      expect(vm.$el.querySelector('.fa-times.dropdown-input-clear.js-dropdown-input-clear')).not.toBeNull();
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js
new file mode 100644
index 00000000000..c3580933072
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js
@@ -0,0 +1,42 @@
+import Vue from 'vue';
+
+import dropdownTitleComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_title.vue';
+
+import mountComponent from '../../../../helpers/vue_mount_component_helper';
+
+const createComponent = (canEdit = true) => {
+  const Component = Vue.extend(dropdownTitleComponent);
+
+  return mountComponent(Component, {
+    canEdit,
+  });
+};
+
+describe('DropdownTitleComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('template', () => {
+    it('renders title text', () => {
+      expect(vm.$el.classList.contains('title', 'hide-collapsed')).toBe(true);
+      expect(vm.$el.innerText.trim()).toContain('Labels');
+    });
+
+    it('renders spinner icon element', () => {
+      expect(vm.$el.querySelector('.fa-spinner.fa-spin.block-loading')).not.toBeNull();
+    });
+
+    it('renders `Edit` button element', () => {
+      const editBtnEl = vm.$el.querySelector('button.edit-link.js-sidebar-dropdown-toggle');
+      expect(editBtnEl).not.toBeNull();
+      expect(editBtnEl.innerText.trim()).toBe('Edit');
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js
new file mode 100644
index 00000000000..93b42795bea
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js
@@ -0,0 +1,74 @@
+import Vue from 'vue';
+
+import dropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue';
+
+import { mockLabels } from './mock_data';
+
+import mountComponent from '../../../../helpers/vue_mount_component_helper';
+
+const createComponent = (labels = mockLabels) => {
+  const Component = Vue.extend(dropdownValueCollapsedComponent);
+
+  return mountComponent(Component, {
+    labels,
+  });
+};
+
+describe('DropdownValueCollapsedComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('labelsList', () => {
+      it('returns empty text when `labels` prop is empty array', () => {
+        const vmEmptyLabels = createComponent([]);
+        expect(vmEmptyLabels.labelsList).toBe('');
+        vmEmptyLabels.$destroy();
+      });
+
+      it('returns labels names separated by coma when `labels` prop has more than one item', () => {
+        const vmMoreLabels = createComponent(mockLabels.concat(mockLabels));
+        expect(vmMoreLabels.labelsList).toBe('Foo Label, Foo Label');
+        vmMoreLabels.$destroy();
+      });
+
+      it('returns labels names separated by coma with remaining labels count and `and more` phrase when `labels` prop has more than five items', () => {
+        const mockMoreLabels = Object.assign([], mockLabels);
+        for (let i = 0; i < 6; i += 1) {
+          mockMoreLabels.unshift(mockLabels[0]);
+        }
+
+        const vmMoreLabels = createComponent(mockMoreLabels);
+        expect(vmMoreLabels.labelsList).toBe('Foo Label, Foo Label, Foo Label, Foo Label, Foo Label, and 2 more');
+        vmMoreLabels.$destroy();
+      });
+
+      it('returns first label name when `labels` prop has only one item present', () => {
+        expect(vm.labelsList).toBe('Foo Label');
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders component container element with tooltip`', () => {
+      expect(vm.$el.dataset.placement).toBe('left');
+      expect(vm.$el.dataset.container).toBe('body');
+      expect(vm.$el.dataset.originalTitle).toBe(vm.labelsList);
+    });
+
+    it('renders tags icon element', () => {
+      expect(vm.$el.querySelector('.fa-tags')).not.toBeNull();
+    });
+
+    it('renders labels count', () => {
+      expect(vm.$el.querySelector('span').innerText.trim()).toBe(`${vm.labels.length}`);
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
new file mode 100644
index 00000000000..66e0957b431
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
@@ -0,0 +1,94 @@
+import Vue from 'vue';
+
+import dropdownValueComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value.vue';
+
+import { mockConfig, mockLabels } from './mock_data';
+
+import mountComponent from '../../../../helpers/vue_mount_component_helper';
+
+const createComponent = (
+  labels = mockLabels,
+  labelFilterBasePath = mockConfig.labelFilterBasePath,
+) => {
+  const Component = Vue.extend(dropdownValueComponent);
+
+  return mountComponent(Component, {
+    labels,
+    labelFilterBasePath,
+  });
+};
+
+describe('DropdownValueComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('isEmpty', () => {
+      it('returns true if `labels` prop is empty', () => {
+        const vmEmptyLabels = createComponent([]);
+        expect(vmEmptyLabels.isEmpty).toBe(true);
+        vmEmptyLabels.$destroy();
+      });
+
+      it('returns false if `labels` prop is empty', () => {
+        expect(vm.isEmpty).toBe(false);
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('labelFilterUrl', () => {
+      it('returns URL string starting with labelFilterBasePath and encoded label.title', () => {
+        expect(vm.labelFilterUrl({
+          title: 'Foo bar',
+        })).toBe('/gitlab-org/my-project/issues?label_name[]=Foo%20bar');
+      });
+    });
+
+    describe('labelStyle', () => {
+      it('returns object with `color` & `backgroundColor` properties from label.textColor & label.color', () => {
+        const label = {
+          textColor: '#FFFFFF',
+          color: '#BADA55',
+        };
+        const styleObj = vm.labelStyle(label);
+
+        expect(styleObj.color).toBe(label.textColor);
+        expect(styleObj.backgroundColor).toBe(label.color);
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders component container element with classes `hide-collapsed value issuable-show-labels`', () => {
+      expect(vm.$el.classList.contains('hide-collapsed', 'value', 'issuable-show-labels')).toBe(true);
+    });
+
+    it('render slot content inside component when `labels` prop is empty', () => {
+      const vmEmptyLabels = createComponent([]);
+      expect(vmEmptyLabels.$el.querySelector('.text-secondary').innerText.trim()).toBe(mockConfig.emptyValueText);
+      vmEmptyLabels.$destroy();
+    });
+
+    it('renders label element with filter URL', () => {
+      expect(vm.$el.querySelector('a').getAttribute('href')).toBe('/gitlab-org/my-project/issues?label_name[]=Foo%20Label');
+    });
+
+    it('renders label element with tooltip and styles based on label details', () => {
+      const labelEl = vm.$el.querySelector('a span.label.color-label');
+      expect(labelEl).not.toBeNull();
+      expect(labelEl.dataset.placement).toBe('bottom');
+      expect(labelEl.dataset.container).toBe('body');
+      expect(labelEl.dataset.originalTitle).toBe(mockLabels[0].description);
+      expect(labelEl.getAttribute('style')).toBe('background-color: rgb(186, 218, 85);');
+      expect(labelEl.innerText.trim()).toBe(mockLabels[0].title);
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data.js
new file mode 100644
index 00000000000..e9008c29b22
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data.js
@@ -0,0 +1,49 @@
+export const mockLabels = [
+  {
+    id: 26,
+    title: 'Foo Label',
+    description: 'Foobar',
+    color: '#BADA55',
+    text_color: '#FFFFFF',
+  },
+];
+
+export const mockSuggestedColors = [
+  '#0033CC',
+  '#428BCA',
+  '#44AD8E',
+  '#A8D695',
+  '#5CB85C',
+  '#69D100',
+  '#004E00',
+  '#34495E',
+  '#7F8C8D',
+  '#A295D6',
+  '#5843AD',
+  '#8E44AD',
+  '#FFECDB',
+  '#AD4363',
+  '#D10069',
+  '#CC0033',
+  '#FF0000',
+  '#D9534F',
+  '#D1D100',
+  '#F0AD4E',
+  '#AD8D43',
+];
+
+export const mockConfig = {
+  showCreate: true,
+  abilityName: 'issue',
+  context: {
+    labels: mockLabels,
+  },
+  namespace: 'gitlab-org',
+  updatePath: '/gitlab-org/my-project/issue/1',
+  labelsPath: '/gitlab-org/my-project/labels.json',
+  labelsWebUrl: '/gitlab-org/my-project/labels',
+  labelFilterBasePath: '/gitlab-org/my-project/issues',
+  canEdit: true,
+  suggestedColors: mockSuggestedColors,
+  emptyValueText: 'None',
+};