Merge branch 'master' into ide-tree-changes-count

57 files changed, 886 insertions, 322 deletions

diff --git a/spec/javascripts/.eslintrc b/spec/javascripts/.eslintrc
index 3d922021978..9eb0e732572 100644
--- a/spec/javascripts/.eslintrc
+++ b/spec/javascripts/.eslintrc
@@ -18,6 +18,7 @@
     "sandbox": false,
     "setFixtures": false,
     "setStyleFixtures": false,
+    "spyOnDependency": false,
     "spyOnEvent": false,
     "ClassSpecHelper": false
   },
diff --git a/spec/javascripts/activities_spec.js b/spec/javascripts/activities_spec.js
index 909a1bf76bc..5dbdcd24296 100644
--- a/spec/javascripts/activities_spec.js
+++ b/spec/javascripts/activities_spec.js
@@ -3,24 +3,30 @@
 import $ from 'jquery';
 import 'vendor/jquery.endless-scroll';
 import Activities from '~/activities';
+import Pager from '~/pager';
 
-(() => {
+describe('Activities', () => {
   window.gon || (window.gon = {});
   const fixtureTemplate = 'static/event_filter.html.raw';
   const filters = [
     {
       id: 'all',
-    }, {
+    },
+    {
       id: 'push',
       name: 'push events',
-    }, {
+    },
+    {
       id: 'merged',
       name: 'merge events',
-    }, {
+    },
+    {
       id: 'comments',
-    }, {
+    },
+    {
       id: 'team',
-    }];
+    },
+  ];
 
   function getEventName(index) {
     const filter = filters[index];
@@ -32,31 +38,34 @@ import Activities from '~/activities';
     return `#${filter.id}_event_filter`;
   }
 
-  describe('Activities', () => {
-    beforeEach(() => {
-      loadFixtures(fixtureTemplate);
-      new Activities();
-    });
-
-    for (let i = 0; i < filters.length; i += 1) {
-      ((i) => {
-        describe(`when selecting ${getEventName(i)}`, () => {
-          beforeEach(() => {
-            $(getSelector(i)).click();
-          });
-
-          for (let x = 0; x < filters.length; x += 1) {
-            ((x) => {
-              const shouldHighlight = i === x;
-              const testName = shouldHighlight ? 'should highlight' : 'should not highlight';
-
-              it(`${testName} ${getEventName(x)}`, () => {
-                expect($(getSelector(x)).parent().hasClass('active')).toEqual(shouldHighlight);
-              });
-            })(x);
-          }
-        });
-      })(i);
-    }
+  beforeEach(() => {
+    loadFixtures(fixtureTemplate);
+    spyOn(Pager, 'init').and.stub();
+    new Activities();
   });
-})();
+
+  for (let i = 0; i < filters.length; i += 1) {
+    (i => {
+      describe(`when selecting ${getEventName(i)}`, () => {
+        beforeEach(() => {
+          $(getSelector(i)).click();
+        });
+
+        for (let x = 0; x < filters.length; x += 1) {
+          (x => {
+            const shouldHighlight = i === x;
+            const testName = shouldHighlight ? 'should highlight' : 'should not highlight';
+
+            it(`${testName} ${getEventName(x)}`, () => {
+              expect(
+                $(getSelector(x))
+                  .parent()
+                  .hasClass('active'),
+              ).toEqual(shouldHighlight);
+            });
+          })(x);
+        }
+      });
+    })(i);
+  }
+});
diff --git a/spec/javascripts/behaviors/quick_submit_spec.js b/spec/javascripts/behaviors/quick_submit_spec.js
index c37c62c63dd..d03836d10f9 100644
--- a/spec/javascripts/behaviors/quick_submit_spec.js
+++ b/spec/javascripts/behaviors/quick_submit_spec.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import '~/behaviors/quick_submit';
 
-describe('Quick Submit behavior', () => {
+describe('Quick Submit behavior', function () {
   const keydownEvent = (options = { keyCode: 13, metaKey: true }) => $.Event('keydown', options);
 
   preloadFixtures('merge_requests/merge_request_with_task_list.html.raw');
diff --git a/spec/javascripts/blob/blob_file_dropzone_spec.js b/spec/javascripts/blob/blob_file_dropzone_spec.js
index 0b1de504435..346f795c3f5 100644
--- a/spec/javascripts/blob/blob_file_dropzone_spec.js
+++ b/spec/javascripts/blob/blob_file_dropzone_spec.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import BlobFileDropzone from '~/blob/blob_file_dropzone';
 
-describe('BlobFileDropzone', () => {
+describe('BlobFileDropzone', function () {
   preloadFixtures('blob/show.html.raw');
 
   beforeEach(() => {
diff --git a/spec/javascripts/comment_type_toggle_spec.js b/spec/javascripts/comment_type_toggle_spec.js
index dfd0810d52e..0ba709298c5 100644
--- a/spec/javascripts/comment_type_toggle_spec.js
+++ b/spec/javascripts/comment_type_toggle_spec.js
@@ -1,5 +1,4 @@
 import CommentTypeToggle from '~/comment_type_toggle';
-import * as dropLabSrc from '~/droplab/drop_lab';
 import InputSetter from '~/droplab/plugins/input_setter';
 
 describe('CommentTypeToggle', function () {
@@ -59,14 +58,14 @@ describe('CommentTypeToggle', function () {
 
       this.droplab = jasmine.createSpyObj('droplab', ['init']);
 
-      spyOn(dropLabSrc, 'default').and.returnValue(this.droplab);
+      this.droplabConstructor = spyOnDependency(CommentTypeToggle, 'DropLab').and.returnValue(this.droplab);
       spyOn(this.commentTypeToggle, 'setConfig').and.returnValue(this.config);
 
       CommentTypeToggle.prototype.initDroplab.call(this.commentTypeToggle);
     });
 
     it('should instantiate a DropLab instance', function () {
-      expect(dropLabSrc.default).toHaveBeenCalled();
+      expect(this.droplabConstructor).toHaveBeenCalled();
     });
 
     it('should set .droplab', function () {
diff --git a/spec/javascripts/commit/pipelines/pipelines_spec.js b/spec/javascripts/commit/pipelines/pipelines_spec.js
index 53820770f3f..819ed7896ca 100644
--- a/spec/javascripts/commit/pipelines/pipelines_spec.js
+++ b/spec/javascripts/commit/pipelines/pipelines_spec.js
@@ -4,7 +4,7 @@ import axios from '~/lib/utils/axios_utils';
 import pipelinesTable from '~/commit/pipelines/pipelines_table.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
-describe('Pipelines table in Commits and Merge requests', () => {
+describe('Pipelines table in Commits and Merge requests', function () {
   const jsonFixtureName = 'pipelines/pipelines.json';
   let pipeline;
   let PipelinesTable;
diff --git a/spec/javascripts/commits_spec.js b/spec/javascripts/commits_spec.js
index 977298b9221..60d100e8544 100644
--- a/spec/javascripts/commits_spec.js
+++ b/spec/javascripts/commits_spec.js
@@ -3,6 +3,7 @@ import 'vendor/jquery.endless-scroll';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import CommitsList from '~/commits';
+import Pager from '~/pager';
 
 describe('Commits List', () => {
   let commitsList;
@@ -14,6 +15,7 @@ describe('Commits List', () => {
       </form>
       <ol id="commits-list"></ol>
       `);
+    spyOn(Pager, 'init').and.stub();
     commitsList = new CommitsList(25);
   });
 
@@ -68,9 +70,10 @@ describe('Commits List', () => {
       mock.restore();
     });
 
-    it('should save the last search string', (done) => {
+    it('should save the last search string', done => {
       commitsList.searchField.val('GitLab');
-      commitsList.filterResults()
+      commitsList
+        .filterResults()
         .then(() => {
           expect(ajaxSpy).toHaveBeenCalled();
           expect(commitsList.lastSearch).toEqual('GitLab');
@@ -80,8 +83,9 @@ describe('Commits List', () => {
         .catch(done.fail);
     });
 
-    it('should not make ajax call if the input does not change', (done) => {
-      commitsList.filterResults()
+    it('should not make ajax call if the input does not change', done => {
+      commitsList
+        .filterResults()
         .then(() => {
           expect(ajaxSpy).not.toHaveBeenCalled();
           expect(commitsList.lastSearch).toEqual('');
diff --git a/spec/javascripts/droplab/hook_spec.js b/spec/javascripts/droplab/hook_spec.js
index 3d39bd0812b..5eed1db2750 100644
--- a/spec/javascripts/droplab/hook_spec.js
+++ b/spec/javascripts/droplab/hook_spec.js
@@ -1,5 +1,4 @@
 import Hook from '~/droplab/hook';
-import * as dropdownSrc from '~/droplab/drop_down';
 
 describe('Hook', function () {
   describe('class constructor', function () {
@@ -10,7 +9,7 @@ describe('Hook', function () {
       this.config = {};
       this.dropdown = {};
 
-      spyOn(dropdownSrc, 'default').and.returnValue(this.dropdown);
+      this.dropdownConstructor = spyOnDependency(Hook, 'DropDown').and.returnValue(this.dropdown);
 
       this.hook = new Hook(this.trigger, this.list, this.plugins, this.config);
     });
@@ -24,7 +23,7 @@ describe('Hook', function () {
     });
 
     it('should call DropDown constructor', function () {
-      expect(dropdownSrc.default).toHaveBeenCalledWith(this.list, this.config);
+      expect(this.dropdownConstructor).toHaveBeenCalledWith(this.list, this.config);
     });
 
     it('should set .type', function () {
diff --git a/spec/javascripts/filtered_search/filtered_search_manager_spec.js b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
index 95d02974bdc..8fcee36beb8 100644
--- a/spec/javascripts/filtered_search/filtered_search_manager_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
@@ -1,5 +1,3 @@
-import * as urlUtils from '~/lib/utils/url_utility';
-import * as recentSearchesStoreSrc from '~/filtered_search/stores/recent_searches_store';
 import RecentSearchesService from '~/filtered_search/services/recent_searches_service';
 import RecentSearchesServiceError from '~/filtered_search/services/recent_searches_service_error';
 import RecentSearchesRoot from '~/filtered_search/recent_searches_root';
@@ -11,7 +9,7 @@ import FilteredSearchDropdownManager from '~/filtered_search/filtered_search_dro
 import FilteredSearchManager from '~/filtered_search/filtered_search_manager';
 import FilteredSearchSpecHelper from '../helpers/filtered_search_spec_helper';
 
-describe('Filtered Search Manager', () => {
+describe('Filtered Search Manager', function () {
   let input;
   let manager;
   let tokensContainer;
@@ -74,18 +72,19 @@ describe('Filtered Search Manager', () => {
 
   describe('class constructor', () => {
     const isLocalStorageAvailable = 'isLocalStorageAvailable';
+    let RecentSearchesStoreSpy;
 
     beforeEach(() => {
       spyOn(RecentSearchesService, 'isAvailable').and.returnValue(isLocalStorageAvailable);
-      spyOn(recentSearchesStoreSrc, 'default');
       spyOn(RecentSearchesRoot.prototype, 'render');
+      RecentSearchesStoreSpy = spyOnDependency(FilteredSearchManager, 'RecentSearchesStore');
     });
 
     it('should instantiate RecentSearchesStore with isLocalStorageAvailable', () => {
       manager = new FilteredSearchManager({ page });
 
       expect(RecentSearchesService.isAvailable).toHaveBeenCalled();
-      expect(recentSearchesStoreSrc.default).toHaveBeenCalledWith({
+      expect(RecentSearchesStoreSpy).toHaveBeenCalledWith({
         isLocalStorageAvailable,
         allowedKeys: FilteredSearchTokenKeys.getKeys(),
       });
@@ -164,7 +163,7 @@ describe('Filtered Search Manager', () => {
     it('should search with a single word', (done) => {
       input.value = 'searchTerm';
 
-      spyOn(urlUtils, 'visitUrl').and.callFake((url) => {
+      spyOnDependency(FilteredSearchManager, 'visitUrl').and.callFake((url) => {
         expect(url).toEqual(`${defaultParams}&search=searchTerm`);
         done();
       });
@@ -175,7 +174,7 @@ describe('Filtered Search Manager', () => {
     it('should search with multiple words', (done) => {
       input.value = 'awesome search terms';
 
-      spyOn(urlUtils, 'visitUrl').and.callFake((url) => {
+      spyOnDependency(FilteredSearchManager, 'visitUrl').and.callFake((url) => {
         expect(url).toEqual(`${defaultParams}&search=awesome+search+terms`);
         done();
       });
@@ -186,7 +185,7 @@ describe('Filtered Search Manager', () => {
     it('should search with special characters', (done) => {
       input.value = '~!@#$%^&*()_+{}:<>,.?/';
 
-      spyOn(urlUtils, 'visitUrl').and.callFake((url) => {
+      spyOnDependency(FilteredSearchManager, 'visitUrl').and.callFake((url) => {
         expect(url).toEqual(`${defaultParams}&search=~!%40%23%24%25%5E%26*()_%2B%7B%7D%3A%3C%3E%2C.%3F%2F`);
         done();
       });
@@ -200,7 +199,7 @@ describe('Filtered Search Manager', () => {
         ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~bug')}
       `);
 
-      spyOn(urlUtils, 'visitUrl').and.callFake((url) => {
+      spyOnDependency(FilteredSearchManager, 'visitUrl').and.callFake((url) => {
         expect(url).toEqual(`${defaultParams}&label_name[]=bug`);
         done();
       });
diff --git a/spec/javascripts/filtered_search/recent_searches_root_spec.js b/spec/javascripts/filtered_search/recent_searches_root_spec.js
index d8ba6de5f45..1e6272bad0b 100644
--- a/spec/javascripts/filtered_search/recent_searches_root_spec.js
+++ b/spec/javascripts/filtered_search/recent_searches_root_spec.js
@@ -1,11 +1,11 @@
 import RecentSearchesRoot from '~/filtered_search/recent_searches_root';
-import * as vueSrc from 'vue';
 
 describe('RecentSearchesRoot', () => {
   describe('render', () => {
     let recentSearchesRoot;
     let data;
     let template;
+    let VueSpy;
 
     beforeEach(() => {
       recentSearchesRoot = {
@@ -14,7 +14,7 @@ describe('RecentSearchesRoot', () => {
         },
       };
 
-      spyOn(vueSrc, 'default').and.callFake((options) => {
+      VueSpy = spyOnDependency(RecentSearchesRoot, 'Vue').and.callFake((options) => {
         data = options.data;
         template = options.template;
       });
@@ -23,7 +23,7 @@ describe('RecentSearchesRoot', () => {
     });
 
     it('should instantiate Vue', () => {
-      expect(vueSrc.default).toHaveBeenCalled();
+      expect(VueSpy).toHaveBeenCalled();
       expect(data()).toBe(recentSearchesRoot.store.state);
       expect(template).toContain(':is-local-storage-available="isLocalStorageAvailable"');
     });
diff --git a/spec/javascripts/gl_dropdown_spec.js b/spec/javascripts/gl_dropdown_spec.js
index 5393502196e..7f9c4811fba 100644
--- a/spec/javascripts/gl_dropdown_spec.js
+++ b/spec/javascripts/gl_dropdown_spec.js
@@ -1,9 +1,8 @@
 /* eslint-disable comma-dangle, no-param-reassign, no-unused-expressions, max-len */
 
 import $ from 'jquery';
-import '~/gl_dropdown';
+import GLDropdown from '~/gl_dropdown';
 import '~/lib/utils/common_utils';
-import * as urlUtils from '~/lib/utils/url_utility';
 
 describe('glDropdown', function describeDropdown() {
   preloadFixtures('static/gl_dropdown.html.raw');
@@ -138,13 +137,13 @@ describe('glDropdown', function describeDropdown() {
       expect(this.dropdownContainerElement).toHaveClass('open');
       const randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0;
       navigateWithKeys('down', randomIndex, () => {
-        spyOn(urlUtils, 'visitUrl').and.stub();
+        const visitUrl = spyOnDependency(GLDropdown, 'visitUrl').and.stub();
         navigateWithKeys('enter', null, () => {
           expect(this.dropdownContainerElement).not.toHaveClass('open');
           const link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.$dropdownMenuElement);
           expect(link).toHaveClass('is-active');
           const linkedLocation = link.attr('href');
-          if (linkedLocation && linkedLocation !== '#') expect(urlUtils.visitUrl).toHaveBeenCalledWith(linkedLocation);
+          if (linkedLocation && linkedLocation !== '#') expect(visitUrl).toHaveBeenCalledWith(linkedLocation);
         });
       });
     });
diff --git a/spec/javascripts/groups/components/app_spec.js b/spec/javascripts/groups/components/app_spec.js
index d8428bd0e08..2b92c485f41 100644
--- a/spec/javascripts/groups/components/app_spec.js
+++ b/spec/javascripts/groups/components/app_spec.js
@@ -1,7 +1,6 @@
 import $ from 'jquery';
 import Vue from 'vue';
 
-import * as utils from '~/lib/utils/url_utility';
 import appComponent from '~/groups/components/app.vue';
 import groupFolderComponent from '~/groups/components/group_folder.vue';
 import groupItemComponent from '~/groups/components/group_item.vue';
@@ -177,7 +176,7 @@ describe('AppComponent', () => {
       it('should fetch groups for provided page details and update window state', (done) => {
         spyOn(vm, 'fetchGroups').and.returnValue(returnServicePromise(mockGroups));
         spyOn(vm, 'updateGroups').and.callThrough();
-        spyOn(utils, 'mergeUrlParams').and.callThrough();
+        const mergeUrlParams = spyOnDependency(appComponent, 'mergeUrlParams').and.callThrough();
         spyOn(window.history, 'replaceState');
         spyOn($, 'scrollTo');
 
@@ -193,7 +192,7 @@ describe('AppComponent', () => {
         setTimeout(() => {
           expect(vm.isLoading).toBe(false);
           expect($.scrollTo).toHaveBeenCalledWith(0);
-          expect(utils.mergeUrlParams).toHaveBeenCalledWith({ page: 2 }, jasmine.any(String));
+          expect(mergeUrlParams).toHaveBeenCalledWith({ page: 2 }, jasmine.any(String));
           expect(window.history.replaceState).toHaveBeenCalledWith({
             page: jasmine.any(String),
           }, jasmine.any(String), jasmine.any(String));
diff --git a/spec/javascripts/groups/components/group_item_spec.js b/spec/javascripts/groups/components/group_item_spec.js
index e3c942597a3..49a139855c8 100644
--- a/spec/javascripts/groups/components/group_item_spec.js
+++ b/spec/javascripts/groups/components/group_item_spec.js
@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import * as urlUtils from '~/lib/utils/url_utility';
 import groupItemComponent from '~/groups/components/group_item.vue';
 import groupFolderComponent from '~/groups/components/group_folder.vue';
 import eventHub from '~/groups/event_hub';
@@ -135,13 +134,13 @@ describe('GroupItemComponent', () => {
         const group = Object.assign({}, mockParentGroupItem);
         group.childrenCount = 0;
         const newVm = createComponent(group);
-        spyOn(urlUtils, 'visitUrl').and.stub();
+        const visitUrl = spyOnDependency(groupItemComponent, 'visitUrl').and.stub();
         spyOn(eventHub, '$emit');
 
         newVm.onClickRowGroup(event);
         setTimeout(() => {
           expect(eventHub.$emit).not.toHaveBeenCalled();
-          expect(urlUtils.visitUrl).toHaveBeenCalledWith(newVm.group.relativePath);
+          expect(visitUrl).toHaveBeenCalledWith(newVm.group.relativePath);
           done();
         }, 0);
       });
diff --git a/spec/javascripts/helpers/class_spec_helper_spec.js b/spec/javascripts/helpers/class_spec_helper_spec.js
index 1415ffb7eb3..fa104ae5bcd 100644
--- a/spec/javascripts/helpers/class_spec_helper_spec.js
+++ b/spec/javascripts/helpers/class_spec_helper_spec.js
@@ -2,7 +2,7 @@
 
 import './class_spec_helper';
 
-describe('ClassSpecHelper', () => {
+describe('ClassSpecHelper', function () {
   describe('itShouldBeAStaticMethod', () => {
     beforeEach(() => {
       class TestClass {
diff --git a/spec/javascripts/ide/components/file_finder/index_spec.js b/spec/javascripts/ide/components/file_finder/index_spec.js
new file mode 100644
index 00000000000..4f208e946d2
--- /dev/null
+++ b/spec/javascripts/ide/components/file_finder/index_spec.js
@@ -0,0 +1,308 @@
+import Vue from 'vue';
+import store from '~/ide/stores';
+import FindFileComponent from '~/ide/components/file_finder/index.vue';
+import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
+import router from '~/ide/ide_router';
+import { file, resetStore } from '../../helpers';
+import { mountComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+
+describe('IDE File finder item spec', () => {
+  const Component = Vue.extend(FindFileComponent);
+  let vm;
+
+  beforeEach(done => {
+    setFixtures('<div id="app"></div>');
+
+    vm = mountComponentWithStore(Component, {
+      store,
+      el: '#app',
+      props: {
+        index: 0,
+      },
+    });
+
+    setTimeout(done);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    resetStore(vm.$store);
+  });
+
+  describe('with entries', () => {
+    beforeEach(done => {
+      Vue.set(vm.$store.state.entries, 'folder', {
+        ...file('folder'),
+        path: 'folder',
+        type: 'folder',
+      });
+
+      Vue.set(vm.$store.state.entries, 'index.js', {
+        ...file('index.js'),
+        path: 'index.js',
+        type: 'blob',
+        url: '/index.jsurl',
+      });
+
+      Vue.set(vm.$store.state.entries, 'component.js', {
+        ...file('component.js'),
+        path: 'component.js',
+        type: 'blob',
+      });
+
+      setTimeout(done);
+    });
+
+    it('renders list of blobs', () => {
+      expect(vm.$el.textContent).toContain('index.js');
+      expect(vm.$el.textContent).toContain('component.js');
+      expect(vm.$el.textContent).not.toContain('folder');
+    });
+
+    it('filters entries', done => {
+      vm.searchText = 'index';
+
+      vm.$nextTick(() => {
+        expect(vm.$el.textContent).toContain('index.js');
+        expect(vm.$el.textContent).not.toContain('component.js');
+
+        done();
+      });
+    });
+
+    it('shows clear button when searchText is not empty', done => {
+      vm.searchText = 'index';
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.dropdown-input-clear').classList).toContain('show');
+        expect(vm.$el.querySelector('.dropdown-input-search').classList).toContain('hidden');
+
+        done();
+      });
+    });
+
+    it('clear button resets searchText', done => {
+      vm.searchText = 'index';
+
+      vm
+        .$nextTick()
+        .then(() => {
+          vm.$el.querySelector('.dropdown-input-clear').click();
+        })
+        .then(vm.$nextTick)
+        .then(() => {
+          expect(vm.searchText).toBe('');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('clear button focues search input', done => {
+      spyOn(vm.$refs.searchInput, 'focus');
+      vm.searchText = 'index';
+
+      vm
+        .$nextTick()
+        .then(() => {
+          vm.$el.querySelector('.dropdown-input-clear').click();
+        })
+        .then(vm.$nextTick)
+        .then(() => {
+          expect(vm.$refs.searchInput.focus).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    describe('listShowCount', () => {
+      it('returns 1 when no filtered entries exist', done => {
+        vm.searchText = 'testing 123';
+
+        vm.$nextTick(() => {
+          expect(vm.listShowCount).toBe(1);
+
+          done();
+        });
+      });
+
+      it('returns entries length when not filtered', () => {
+        expect(vm.listShowCount).toBe(2);
+      });
+    });
+
+    describe('listHeight', () => {
+      it('returns 55 when entries exist', () => {
+        expect(vm.listHeight).toBe(55);
+      });
+
+      it('returns 33 when entries dont exist', done => {
+        vm.searchText = 'testing 123';
+
+        vm.$nextTick(() => {
+          expect(vm.listHeight).toBe(33);
+
+          done();
+        });
+      });
+    });
+
+    describe('filteredBlobsLength', () => {
+      it('returns length of filtered blobs', done => {
+        vm.searchText = 'index';
+
+        vm.$nextTick(() => {
+          expect(vm.filteredBlobsLength).toBe(1);
+
+          done();
+        });
+      });
+    });
+
+    describe('watches', () => {
+      describe('searchText', () => {
+        it('resets focusedIndex when updated', done => {
+          vm.focusedIndex = 1;
+          vm.searchText = 'test';
+
+          vm.$nextTick(() => {
+            expect(vm.focusedIndex).toBe(0);
+
+            done();
+          });
+        });
+      });
+
+      describe('fileFindVisible', () => {
+        it('returns searchText when false', done => {
+          vm.searchText = 'test';
+          vm.$store.state.fileFindVisible = true;
+
+          vm
+            .$nextTick()
+            .then(() => {
+              vm.$store.state.fileFindVisible = false;
+            })
+            .then(vm.$nextTick)
+            .then(() => {
+              expect(vm.searchText).toBe('');
+            })
+            .then(done)
+            .catch(done.fail);
+        });
+      });
+    });
+
+    describe('openFile', () => {
+      beforeEach(() => {
+        spyOn(router, 'push');
+        spyOn(vm, 'toggleFileFinder');
+      });
+
+      it('closes file finder', () => {
+        vm.openFile(vm.$store.state.entries['index.js']);
+
+        expect(vm.toggleFileFinder).toHaveBeenCalled();
+      });
+
+      it('pushes to router', () => {
+        vm.openFile(vm.$store.state.entries['index.js']);
+
+        expect(router.push).toHaveBeenCalledWith('/project/index.jsurl');
+      });
+    });
+
+    describe('onKeyup', () => {
+      it('opens file on enter key', done => {
+        const event = new CustomEvent('keyup');
+        event.keyCode = ENTER_KEY_CODE;
+
+        spyOn(vm, 'openFile');
+
+        vm.$refs.searchInput.dispatchEvent(event);
+
+        vm.$nextTick(() => {
+          expect(vm.openFile).toHaveBeenCalledWith(vm.$store.state.entries['index.js']);
+
+          done();
+        });
+      });
+
+      it('closes file finder on esc key', done => {
+        const event = new CustomEvent('keyup');
+        event.keyCode = ESC_KEY_CODE;
+
+        spyOn(vm, 'toggleFileFinder');
+
+        vm.$refs.searchInput.dispatchEvent(event);
+
+        vm.$nextTick(() => {
+          expect(vm.toggleFileFinder).toHaveBeenCalled();
+
+          done();
+        });
+      });
+    });
+
+    describe('onKeyDown', () => {
+      let el;
+
+      beforeEach(() => {
+        el = vm.$refs.searchInput;
+      });
+
+      describe('up key', () => {
+        const event = new CustomEvent('keydown');
+        event.keyCode = UP_KEY_CODE;
+
+        it('resets to last index when at top', () => {
+          el.dispatchEvent(event);
+
+          expect(vm.focusedIndex).toBe(1);
+        });
+
+        it('minus 1 from focusedIndex', () => {
+          vm.focusedIndex = 1;
+
+          el.dispatchEvent(event);
+
+          expect(vm.focusedIndex).toBe(0);
+        });
+      });
+
+      describe('down key', () => {
+        const event = new CustomEvent('keydown');
+        event.keyCode = DOWN_KEY_CODE;
+
+        it('resets to first index when at bottom', () => {
+          vm.focusedIndex = 1;
+          el.dispatchEvent(event);
+
+          expect(vm.focusedIndex).toBe(0);
+        });
+
+        it('adds 1 to focusedIndex', () => {
+          el.dispatchEvent(event);
+
+          expect(vm.focusedIndex).toBe(1);
+        });
+      });
+    });
+  });
+
+  describe('without entries', () => {
+    it('renders loading text when loading', done => {
+      store.state.loading = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.textContent).toContain('Loading...');
+
+        done();
+      });
+    });
+
+    it('renders no files text', () => {
+      expect(vm.$el.textContent).toContain('No files found.');
+    });
+  });
+});
diff --git a/spec/javascripts/ide/components/file_finder/item_spec.js b/spec/javascripts/ide/components/file_finder/item_spec.js
new file mode 100644
index 00000000000..0f1116c6912
--- /dev/null
+++ b/spec/javascripts/ide/components/file_finder/item_spec.js
@@ -0,0 +1,140 @@
+import Vue from 'vue';
+import ItemComponent from '~/ide/components/file_finder/item.vue';
+import { file } from '../../helpers';
+import createComponent from '../../../helpers/vue_mount_component_helper';
+
+describe('IDE File finder item spec', () => {
+  const Component = Vue.extend(ItemComponent);
+  let vm;
+  let localFile;
+
+  beforeEach(() => {
+    localFile = {
+      ...file(),
+      name: 'test file',
+      path: 'test/file',
+    };
+
+    vm = createComponent(Component, {
+      file: localFile,
+      focused: true,
+      searchText: '',
+      index: 0,
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders file name & path', () => {
+    expect(vm.$el.textContent).toContain('test file');
+    expect(vm.$el.textContent).toContain('test/file');
+  });
+
+  describe('focused', () => {
+    it('adds is-focused class', () => {
+      expect(vm.$el.classList).toContain('is-focused');
+    });
+
+    it('does not have is-focused class when not focused', done => {
+      vm.focused = false;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.classList).not.toContain('is-focused');
+
+        done();
+      });
+    });
+  });
+
+  describe('changed file icon', () => {
+    it('does not render when not a changed or temp file', () => {
+      expect(vm.$el.querySelector('.diff-changed-stats')).toBe(null);
+    });
+
+    it('renders when a changed file', done => {
+      vm.file.changed = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.diff-changed-stats')).not.toBe(null);
+
+        done();
+      });
+    });
+
+    it('renders when a temp file', done => {
+      vm.file.tempFile = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.diff-changed-stats')).not.toBe(null);
+
+        done();
+      });
+    });
+  });
+
+  it('emits event when clicked', () => {
+    spyOn(vm, '$emit');
+
+    vm.$el.click();
+
+    expect(vm.$emit).toHaveBeenCalledWith('click', vm.file);
+  });
+
+  describe('path', () => {
+    let el;
+
+    beforeEach(done => {
+      vm.searchText = 'file';
+
+      el = vm.$el.querySelector('.diff-changed-file-path');
+
+      vm.$nextTick(done);
+    });
+
+    it('highlights text', () => {
+      expect(el.querySelectorAll('.highlighted').length).toBe(4);
+    });
+
+    it('adds ellipsis to long text', done => {
+      vm.file.path = new Array(70)
+        .fill()
+        .map((_, i) => `${i}-`)
+        .join('');
+
+      vm.$nextTick(() => {
+        expect(el.textContent).toBe(`...${vm.file.path.substr(vm.file.path.length - 60)}`);
+        done();
+      });
+    });
+  });
+
+  describe('name', () => {
+    let el;
+
+    beforeEach(done => {
+      vm.searchText = 'file';
+
+      el = vm.$el.querySelector('.diff-changed-file-name');
+
+      vm.$nextTick(done);
+    });
+
+    it('highlights text', () => {
+      expect(el.querySelectorAll('.highlighted').length).toBe(4);
+    });
+
+    it('does not add ellipsis to long text', done => {
+      vm.file.name = new Array(70)
+        .fill()
+        .map((_, i) => `${i}-`)
+        .join('');
+
+      vm.$nextTick(() => {
+        expect(el.textContent).not.toBe(`...${vm.file.name.substr(vm.file.name.length - 60)}`);
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/ide/components/ide_spec.js b/spec/javascripts/ide/components/ide_spec.js
index 5bd890094cc..7bfcfc90572 100644
--- a/spec/javascripts/ide/components/ide_spec.js
+++ b/spec/javascripts/ide/components/ide_spec.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import Mousetrap from 'mousetrap';
 import store from '~/ide/stores';
 import ide from '~/ide/components/ide.vue';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
@@ -38,4 +39,68 @@ describe('ide component', () => {
       done();
     });
   });
+
+  describe('file finder', () => {
+    beforeEach(done => {
+      spyOn(vm, 'toggleFileFinder');
+
+      vm.$store.state.fileFindVisible = true;
+
+      vm.$nextTick(done);
+    });
+
+    it('calls toggleFileFinder on `t` key press', done => {
+      Mousetrap.trigger('t');
+
+      vm
+        .$nextTick()
+        .then(() => {
+          expect(vm.toggleFileFinder).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('calls toggleFileFinder on `command+p` key press', done => {
+      Mousetrap.trigger('command+p');
+
+      vm
+        .$nextTick()
+        .then(() => {
+          expect(vm.toggleFileFinder).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('calls toggleFileFinder on `ctrl+p` key press', done => {
+      Mousetrap.trigger('ctrl+p');
+
+      vm
+        .$nextTick()
+        .then(() => {
+          expect(vm.toggleFileFinder).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('always allows `command+p` to trigger toggleFileFinder', () => {
+      expect(
+        vm.mousetrapStopCallback(null, vm.$el.querySelector('.dropdown-input-field'), 'command+p'),
+      ).toBe(false);
+    });
+
+    it('always allows `ctrl+p` to trigger toggleFileFinder', () => {
+      expect(
+        vm.mousetrapStopCallback(null, vm.$el.querySelector('.dropdown-input-field'), 'ctrl+p'),
+      ).toBe(false);
+    });
+
+    it('onlys handles `t` when focused in input-field', () => {
+      expect(
+        vm.mousetrapStopCallback(null, vm.$el.querySelector('.dropdown-input-field'), 't'),
+      ).toBe(true);
+    });
+  });
 });
diff --git a/spec/javascripts/ide/stores/actions_spec.js b/spec/javascripts/ide/stores/actions_spec.js
index 22a7441ba92..b6eadf56f9d 100644
--- a/spec/javascripts/ide/stores/actions_spec.js
+++ b/spec/javascripts/ide/stores/actions_spec.js
@@ -1,6 +1,5 @@
-import * as urlUtils from '~/lib/utils/url_utility';
+import actions, { stageAllChanges, unstageAllChanges, toggleFileFinder } from '~/ide/stores/actions';
 import store from '~/ide/stores';
-import * as actions from '~/ide/stores/actions';
 import * as types from '~/ide/stores/mutation_types';
 import router from '~/ide/ide_router';
 import { resetStore, file } from '../helpers';
@@ -17,12 +16,12 @@ describe('Multi-file store actions', () => {
 
   describe('redirectToUrl', () => {
     it('calls visitUrl', done => {
-      spyOn(urlUtils, 'visitUrl');
+      const visitUrl = spyOnDependency(actions, 'visitUrl');
 
       store
         .dispatch('redirectToUrl', 'test')
         .then(() => {
-          expect(urlUtils.visitUrl).toHaveBeenCalledWith('test');
+          expect(visitUrl).toHaveBeenCalledWith('test');
 
           done();
         })
@@ -298,7 +297,7 @@ describe('Multi-file store actions', () => {
       store.state.changedFiles.push(file(), file('new'));
 
       testAction(
-        actions.stageAllChanges,
+        stageAllChanges,
         null,
         store.state,
         [
@@ -316,7 +315,7 @@ describe('Multi-file store actions', () => {
       store.state.stagedFiles.push(file(), file('new'));
 
       testAction(
-        actions.unstageAllChanges,
+        unstageAllChanges,
         null,
         store.state,
         [
@@ -340,4 +339,17 @@ describe('Multi-file store actions', () => {
         .catch(done.fail);
     });
   });
+
+  describe('toggleFileFinder', () => {
+    it('commits TOGGLE_FILE_FINDER', done => {
+      testAction(
+        toggleFileFinder,
+        true,
+        null,
+        [{ type: 'TOGGLE_FILE_FINDER', payload: true }],
+        [],
+        done,
+      );
+    });
+  });
 });
diff --git a/spec/javascripts/ide/stores/getters_spec.js b/spec/javascripts/ide/stores/getters_spec.js
index 8d04b83928c..b6b4dd28729 100644
--- a/spec/javascripts/ide/stores/getters_spec.js
+++ b/spec/javascripts/ide/stores/getters_spec.js
@@ -64,4 +64,24 @@ describe('IDE store getters', () => {
       expect(getters.currentMergeRequest(localState)).toBeNull();
     });
   });
+
+  describe('allBlobs', () => {
+    beforeEach(() => {
+      Object.assign(localState.entries, {
+        index: { type: 'blob', name: 'index', lastOpenedAt: 0 },
+        app: { type: 'blob', name: 'blob', lastOpenedAt: 0 },
+        folder: { type: 'folder', name: 'folder', lastOpenedAt: 0 },
+      });
+    });
+
+    it('returns only blobs', () => {
+      expect(getters.allBlobs(localState).length).toBe(2);
+    });
+
+    it('returns list sorted by lastOpenedAt', () => {
+      localState.entries.app.lastOpenedAt = new Date().getTime();
+
+      expect(getters.allBlobs(localState)[0].name).toBe('blob');
+    });
+  });
 });
diff --git a/spec/javascripts/ide/stores/modules/commit/actions_spec.js b/spec/javascripts/ide/stores/modules/commit/actions_spec.js
index 116967208e0..b2b4b85ca42 100644
--- a/spec/javascripts/ide/stores/modules/commit/actions_spec.js
+++ b/spec/javascripts/ide/stores/modules/commit/actions_spec.js
@@ -1,7 +1,7 @@
+import actions from '~/ide/stores/actions';
 import store from '~/ide/stores';
 import service from '~/ide/services';
 import router from '~/ide/ide_router';
-import * as urlUtils from '~/lib/utils/url_utility';
 import eventHub from '~/ide/eventhub';
 import * as consts from '~/ide/stores/modules/commit/constants';
 import { resetStore, file } from 'spec/ide/helpers';
@@ -307,8 +307,10 @@ describe('IDE commit module actions', () => {
   });
 
   describe('commitChanges', () => {
+    let visitUrl;
+
     beforeEach(() => {
-      spyOn(urlUtils, 'visitUrl');
+      visitUrl = spyOnDependency(actions, 'visitUrl');
 
       document.body.innerHTML += '<div class="flash-container"></div>';
 
@@ -461,7 +463,7 @@ describe('IDE commit module actions', () => {
           store
             .dispatch('commit/commitChanges')
             .then(() => {
-              expect(urlUtils.visitUrl).toHaveBeenCalledWith(
+              expect(visitUrl).toHaveBeenCalledWith(
                 `webUrl/merge_requests/new?merge_request[source_branch]=${
                   store.getters['commit/newBranchName']
                 }&merge_request[target_branch]=master`,
diff --git a/spec/javascripts/ide/stores/mutations_spec.js b/spec/javascripts/ide/stores/mutations_spec.js
index 26e7ed4535e..575039e755e 100644
--- a/spec/javascripts/ide/stores/mutations_spec.js
+++ b/spec/javascripts/ide/stores/mutations_spec.js
@@ -86,4 +86,12 @@ describe('Multi-file store mutations', () => {
       expect(localState.viewer).toBe('diff');
     });
   });
+
+  describe('TOGGLE_FILE_FINDER', () => {
+    it('updates fileFindVisible', () => {
+      mutations.TOGGLE_FILE_FINDER(localState, true);
+
+      expect(localState.fileFindVisible).toBe(true);
+    });
+  });
 });
diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js
index d5a87b5ce20..bf1f0c822fe 100644
--- a/spec/javascripts/issue_show/components/app_spec.js
+++ b/spec/javascripts/issue_show/components/app_spec.js
@@ -2,7 +2,6 @@ import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import '~/behaviors/markdown/render_gfm';
-import * as urlUtils from '~/lib/utils/url_utility';
 import issuableApp from '~/issue_show/components/app.vue';
 import eventHub from '~/issue_show/event_hub';
 import setTimeoutPromise from 'spec/helpers/set_timeout_promise_helper';
@@ -174,7 +173,7 @@ describe('Issuable output', () => {
     });
 
     it('does not redirect if issue has not moved', (done) => {
-      spyOn(urlUtils, 'visitUrl');
+      const visitUrl = spyOnDependency(issuableApp, 'visitUrl');
       spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
         resolve({
           data: {
@@ -187,16 +186,13 @@ describe('Issuable output', () => {
       vm.updateIssuable();
 
       setTimeout(() => {
-        expect(
-          urlUtils.visitUrl,
-        ).not.toHaveBeenCalled();
-
+        expect(visitUrl).not.toHaveBeenCalled();
         done();
       });
     });
 
     it('redirects if returned web_url has changed', (done) => {
-      spyOn(urlUtils, 'visitUrl');
+      const visitUrl = spyOnDependency(issuableApp, 'visitUrl');
       spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
         resolve({
           data: {
@@ -209,10 +205,7 @@ describe('Issuable output', () => {
       vm.updateIssuable();
 
       setTimeout(() => {
-        expect(
-          urlUtils.visitUrl,
-        ).toHaveBeenCalledWith('/testing-issue-move');
-
+        expect(visitUrl).toHaveBeenCalledWith('/testing-issue-move');
         done();
       });
     });
@@ -340,7 +333,7 @@ describe('Issuable output', () => {
 
   describe('deleteIssuable', () => {
     it('changes URL when deleted', (done) => {
-      spyOn(urlUtils, 'visitUrl');
+      const visitUrl = spyOnDependency(issuableApp, 'visitUrl');
       spyOn(vm.service, 'deleteIssuable').and.callFake(() => new Promise((resolve) => {
         resolve({
           data: {
@@ -352,16 +345,13 @@ describe('Issuable output', () => {
       vm.deleteIssuable();
 
       setTimeout(() => {
-        expect(
-          urlUtils.visitUrl,
-        ).toHaveBeenCalledWith('/test');
-
+        expect(visitUrl).toHaveBeenCalledWith('/test');
         done();
       });
     });
 
     it('stops polling when deleting', (done) => {
-      spyOn(urlUtils, 'visitUrl');
+      spyOnDependency(issuableApp, 'visitUrl');
       spyOn(vm.poll, 'stop').and.callThrough();
       spyOn(vm.service, 'deleteIssuable').and.callFake(() => new Promise((resolve) => {
         resolve({
@@ -377,7 +367,6 @@ describe('Issuable output', () => {
         expect(
           vm.poll.stop,
         ).toHaveBeenCalledWith();
-
         done();
       });
     });
diff --git a/spec/javascripts/issue_show/components/description_spec.js b/spec/javascripts/issue_show/components/description_spec.js
index d96151a8a3a..889c8545faa 100644
--- a/spec/javascripts/issue_show/components/description_spec.js
+++ b/spec/javascripts/issue_show/components/description_spec.js
@@ -1,7 +1,6 @@
 import $ from 'jquery';
 import Vue from 'vue';
-import descriptionComponent from '~/issue_show/components/description.vue';
-import * as taskList from '~/task_list';
+import Description from '~/issue_show/components/description.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('Description component', () => {
@@ -17,7 +16,7 @@ describe('Description component', () => {
   };
 
   beforeEach(() => {
-    DescriptionComponent = Vue.extend(descriptionComponent);
+    DescriptionComponent = Vue.extend(Description);
 
     if (!document.querySelector('.issuable-meta')) {
       const metaData = document.createElement('div');
@@ -82,18 +81,20 @@ describe('Description component', () => {
   });
 
   describe('TaskList', () => {
+    let TaskList;
+
     beforeEach(() => {
       vm = mountComponent(DescriptionComponent, Object.assign({}, props, {
         issuableType: 'issuableType',
       }));
-      spyOn(taskList, 'default');
+      TaskList = spyOnDependency(Description, 'TaskList');
     });
 
     it('re-inits the TaskList when description changed', (done) => {
       vm.descriptionHtml = 'changed';
 
       setTimeout(() => {
-        expect(taskList.default).toHaveBeenCalled();
+        expect(TaskList).toHaveBeenCalled();
         done();
       });
     });
@@ -103,7 +104,7 @@ describe('Description component', () => {
       vm.descriptionHtml = 'changed';
 
       setTimeout(() => {
-        expect(taskList.default).not.toHaveBeenCalled();
+        expect(TaskList).not.toHaveBeenCalled();
         done();
       });
     });
@@ -112,7 +113,7 @@ describe('Description component', () => {
       vm.descriptionHtml = 'changed';
 
       setTimeout(() => {
-        expect(taskList.default).toHaveBeenCalledWith({
+        expect(TaskList).toHaveBeenCalledWith({
           dataType: 'issuableType',
           fieldName: 'description',
           selector: '.detail-page-description',
diff --git a/spec/javascripts/job_spec.js b/spec/javascripts/job_spec.js
index c6bbacf237a..da00b615c9b 100644
--- a/spec/javascripts/job_spec.js
+++ b/spec/javascripts/job_spec.js
@@ -2,7 +2,6 @@ import $ from 'jquery';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
-import * as urlUtils from '~/lib/utils/url_utility';
 import '~/lib/utils/datetime_utility';
 import Job from '~/job';
 import '~/breakpoints';
@@ -22,7 +21,7 @@ describe('Job', () => {
   beforeEach(() => {
     loadFixtures('builds/build-with-artifacts.html.raw');
 
-    spyOn(urlUtils, 'visitUrl');
+    spyOnDependency(Job, 'visitUrl');
 
     response = {};
 
diff --git a/spec/javascripts/jobs/sidebar_details_block_spec.js b/spec/javascripts/jobs/sidebar_details_block_spec.js
index 6b397c22fb9..9c4454252ce 100644
--- a/spec/javascripts/jobs/sidebar_details_block_spec.js
+++ b/spec/javascripts/jobs/sidebar_details_block_spec.js
@@ -102,7 +102,7 @@ describe('Sidebar details block', () => {
     });
 
     it('should render runner ID', () => {
-      expect(trimWhitespace(vm.$el.querySelector('.js-job-runner'))).toEqual('Runner: #1');
+      expect(trimWhitespace(vm.$el.querySelector('.js-job-runner'))).toEqual('Runner: local ci runner (#1)');
     });
 
     it('should render timeout information', () => {
diff --git a/spec/javascripts/lib/utils/csrf_token_spec.js b/spec/javascripts/lib/utils/csrf_token_spec.js
index c484213df8e..81a39a97a84 100644
--- a/spec/javascripts/lib/utils/csrf_token_spec.js
+++ b/spec/javascripts/lib/utils/csrf_token_spec.js
@@ -1,6 +1,6 @@
 import csrf from '~/lib/utils/csrf';
 
-describe('csrf', () => {
+describe('csrf', function () {
   beforeEach(() => {
     this.tokenKey = 'X-CSRF-Token';
     this.token = 'pH1cvjnP9grx2oKlhWEDvUZnJ8x2eXsIs1qzyHkF3DugSG5yTxR76CWeEZRhML2D1IeVB7NEW0t5l/axE4iJpQ==';
diff --git a/spec/javascripts/lib/utils/image_utility_spec.js b/spec/javascripts/lib/utils/image_utility_spec.js
index 75addfcc833..a7eff419fba 100644
--- a/spec/javascripts/lib/utils/image_utility_spec.js
+++ b/spec/javascripts/lib/utils/image_utility_spec.js
@@ -1,4 +1,4 @@
-import * as imageUtility from '~/lib/utils/image_utility';
+import { isImageLoaded } from '~/lib/utils/image_utility';
 
 describe('imageUtility', () => {
   describe('isImageLoaded', () => {
@@ -8,7 +8,7 @@ describe('imageUtility', () => {
         naturalHeight: 100,
       };
 
-      expect(imageUtility.isImageLoaded(element)).toEqual(false);
+      expect(isImageLoaded(element)).toEqual(false);
     });
 
     it('should return false when naturalHeight = 0', () => {
@@ -17,7 +17,7 @@ describe('imageUtility', () => {
         naturalHeight: 0,
       };
 
-      expect(imageUtility.isImageLoaded(element)).toEqual(false);
+      expect(isImageLoaded(element)).toEqual(false);
     });
 
     it('should return true when image.complete and naturalHeight != 0', () => {
@@ -26,7 +26,7 @@ describe('imageUtility', () => {
         naturalHeight: 100,
       };
 
-      expect(imageUtility.isImageLoaded(element)).toEqual(true);
+      expect(isImageLoaded(element)).toEqual(true);
     });
   });
 });
diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js
index 79c8cf0ba32..3dbd9756cd2 100644
--- a/spec/javascripts/merge_request_tabs_spec.js
+++ b/spec/javascripts/merge_request_tabs_spec.js
@@ -3,7 +3,6 @@
 import $ from 'jquery';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
-import * as urlUtils from '~/lib/utils/url_utility';
 import MergeRequestTabs from '~/merge_request_tabs';
 import '~/commit/pipelines/pipelines_bundle';
 import '~/breakpoints';
@@ -356,7 +355,7 @@ import 'vendor/jquery.scrollTo';
 
         describe('with note fragment hash', () => {
           it('should expand and scroll to linked fragment hash #note_xxx', function (done) {
-            spyOn(urlUtils, 'getLocationHash').and.returnValue(noteId);
+            spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue(noteId);
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
             setTimeout(() => {
@@ -372,7 +371,7 @@ import 'vendor/jquery.scrollTo';
           });
 
           it('should gracefully ignore non-existant fragment hash', function (done) {
-            spyOn(urlUtils, 'getLocationHash').and.returnValue('note_something-that-does-not-exist');
+            spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue('note_something-that-does-not-exist');
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
             setTimeout(() => {
@@ -385,7 +384,7 @@ import 'vendor/jquery.scrollTo';
 
         describe('with line number fragment hash', () => {
           it('should gracefully ignore line number fragment hash', function () {
-            spyOn(urlUtils, 'getLocationHash').and.returnValue(noteLineNumId);
+            spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue(noteLineNumId);
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
             expect(noteLineNumId.length).toBeGreaterThan(0);
@@ -422,7 +421,7 @@ import 'vendor/jquery.scrollTo';
 
         describe('with note fragment hash', () => {
           it('should expand and scroll to linked fragment hash #note_xxx', function (done) {
-            spyOn(urlUtils, 'getLocationHash').and.returnValue(noteId);
+            spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue(noteId);
 
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
@@ -439,7 +438,7 @@ import 'vendor/jquery.scrollTo';
           });
 
           it('should gracefully ignore non-existant fragment hash', function (done) {
-            spyOn(urlUtils, 'getLocationHash').and.returnValue('note_something-that-does-not-exist');
+            spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue('note_something-that-does-not-exist');
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
             setTimeout(() => {
@@ -451,7 +450,7 @@ import 'vendor/jquery.scrollTo';
 
         describe('with line number fragment hash', () => {
           it('should gracefully ignore line number fragment hash', function () {
-            spyOn(urlUtils, 'getLocationHash').and.returnValue(noteLineNumId);
+            spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue(noteLineNumId);
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
             expect(noteLineNumId.length).toBeGreaterThan(0);
diff --git a/spec/javascripts/monitoring/monitoring_store_spec.js b/spec/javascripts/monitoring/monitoring_store_spec.js
index 88aa7659275..08d54946787 100644
--- a/spec/javascripts/monitoring/monitoring_store_spec.js
+++ b/spec/javascripts/monitoring/monitoring_store_spec.js
@@ -1,7 +1,7 @@
 import MonitoringStore from '~/monitoring/stores/monitoring_store';
 import MonitoringMock, { deploymentData } from './mock_data';
 
-describe('MonitoringStore', () => {
+describe('MonitoringStore', function () {
   this.store = new MonitoringStore();
   this.store.storeMetrics(MonitoringMock.data);
 
diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index ec56ab0e2f0..0952356c2f4 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -3,7 +3,6 @@ import $ from 'jquery';
 import _ from 'underscore';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
-import * as urlUtils from '~/lib/utils/url_utility';
 import 'autosize';
 import '~/gl_form';
 import '~/lib/utils/text_utility';
@@ -222,7 +221,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper';
       });
 
       it('sets target when hash matches', () => {
-        spyOn(urlUtils, 'getLocationHash').and.returnValue(hash);
+        spyOnDependency(Notes, 'getLocationHash').and.returnValue(hash);
 
         Notes.updateNoteTargetSelector($note);
 
@@ -231,7 +230,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper';
       });
 
       it('unsets target when hash does not match', () => {
-        spyOn(urlUtils, 'getLocationHash').and.returnValue('note_doesnotexist');
+        spyOnDependency(Notes, 'getLocationHash').and.returnValue('note_doesnotexist');
 
         Notes.updateNoteTargetSelector($note);
 
@@ -239,7 +238,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper';
       });
 
       it('unsets target when there is not a hash fragment anymore', () => {
-        spyOn(urlUtils, 'getLocationHash').and.returnValue(null);
+        spyOnDependency(Notes, 'getLocationHash').and.returnValue(null);
 
         Notes.updateNoteTargetSelector($note);
 
diff --git a/spec/javascripts/pager_spec.js b/spec/javascripts/pager_spec.js
index b09494f0b77..04f2e7ef4f9 100644
--- a/spec/javascripts/pager_spec.js
+++ b/spec/javascripts/pager_spec.js
@@ -1,15 +1,25 @@
-/* global fixture */
+import $ from 'jquery';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
-import * as utils from '~/lib/utils/url_utility';
 import Pager from '~/pager';
 
 describe('pager', () => {
+  let axiosMock;
+
+  beforeEach(() => {
+    axiosMock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    axiosMock.restore();
+  });
+
   describe('init', () => {
     const originalHref = window.location.href;
 
     beforeEach(() => {
       setFixtures('<div class="content_list"></div><div class="loading"></div>');
+      spyOn($.fn, 'endlessScroll').and.stub();
     });
 
     afterEach(() => {
@@ -25,7 +35,7 @@ describe('pager', () => {
 
     it('should use current url if data-href attribute not provided', () => {
       const href = `${gl.TEST_HOST}/some_list`;
-      spyOn(utils, 'removeParams').and.returnValue(href);
+      spyOnDependency(Pager, 'removeParams').and.returnValue(href);
       Pager.init();
       expect(Pager.url).toBe(href);
     });
@@ -39,42 +49,37 @@ describe('pager', () => {
     it('keeps extra query parameters from url', () => {
       window.history.replaceState({}, null, '?filter=test&offset=100');
       const href = `${gl.TEST_HOST}/some_list?filter=test`;
-      spyOn(utils, 'removeParams').and.returnValue(href);
+      const removeParams = spyOnDependency(Pager, 'removeParams').and.returnValue(href);
       Pager.init();
-      expect(utils.removeParams).toHaveBeenCalledWith(['limit', 'offset']);
+      expect(removeParams).toHaveBeenCalledWith(['limit', 'offset']);
       expect(Pager.url).toEqual(href);
     });
   });
 
   describe('getOld', () => {
     const urlRegex = /(.*)some_list(.*)$/;
-    let mock;
 
     function mockSuccess() {
-      mock.onGet(urlRegex).reply(200, {
+      axiosMock.onGet(urlRegex).reply(200, {
         count: 0,
         html: '',
       });
     }
 
     function mockError() {
-      mock.onGet(urlRegex).networkError();
+      axiosMock.onGet(urlRegex).networkError();
     }
 
     beforeEach(() => {
-      setFixtures('<div class="content_list" data-href="/some_list"></div><div class="loading"></div>');
+      setFixtures(
+        '<div class="content_list" data-href="/some_list"></div><div class="loading"></div>',
+      );
       spyOn(axios, 'get').and.callThrough();
 
-      mock = new MockAdapter(axios);
-
       Pager.init();
     });
 
-    afterEach(() => {
-      mock.restore();
-    });
-
-    it('shows loader while loading next page', (done) => {
+    it('shows loader while loading next page', done => {
       mockSuccess();
 
       spyOn(Pager.loading, 'show');
@@ -87,7 +92,7 @@ describe('pager', () => {
       });
     });
 
-    it('hides loader on success', (done) => {
+    it('hides loader on success', done => {
       mockSuccess();
 
       spyOn(Pager.loading, 'hide');
@@ -100,7 +105,7 @@ describe('pager', () => {
       });
     });
 
-    it('hides loader on error', (done) => {
+    it('hides loader on error', done => {
       mockError();
 
       spyOn(Pager.loading, 'hide');
@@ -113,7 +118,7 @@ describe('pager', () => {
       });
     });
 
-    it('sends request to url with offset and limit params', (done) => {
+    it('sends request to url with offset and limit params', done => {
       Pager.offset = 100;
       Pager.limit = 20;
       Pager.getOld();
diff --git a/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js b/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js
index a6fe9fb65e9..b69e5f9a3a0 100644
--- a/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js
+++ b/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js
@@ -2,7 +2,6 @@ import Vue from 'vue';
 
 import axios from '~/lib/utils/axios_utils';
 import stopJobsModal from '~/pages/admin/jobs/index/components/stop_jobs_modal.vue';
-import * as urlUtility from '~/lib/utils/url_utility';
 
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
@@ -24,7 +23,7 @@ describe('stop_jobs_modal.vue', () => {
   describe('onSubmit', () => {
     it('stops jobs and redirects to overview page', (done) => {
       const responseURL = `${gl.TEST_HOST}/stop_jobs_modal.vue/jobs`;
-      const redirectSpy = spyOn(urlUtility, 'redirectTo');
+      const redirectSpy = spyOnDependency(stopJobsModal, 'redirectTo');
       spyOn(axios, 'post').and.callFake((url) => {
         expect(url).toBe(props.url);
         return Promise.resolve({
@@ -44,7 +43,7 @@ describe('stop_jobs_modal.vue', () => {
 
     it('displays error if stopping jobs failed', (done) => {
       const dummyError = new Error('stopping jobs failed');
-      const redirectSpy = spyOn(urlUtility, 'redirectTo');
+      const redirectSpy = spyOnDependency(stopJobsModal, 'redirectTo');
       spyOn(axios, 'post').and.callFake((url) => {
         expect(url).toBe(props.url);
         return Promise.reject(dummyError);
diff --git a/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js b/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js
index 6074e06fcec..94401beb5c9 100644
--- a/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js
+++ b/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js
@@ -3,7 +3,6 @@ import Vue from 'vue';
 import axios from '~/lib/utils/axios_utils';
 import deleteMilestoneModal from '~/pages/milestones/shared/components/delete_milestone_modal.vue';
 import eventHub from '~/pages/milestones/shared/event_hub';
-import * as urlUtility from '~/lib/utils/url_utility';
 
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
@@ -40,7 +39,7 @@ describe('delete_milestone_modal.vue', () => {
           },
         });
       });
-      const redirectSpy = spyOn(urlUtility, 'redirectTo');
+      const redirectSpy = spyOnDependency(deleteMilestoneModal, 'redirectTo');
 
       vm.onSubmit()
       .then(() => {
@@ -60,7 +59,7 @@ describe('delete_milestone_modal.vue', () => {
         eventHub.$emit.calls.reset();
         return Promise.reject(dummyError);
       });
-      const redirectSpy = spyOn(urlUtility, 'redirectTo');
+      const redirectSpy = spyOnDependency(deleteMilestoneModal, 'redirectTo');
 
       vm.onSubmit()
         .catch((error) => {
diff --git a/spec/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js b/spec/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js
index f95a7cef18a..fb7d2763b49 100644
--- a/spec/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js
+++ b/spec/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js
@@ -6,7 +6,7 @@ const PipelineSchedulesCalloutComponent = Vue.extend(PipelineSchedulesCallout);
 const cookieKey = 'pipeline_schedules_callout_dismissed';
 const docsUrl = 'help/ci/scheduled_pipelines';
 
-describe('Pipeline Schedule Callout', () => {
+describe('Pipeline Schedule Callout', function () {
   beforeEach(() => {
     setFixtures(`
       <div id='pipeline-schedules-callout' data-docs-url=${docsUrl}></div>
diff --git a/spec/javascripts/pipelines/graph/action_component_spec.js b/spec/javascripts/pipelines/graph/action_component_spec.js
index 581209f215d..3de10392472 100644
--- a/spec/javascripts/pipelines/graph/action_component_spec.js
+++ b/spec/javascripts/pipelines/graph/action_component_spec.js
@@ -6,7 +6,7 @@ import mountComponent from '../../helpers/vue_mount_component_helper';
 describe('pipeline graph action component', () => {
   let component;
 
-  beforeEach((done) => {
+  beforeEach(done => {
     const ActionComponent = Vue.extend(actionComponent);
     component = mountComponent(ActionComponent, {
       tooltipText: 'bar',
@@ -22,7 +22,7 @@ describe('pipeline graph action component', () => {
   });
 
   it('should emit an event with the provided link', () => {
-    eventHub.$on('graphAction', (link) => {
+    eventHub.$on('graphAction', link => {
       expect(link).toEqual('foo');
     });
   });
@@ -31,7 +31,7 @@ describe('pipeline graph action component', () => {
     expect(component.$el.getAttribute('data-original-title')).toEqual('bar');
   });
 
-  it('should update bootstrap tooltip when title changes', (done) => {
+  it('should update bootstrap tooltip when title changes', done => {
     component.tooltipText = 'changed';
 
     setTimeout(() => {
@@ -44,4 +44,45 @@ describe('pipeline graph action component', () => {
     expect(component.$el.querySelector('.ci-action-icon-wrapper')).toBeDefined();
     expect(component.$el.querySelector('svg')).toBeDefined();
   });
+
+  it('disables the button when clicked', done => {
+    component.$el.click();
+
+    component.$nextTick(() => {
+      expect(component.$el.getAttribute('disabled')).toEqual('disabled');
+      done();
+    });
+  });
+
+  it('re-enabled the button when `requestFinishedFor` matches `linkRequested`', done => {
+    component.$el.click();
+
+    component
+      .$nextTick()
+      .then(() => {
+        expect(component.$el.getAttribute('disabled')).toEqual('disabled');
+        component.requestFinishedFor = 'foo';
+      })
+      .then(() => {
+        expect(component.$el.getAttribute('disabled')).toBeNull();
+      })
+      .then(done)
+      .catch(done.fail);
+  });
+
+  it('does not re-enable the button when `requestFinishedFor` does not matches `linkRequested`', done => {
+    component.$el.click();
+
+    component
+      .$nextTick()
+      .then(() => {
+        expect(component.$el.getAttribute('disabled')).toEqual('disabled');
+        component.requestFinishedFor = 'bar';
+      })
+      .then(() => {
+        expect(component.$el.getAttribute('disabled')).toEqual('disabled');
+      })
+      .then(done)
+      .catch(done.fail);
+  });
 });
diff --git a/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js b/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js
deleted file mode 100644
index ba721bc53c6..00000000000
--- a/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Vue from 'vue';
-import dropdownActionComponent from '~/pipelines/components/graph/dropdown_action_component.vue';
-
-describe('action component', () => {
-  let component;
-
-  beforeEach((done) => {
-    const DropdownActionComponent = Vue.extend(dropdownActionComponent);
-    component = new DropdownActionComponent({
-      propsData: {
-        tooltipText: 'bar',
-        link: 'foo',
-        actionMethod: 'post',
-        actionIcon: 'cancel',
-      },
-    }).$mount();
-
-    Vue.nextTick(done);
-  });
-
-  it('should render a link', () => {
-    expect(component.$el.getAttribute('href')).toEqual('foo');
-  });
-
-  it('should render the provided title as a bootstrap tooltip', () => {
-    expect(component.$el.getAttribute('data-original-title')).toEqual('bar');
-  });
-
-  it('should render an svg', () => {
-    expect(component.$el.querySelector('svg')).toBeDefined();
-  });
-});
diff --git a/spec/javascripts/pipelines/graph/job_component_spec.js b/spec/javascripts/pipelines/graph/job_component_spec.js
index c9677ae209a..073dae56c25 100644
--- a/spec/javascripts/pipelines/graph/job_component_spec.js
+++ b/spec/javascripts/pipelines/graph/job_component_spec.js
@@ -93,17 +93,6 @@ describe('pipeline graph job component', () => {
     });
   });
 
-  describe('dropdown', () => {
-    it('should render the dropdown action icon', () => {
-      component = mountComponent(JobComponent, {
-        job: mockJob,
-        isDropdown: true,
-      });
-
-      expect(component.$el.querySelector('a.ci-action-icon-wrapper')).toBeDefined();
-    });
-  });
-
   it('should render provided class name', () => {
     component = mountComponent(JobComponent, {
       job: mockJob,
diff --git a/spec/javascripts/right_sidebar_spec.js b/spec/javascripts/right_sidebar_spec.js
index 80770a61011..e264b16335f 100644
--- a/spec/javascripts/right_sidebar_spec.js
+++ b/spec/javascripts/right_sidebar_spec.js
@@ -9,8 +9,6 @@ import Sidebar from '~/right_sidebar';
 (function() {
   var $aside, $icon, $labelsIcon, $page, $toggle, assertSidebarState;
 
-  this.sidebar = null;
-
   $aside = null;
 
   $toggle = null;
@@ -43,7 +41,7 @@ import Sidebar from '~/right_sidebar';
       beforeEach(function() {
         loadFixtures(fixtureName);
         mock = new MockAdapter(axios);
-        this.sidebar = new Sidebar();
+        new Sidebar(); // eslint-disable-line no-new
         $aside = $('.right-sidebar');
         $page = $('.layout-page');
         $icon = $aside.find('i');
diff --git a/spec/javascripts/search_autocomplete_spec.js b/spec/javascripts/search_autocomplete_spec.js
index 1a27955983d..4f515f98a7e 100644
--- a/spec/javascripts/search_autocomplete_spec.js
+++ b/spec/javascripts/search_autocomplete_spec.js
@@ -4,7 +4,6 @@ import $ from 'jquery';
 import '~/gl_dropdown';
 import SearchAutocomplete from '~/search_autocomplete';
 import '~/lib/utils/common_utils';
-import * as urlUtils from '~/lib/utils/url_utility';
 
 describe('Search autocomplete dropdown', () => {
   var assertLinks,
@@ -129,9 +128,6 @@ describe('Search autocomplete dropdown', () => {
   beforeEach(function() {
     loadFixtures('static/search_autocomplete.html.raw');
 
-    // Prevent turbolinks from triggering within gl_dropdown
-    spyOn(urlUtils, 'visitUrl').and.returnValue(true);
-
     window.gon = {};
     window.gon.current_user_id = userId;
     window.gon.current_username = userName;
diff --git a/spec/javascripts/settings_panels_spec.js b/spec/javascripts/settings_panels_spec.js
index d433f8c3e07..4fba36bd4de 100644
--- a/spec/javascripts/settings_panels_spec.js
+++ b/spec/javascripts/settings_panels_spec.js
@@ -13,9 +13,9 @@ describe('Settings Panels', () => {
     });
 
     it('should expand linked hash fragment panel', () => {
-      location.hash = '#js-general-pipeline-settings';
+      location.hash = '#autodevops-settings';
 
-      const pipelineSettingsPanel = document.querySelector('#js-general-pipeline-settings');
+      const pipelineSettingsPanel = document.querySelector('#autodevops-settings');
       // Our test environment automatically expands everything so we need to clear that out first
       pipelineSettingsPanel.classList.remove('expanded');
 
diff --git a/spec/javascripts/shortcuts_dashboard_navigation_spec.js b/spec/javascripts/shortcuts_dashboard_navigation_spec.js
index 888b49004bf..7cb201e01d8 100644
--- a/spec/javascripts/shortcuts_dashboard_navigation_spec.js
+++ b/spec/javascripts/shortcuts_dashboard_navigation_spec.js
@@ -1,24 +1,23 @@
 import findAndFollowLink from '~/shortcuts_dashboard_navigation';
-import * as urlUtility from '~/lib/utils/url_utility';
 
 describe('findAndFollowLink', () => {
   it('visits a link when the selector exists', () => {
     const href = '/some/path';
-    const locationSpy = spyOn(urlUtility, 'visitUrl');
+    const visitUrl = spyOnDependency(findAndFollowLink, 'visitUrl');
 
     setFixtures(`<a class="my-shortcut" href="${href}">link</a>`);
 
     findAndFollowLink('.my-shortcut');
 
-    expect(locationSpy).toHaveBeenCalledWith(href);
+    expect(visitUrl).toHaveBeenCalledWith(href);
   });
 
   it('does not throw an exception when the selector does not exist', () => {
-    const locationSpy = spyOn(urlUtility, 'visitUrl');
+    const visitUrl = spyOnDependency(findAndFollowLink, 'visitUrl');
 
     // this should not throw an exception
     findAndFollowLink('.this-selector-does-not-exist');
 
-    expect(locationSpy).not.toHaveBeenCalled();
+    expect(visitUrl).not.toHaveBeenCalled();
   });
 });
diff --git a/spec/javascripts/shortcuts_issuable_spec.js b/spec/javascripts/shortcuts_issuable_spec.js
index b0d714cbefb..d73608ed0ed 100644
--- a/spec/javascripts/shortcuts_issuable_spec.js
+++ b/spec/javascripts/shortcuts_issuable_spec.js
@@ -4,7 +4,7 @@ import ShortcutsIssuable from '~/shortcuts_issuable';
 
 initCopyAsGFM();
 
-describe('ShortcutsIssuable', () => {
+describe('ShortcutsIssuable', function () {
   const fixtureName = 'merge_requests/diff_comment.html.raw';
   preloadFixtures(fixtureName);
   beforeEach(() => {
diff --git a/spec/javascripts/sidebar/sidebar_mediator_spec.js b/spec/javascripts/sidebar/sidebar_mediator_spec.js
index afa18cc127e..da950258a94 100644
--- a/spec/javascripts/sidebar/sidebar_mediator_spec.js
+++ b/spec/javascripts/sidebar/sidebar_mediator_spec.js
@@ -1,12 +1,11 @@
 import _ from 'underscore';
 import Vue from 'vue';
-import * as urlUtils from '~/lib/utils/url_utility';
 import SidebarMediator from '~/sidebar/sidebar_mediator';
 import SidebarStore from '~/sidebar/stores/sidebar_store';
 import SidebarService from '~/sidebar/services/sidebar_service';
 import Mock from './mock_data';
 
-describe('Sidebar mediator', () => {
+describe('Sidebar mediator', function() {
   beforeEach(() => {
     Vue.http.interceptors.push(Mock.sidebarMockInterceptor);
     this.mediator = new SidebarMediator(Mock.mediator);
@@ -87,12 +86,12 @@ describe('Sidebar mediator', () => {
     const moveToProjectId = 7;
     this.mediator.store.setMoveToProjectId(moveToProjectId);
     spyOn(this.mediator.service, 'moveIssue').and.callThrough();
-    spyOn(urlUtils, 'visitUrl');
+    const visitUrl = spyOnDependency(SidebarMediator, 'visitUrl');
 
     this.mediator.moveIssue()
       .then(() => {
         expect(this.mediator.service.moveIssue).toHaveBeenCalledWith(moveToProjectId);
-        expect(urlUtils.visitUrl).toHaveBeenCalledWith('/root/some-project/issues/5');
+        expect(visitUrl).toHaveBeenCalledWith('/root/some-project/issues/5');
       })
       .then(done)
       .catch(done.fail);
diff --git a/spec/javascripts/sidebar/sidebar_move_issue_spec.js b/spec/javascripts/sidebar/sidebar_move_issue_spec.js
index d8e636cbdf0..a3fb965fbab 100644
--- a/spec/javascripts/sidebar/sidebar_move_issue_spec.js
+++ b/spec/javascripts/sidebar/sidebar_move_issue_spec.js
@@ -7,7 +7,7 @@ import SidebarService from '~/sidebar/services/sidebar_service';
 import SidebarMoveIssue from '~/sidebar/lib/sidebar_move_issue';
 import Mock from './mock_data';
 
-describe('SidebarMoveIssue', () => {
+describe('SidebarMoveIssue', function () {
   beforeEach(() => {
     Vue.http.interceptors.push(Mock.sidebarMockInterceptor);
     this.mediator = new SidebarMediator(Mock.mediator);
diff --git a/spec/javascripts/sidebar/sidebar_store_spec.js b/spec/javascripts/sidebar/sidebar_store_spec.js
index 3591f96ff87..08b112a54ba 100644
--- a/spec/javascripts/sidebar/sidebar_store_spec.js
+++ b/spec/javascripts/sidebar/sidebar_store_spec.js
@@ -31,7 +31,7 @@ const PARTICIPANT_LIST = [
   { ...PARTICIPANT, id: 3 },
 ];
 
-describe('Sidebar store', () => {
+describe('Sidebar store', function () {
   beforeEach(() => {
     this.store = new SidebarStore({
       currentUser: {
diff --git a/spec/javascripts/test_bundle.js b/spec/javascripts/test_bundle.js
index 14bff05e537..bcd15f5eae2 100644
--- a/spec/javascripts/test_bundle.js
+++ b/spec/javascripts/test_bundle.js
@@ -1,4 +1,5 @@
-/* eslint-disable jasmine/no-global-setup */
+/* eslint-disable jasmine/no-global-setup, jasmine/no-unsafe-spy, no-underscore-dangle */
+
 import $ from 'jquery';
 import 'vendor/jasmine-jquery';
 import '~/commons';
@@ -55,6 +56,17 @@ window.addEventListener('unhandledrejection', event => {
   console.error(event.reason.stack || event.reason);
 });
 
+// Add global function to spy on a module's dependencies via rewire
+window.spyOnDependency = (module, name) => {
+  const dependency = module.__GetDependency__(name);
+  const spy = jasmine.createSpy(name, dependency);
+  module.__Rewire__(name, spy);
+  return spy;
+};
+
+// Reset any rewired modules after each test (see babel-plugin-rewire)
+afterEach(__rewire_reset_all__); // eslint-disable-line
+
 // HACK: Chrome 59 disconnects if there are too many synchronous tests in a row
 // because it appears to lock up the thread that communicates to Karma's socket
 // This async beforeEach gets called on every spec and releases the JS thread long
diff --git a/spec/javascripts/todos_spec.js b/spec/javascripts/todos_spec.js
index 898bbb3819b..e74f4bdef7e 100644
--- a/spec/javascripts/todos_spec.js
+++ b/spec/javascripts/todos_spec.js
@@ -1,5 +1,4 @@
 import $ from 'jquery';
-import * as urlUtils from '~/lib/utils/url_utility';
 import Todos from '~/pages/dashboard/todos/index/todos';
 import '~/lib/utils/common_utils';
 
@@ -18,7 +17,7 @@ describe('Todos', () => {
     it('opens the todo url', (done) => {
       const todoLink = todoItem.dataset.url;
 
-      spyOn(urlUtils, 'visitUrl').and.callFake((url) => {
+      spyOnDependency(Todos, 'visitUrl').and.callFake((url) => {
         expect(url).toEqual(todoLink);
         done();
       });
@@ -33,7 +32,7 @@ describe('Todos', () => {
 
       beforeEach(() => {
         metakeyEvent = $.Event('click', { keyCode: 91, ctrlKey: true });
-        visitUrlSpy = spyOn(urlUtils, 'visitUrl').and.callFake(() => {});
+        visitUrlSpy = spyOnDependency(Todos, 'visitUrl').and.callFake(() => {});
         windowOpenSpy = spyOn(window, 'open').and.callFake(() => {});
       });
 
diff --git a/spec/javascripts/u2f/authenticate_spec.js b/spec/javascripts/u2f/authenticate_spec.js
index 39c47a5c06d..d84b13b07c4 100644
--- a/spec/javascripts/u2f/authenticate_spec.js
+++ b/spec/javascripts/u2f/authenticate_spec.js
@@ -3,7 +3,7 @@ import U2FAuthenticate from '~/u2f/authenticate';
 import 'vendor/u2f';
 import MockU2FDevice from './mock_u2f_device';
 
-describe('U2FAuthenticate', () => {
+describe('U2FAuthenticate', function () {
   preloadFixtures('u2f/authenticate.html.raw');
 
   beforeEach((done) => {
diff --git a/spec/javascripts/u2f/register_spec.js b/spec/javascripts/u2f/register_spec.js
index 136b4cad737..d9383314891 100644
--- a/spec/javascripts/u2f/register_spec.js
+++ b/spec/javascripts/u2f/register_spec.js
@@ -3,7 +3,7 @@ import U2FRegister from '~/u2f/register';
 import 'vendor/u2f';
 import MockU2FDevice from './mock_u2f_device';
 
-describe('U2FRegister', () => {
+describe('U2FRegister', function () {
   preloadFixtures('u2f/register.html.raw');
 
   beforeEach((done) => {
diff --git a/spec/javascripts/vue_mr_widget/components/deployment_spec.js b/spec/javascripts/vue_mr_widget/components/deployment_spec.js
index ff8d54c029f..c82ba61a5b1 100644
--- a/spec/javascripts/vue_mr_widget/components/deployment_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/deployment_spec.js
@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import * as urlUtils from '~/lib/utils/url_utility';
 import deploymentComponent from '~/vue_merge_request_widget/components/deployment.vue';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 import { getTimeago } from '~/lib/utils/datetime_utility';
@@ -117,13 +116,13 @@ describe('Deployment component', () => {
       it('should show a confirm dialog and call service.stopEnvironment when confirmed', (done) => {
         spyOn(window, 'confirm').and.returnValue(true);
         spyOn(MRWidgetService, 'stopEnvironment').and.returnValue(returnPromise(true));
-        spyOn(urlUtils, 'visitUrl').and.returnValue(true);
+        const visitUrl = spyOnDependency(deploymentComponent, 'visitUrl').and.returnValue(true);
         vm = mockStopEnvironment();
 
         expect(window.confirm).toHaveBeenCalled();
         expect(MRWidgetService.stopEnvironment).toHaveBeenCalledWith(deploymentMockData.stop_url);
         setTimeout(() => {
-          expect(urlUtils.visitUrl).toHaveBeenCalledWith(url);
+          expect(visitUrl).toHaveBeenCalledWith(url);
           done();
         }, 333);
       });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
index 300b7882d03..81c16593eb4 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import ReadyToMerge from '~/vue_merge_request_widget/components/states/ready_to_merge.vue';
 import eventHub from '~/vue_merge_request_widget/event_hub';
-import * as simplePoll from '~/lib/utils/simple_poll';
 
 const commitMessage = 'This is the commit message';
 const commitMessageWithDescription = 'This is the commit message description';
@@ -355,9 +354,9 @@ describe('ReadyToMerge', () => {
 
     describe('initiateMergePolling', () => {
       it('should call simplePoll', () => {
-        spyOn(simplePoll, 'default');
+        const simplePoll = spyOnDependency(ReadyToMerge, 'simplePoll');
         vm.initiateMergePolling();
-        expect(simplePoll.default).toHaveBeenCalled();
+        expect(simplePoll).toHaveBeenCalled();
       });
     });
 
@@ -457,11 +456,11 @@ describe('ReadyToMerge', () => {
     describe('initiateRemoveSourceBranchPolling', () => {
       it('should emit event and call simplePoll', () => {
         spyOn(eventHub, '$emit');
-        spyOn(simplePoll, 'default');
+        const simplePoll = spyOnDependency(ReadyToMerge, 'simplePoll');
 
         vm.initiateRemoveSourceBranchPolling();
         expect(eventHub.$emit).toHaveBeenCalledWith('SetBranchRemoveFlag', [true]);
-        expect(simplePoll.default).toHaveBeenCalled();
+        expect(simplePoll).toHaveBeenCalled();
       });
     });
 
@@ -524,18 +523,20 @@ describe('ReadyToMerge', () => {
     });
 
     describe('when user can merge and can delete branch', () => {
+      let customVm;
+
       beforeEach(() => {
-        this.customVm = createComponent({
+        customVm = createComponent({
           mr: { canRemoveSourceBranch: true },
         });
       });
 
       it('isRemoveSourceBranchButtonDisabled should be false', () => {
-        expect(this.customVm.isRemoveSourceBranchButtonDisabled).toBe(false);
+        expect(customVm.isRemoveSourceBranchButtonDisabled).toBe(false);
       });
 
       it('should be enabled in rendered output', () => {
-        const checkboxElement = this.customVm.$el.querySelector('#remove-source-branch-input');
+        const checkboxElement = customVm.$el.querySelector('#remove-source-branch-input');
         expect(checkboxElement).not.toBeNull();
       });
     });
diff --git a/spec/javascripts/vue_shared/components/ci_icon_spec.js b/spec/javascripts/vue_shared/components/ci_icon_spec.js
index d8664408595..423bc746a22 100644
--- a/spec/javascripts/vue_shared/components/ci_icon_spec.js
+++ b/spec/javascripts/vue_shared/components/ci_icon_spec.js
@@ -1,139 +1,122 @@
 import Vue from 'vue';
 import ciIcon from '~/vue_shared/components/ci_icon.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('CI Icon component', () => {
-  let CiIcon;
-  beforeEach(() => {
-    CiIcon = Vue.extend(ciIcon);
+  const Component = Vue.extend(ciIcon);
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
   });
 
   it('should render a span element with an svg', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_success',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_success',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.tagName).toEqual('SPAN');
-    expect(component.$el.querySelector('span > svg')).toBeDefined();
+    expect(vm.$el.tagName).toEqual('SPAN');
+    expect(vm.$el.querySelector('span > svg')).toBeDefined();
   });
 
   it('should render a success status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_success',
-          group: 'success',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_success',
+        group: 'success',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-success')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-success')).toEqual(true);
   });
 
   it('should render a failed status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_failed',
-          group: 'failed',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_failed',
+        group: 'failed',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-failed')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-failed')).toEqual(true);
   });
 
   it('should render success with warnings status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_warning',
-          group: 'warning',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_warning',
+        group: 'warning',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-warning')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-warning')).toEqual(true);
   });
 
   it('should render pending status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_pending',
-          group: 'pending',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_pending',
+        group: 'pending',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-pending')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-pending')).toEqual(true);
   });
 
   it('should render running status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_running',
-          group: 'running',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_running',
+        group: 'running',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-running')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-running')).toEqual(true);
   });
 
   it('should render created status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_created',
-          group: 'created',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_created',
+        group: 'created',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-created')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-created')).toEqual(true);
   });
 
   it('should render skipped status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_skipped',
-          group: 'skipped',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_skipped',
+        group: 'skipped',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-skipped')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-skipped')).toEqual(true);
   });
 
   it('should render canceled status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_canceled',
-          group: 'canceled',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_canceled',
+        group: 'canceled',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-canceled')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-canceled')).toEqual(true);
   });
 
   it('should render status for manual action', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_manual',
-          group: 'manual',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_manual',
+        group: 'manual',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-manual')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-manual')).toEqual(true);
   });
 });
diff --git a/spec/javascripts/vue_shared/components/clipboard_button_spec.js b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
index f598b1afa74..97f0fbb04db 100644
--- a/spec/javascripts/vue_shared/components/clipboard_button_spec.js
+++ b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
@@ -3,10 +3,10 @@ import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('clipboard button', () => {
+  const Component = Vue.extend(clipboardButton);
   let vm;
 
   beforeEach(() => {
-    const Component = Vue.extend(clipboardButton);
     vm = mountComponent(Component, {
       text: 'copy me',
       title: 'Copy this value into Clipboard!',
diff --git a/spec/javascripts/vue_shared/components/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js
index ed66361bfc3..7189e8cfcfa 100644
--- a/spec/javascripts/vue_shared/components/commit_spec.js
+++ b/spec/javascripts/vue_shared/components/commit_spec.js
@@ -55,7 +55,6 @@ describe('Commit component', () => {
           path: '/jschatz1',
           username: 'jschatz1',
         },
-        commitIconSvg: '<svg></svg>',
       };
 
       component = mountComponent(CommitComponent, props);
@@ -82,8 +81,10 @@ describe('Commit component', () => {
       expect(component.$el.querySelector('.commit-sha').textContent).toContain(props.shortSha);
     });
 
-    it('should render the given commitIconSvg', () => {
-      expect(component.$el.querySelector('.js-commit-icon').children).toContain('svg');
+    it('should render icon for commit', () => {
+      expect(
+        component.$el.querySelector('.js-commit-icon use').getAttribute('xlink:href'),
+      ).toContain('commit');
     });
 
     describe('Given commit title and author props', () => {
diff --git a/spec/javascripts/vue_shared/components/expand_button_spec.js b/spec/javascripts/vue_shared/components/expand_button_spec.js
index f19589d3b75..af9693c48fd 100644
--- a/spec/javascripts/vue_shared/components/expand_button_spec.js
+++ b/spec/javascripts/vue_shared/components/expand_button_spec.js
@@ -3,10 +3,10 @@ import expandButton from '~/vue_shared/components/expand_button.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('expand button', () => {
+  const Component = Vue.extend(expandButton);
   let vm;
 
   beforeEach(() => {
-    const Component = Vue.extend(expandButton);
     vm = mountComponent(Component, {
       slots: {
         expanded: '<p>Expanded!</p>',
@@ -22,7 +22,7 @@ describe('expand button', () => {
     expect(vm.$el.textContent.trim()).toEqual('...');
   });
 
-  it('hides expander on click', (done) => {
+  it('hides expander on click', done => {
     vm.$el.querySelector('button').click();
     vm.$nextTick(() => {
       expect(vm.$el.querySelector('button').getAttribute('style')).toEqual('display: none;');
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
index 6fe95153204..e8685ab48be 100644
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js
@@ -73,6 +73,22 @@ describe('BaseComponent', () => {
         expect(vm.$emit).toHaveBeenCalledWith('onLabelClick', mockLabels[0]);
       });
     });
+
+    describe('handleCollapsedValueClick', () => {
+      it('emits toggleCollapse event on component', () => {
+        spyOn(vm, '$emit');
+        vm.handleCollapsedValueClick();
+        expect(vm.$emit).toHaveBeenCalledWith('toggleCollapse');
+      });
+    });
+
+    describe('handleDropdownHidden', () => {
+      it('emits onDropdownClose event on component', () => {
+        spyOn(vm, '$emit');
+        vm.handleDropdownHidden();
+        expect(vm.$emit).toHaveBeenCalledWith('onDropdownClose');
+      });
+    });
   });
 
   describe('mounted', () => {
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
index 39040670a87..da74595bcdc 100644
--- 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
@@ -56,6 +56,16 @@ describe('DropdownValueCollapsedComponent', () => {
     });
   });
 
+  describe('methods', () => {
+    describe('handleClick', () => {
+      it('emits onValueClick event on component', () => {
+        spyOn(vm, '$emit');
+        vm.handleClick();
+        expect(vm.$emit).toHaveBeenCalledWith('onValueClick');
+      });
+    });
+  });
+
   describe('template', () => {
     it('renders component container element with tooltip`', () => {
       expect(vm.$el.dataset.placement).toBe('left');