Merge branch 'himkp-jest-vue-shared-2' into 'master'

Migrate specs in vue_shared, vuex_shared, vue_mr_widget to Jest

Closes #194258 and #194260

See merge request gitlab-org/gitlab!32751

ee/spec/javascripts/issuable/related_issues/stores/related_issues_store_spec.js

@@ -6,7 +6,7 @@ import {
   issuable3,
   issuable4,
   issuable5,
-} from 'spec/vue_shared/components/issue/related_issuable_mock_data';
+} from 'jest/vue_shared/components/issue/related_issuable_mock_data';
 
 describe('RelatedIssuesStore', () => {
   let store;

spec/javascripts/vue_mr_widget/components/mr_widget_author_spec.js → spec/frontend/vue_mr_widget/components/mr_widget_author_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import MrWidgetAuthor from '~/vue_merge_request_widget/components/mr_widget_author.vue';
 
 describe('MrWidgetAuthor', () => {

spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js → spec/frontend/vue_mr_widget/components/mr_widget_author_time_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import MrWidgetAuthorTime from '~/vue_merge_request_widget/components/mr_widget_author_time.vue';
 
 describe('MrWidgetAuthorTime', () => {

spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js → spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import headerComponent from '~/vue_merge_request_widget/components/mr_widget_header.vue';
 
 describe('MRWidgetHeader', () => {

spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js → spec/frontend/vue_mr_widget/components/mr_widget_memory_usage_spec.js

 import Vue from 'vue';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
 import MemoryUsage from '~/vue_merge_request_widget/components/deployment/memory_usage.vue';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 
@@ -59,12 +61,20 @@ const messages = {
 describe('MemoryUsage', () => {
   let vm;
   let el;
+  let mock;
 
   beforeEach(() => {
+    mock = new MockAdapter(axios);
+    mock.onGet(`${url}.json`).reply(200);
+
     vm = createComponent();
     el = vm.$el;
   });
 
+  afterEach(() => {
+    mock.restore();
+  });
+
   describe('data', () => {
     it('should have default data', () => {
       const data = MemoryUsage.data();
@@ -127,6 +137,9 @@ describe('MemoryUsage', () => {
 
     describe('computeGraphData', () => {
       it('should populate sparkline graph', () => {
+        // ignore BoostrapVue warnings
+        jest.spyOn(console, 'warn').mockImplementation();
+
         vm.computeGraphData(metrics, deployment_time);
         const { hasMetrics, memoryMetrics, deploymentTime, memoryFrom, memoryTo } = vm;
 
@@ -147,15 +160,15 @@ describe('MemoryUsage', () => {
         });
 
       it('should load metrics data using MRWidgetService', done => {
-        spyOn(MRWidgetService, 'fetchMetrics').and.returnValue(returnServicePromise(true));
-        spyOn(vm, 'computeGraphData');
+        jest.spyOn(MRWidgetService, 'fetchMetrics').mockReturnValue(returnServicePromise(true));
+        jest.spyOn(vm, 'computeGraphData').mockImplementation(() => {});
 
         vm.loadMetrics();
-        setTimeout(() => {
+        setImmediate(() => {
           expect(MRWidgetService.fetchMetrics).toHaveBeenCalledWith(url);
           expect(vm.computeGraphData).toHaveBeenCalledWith(metrics, deployment_time);
           done();
-        }, 333);
+        });
       });
     });
   });
@@ -182,6 +195,9 @@ describe('MemoryUsage', () => {
     });
 
     it('should show deployment memory usage when metrics are loaded', done => {
+      // ignore BoostrapVue warnings
+      jest.spyOn(console, 'warn').mockImplementation();
+
       vm.loadingMetrics = false;
       vm.hasMetrics = true;
       vm.loadFailed = false;

spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js → spec/frontend/vue_mr_widget/components/mr_widget_merge_help_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue';
 
 describe('MRWidgetMergeHelp', () => {

spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js → spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { trimText } from 'spec/helpers/text_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { trimText } from 'helpers/text_helper';
 import pipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue';
 import mockData from '../mock_data';
 

spec/javascripts/vue_mr_widget/components/mr_widget_rebase_spec.js → spec/frontend/vue_mr_widget/components/mr_widget_rebase_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 import component from '~/vue_merge_request_widget/components/states/mr_widget_rebase.vue';
 
@@ -105,7 +105,7 @@ describe('Merge request widget rebase component', () => {
 
   describe('methods', () => {
     it('checkRebaseStatus', done => {
-      spyOn(eventHub, '$emit');
+      jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
       vm = mountComponent(Component, {
         mr: {},
         service: {

spec/javascripts/vue_mr_widget/components/mr_widget_related_links_spec.js → spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import relatedLinksComponent from '~/vue_merge_request_widget/components/mr_widget_related_links.vue';
 
 describe('MRWidgetRelatedLinks', () => {

spec/javascripts/vue_mr_widget/components/mr_widget_status_icon_spec.js → spec/frontend/vue_mr_widget/components/mr_widget_status_icon_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import mrStatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
 
 describe('MR widget status icon component', () => {

spec/javascripts/vue_mr_widget/components/review_app_link_spec.js → spec/frontend/vue_mr_widget/components/review_app_link_spec.js

 import Vue from 'vue';
-import { mockTracking, triggerEvent } from 'spec/helpers/tracking_helper';
+import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
 import component from '~/vue_merge_request_widget/components/review_app_link.vue';
 import mountComponent from '../../helpers/vue_mount_component_helper';
 
@@ -42,7 +42,7 @@ describe('review app link', () => {
   });
 
   it('tracks an event when clicked', () => {
-    const spy = mockTracking('_category_', el, spyOn);
+    const spy = mockTracking('_category_', el, jest.spyOn);
     triggerEvent(el);
 
     expect(spy).toHaveBeenCalledWith('_category_', 'open_review_app', {

spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js → spec/frontend/vue_mr_widget/components/states/mr_widget_archived_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import archivedComponent from '~/vue_merge_request_widget/components/states/mr_widget_archived.vue';
 
 describe('MRWidgetArchived', () => {

spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js → spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { trimText } from 'spec/helpers/text_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { trimText } from 'helpers/text_helper';
 import autoMergeEnabledComponent from '~/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 import eventHub from '~/vue_merge_request_widget/event_hub';
@@ -14,7 +14,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
 
   beforeEach(() => {
     const Component = Vue.extend(autoMergeEnabledComponent);
-    spyOn(eventHub, '$emit');
+    jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
 
     vm = mountComponent(Component, {
       mr: {
@@ -103,7 +103,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
         const mrObj = {
           is_new_mr_data: true,
         };
-        spyOn(vm.service, 'cancelAutomaticMerge').and.returnValue(
+        jest.spyOn(vm.service, 'cancelAutomaticMerge').mockReturnValue(
           new Promise(resolve => {
             resolve({
               data: mrObj,
@@ -112,17 +112,17 @@ describe('MRWidgetAutoMergeEnabled', () => {
         );
 
         vm.cancelAutomaticMerge();
-        setTimeout(() => {
+        setImmediate(() => {
           expect(vm.isCancellingAutoMerge).toBeTruthy();
           expect(eventHub.$emit).toHaveBeenCalledWith('UpdateWidgetData', mrObj);
           done();
-        }, 333);
+        });
       });
     });
 
     describe('removeSourceBranch', () => {
       it('should set flag and call service then request main component to update the widget', done => {
-        spyOn(vm.service, 'merge').and.returnValue(
+        jest.spyOn(vm.service, 'merge').mockReturnValue(
           Promise.resolve({
             data: {
               status: MWPS_MERGE_STRATEGY,
@@ -131,7 +131,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
         );
 
         vm.removeSourceBranch();
-        setTimeout(() => {
+        setImmediate(() => {
           expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
           expect(vm.service.merge).toHaveBeenCalledWith({
             sha,
@@ -139,7 +139,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
             should_remove_source_branch: true,
           });
           done();
-        }, 333);
+        });
       });
     });
   });

spec/javascripts/vue_mr_widget/components/states/mr_widget_checking_spec.js → spec/frontend/vue_mr_widget/components/states/mr_widget_checking_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import checkingComponent from '~/vue_merge_request_widget/components/states/mr_widget_checking.vue';
 
 describe('MRWidgetChecking', () => {

spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js → spec/frontend/vue_mr_widget/components/states/mr_widget_closed_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import closedComponent from '~/vue_merge_request_widget/components/states/mr_widget_closed.vue';
 
 describe('MRWidgetClosed', () => {

spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js → spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js

 import $ from 'jquery';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { removeBreakLine } from 'spec/helpers/text_helper';
+import { removeBreakLine } from 'helpers/text_helper';
 import ConflictsComponent from '~/vue_merge_request_widget/components/states/mr_widget_conflicts.vue';
+import { TEST_HOST } from 'helpers/test_constants';
 
 describe('MRWidgetConflicts', () => {
   let vm;
@@ -16,7 +17,7 @@ describe('MRWidgetConflicts', () => {
   }
 
   beforeEach(() => {
-    spyOn($.fn, 'popover').and.callThrough();
+    jest.spyOn($.fn, 'popover');
   });
 
   afterEach(() => {
@@ -185,7 +186,7 @@ describe('MRWidgetConflicts', () => {
         mr: {
           canMerge: true,
           canPushToSourceBranch: true,
-          conflictResolutionPath: gl.TEST_HOST,
+          conflictResolutionPath: TEST_HOST,
           sourceBranchProtected: true,
           conflictsDocsPath: '',
         },
@@ -207,7 +208,7 @@ describe('MRWidgetConflicts', () => {
         mr: {
           canMerge: true,
           canPushToSourceBranch: true,
-          conflictResolutionPath: gl.TEST_HOST,
+          conflictResolutionPath: TEST_HOST,
           sourceBranchProtected: false,
           conflictsDocsPath: '',
         },

spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js → spec/frontend/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import failedToMergeComponent from '~/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 
@@ -11,9 +11,9 @@ describe('MRWidgetFailedToMerge', () => {
 
   beforeEach(() => {
     Component = Vue.extend(failedToMergeComponent);
-    spyOn(eventHub, '$emit');
-    spyOn(window, 'setInterval').and.returnValue(dummyIntervalId);
-    spyOn(window, 'clearInterval').and.stub();
+    jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
+    jest.spyOn(window, 'setInterval').mockReturnValue(dummyIntervalId);
+    jest.spyOn(window, 'clearInterval').mockImplementation();
     mr = {
       mergeError: 'Merge error happened',
     };
@@ -83,7 +83,7 @@ describe('MRWidgetFailedToMerge', () => {
 
     describe('updateTimer', () => {
       it('should update timer and emit event when timer end', () => {
-        spyOn(vm, 'refresh');
+        jest.spyOn(vm, 'refresh').mockImplementation(() => {});
 
         expect(vm.timer).toEqual(10);
 

spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js → spec/frontend/vue_mr_widget/components/states/mr_widget_merged_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import mergedComponent from '~/vue_merge_request_widget/components/states/mr_widget_merged.vue';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 
@@ -52,7 +52,7 @@ describe('MRWidgetMerged', () => {
       removeSourceBranch() {},
     };
 
-    spyOn(eventHub, '$emit');
+    jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
 
     vm = mountComponent(Component, { mr, service });
   });
@@ -124,7 +124,7 @@ describe('MRWidgetMerged', () => {
   describe('methods', () => {
     describe('removeSourceBranch', () => {
       it('should set flag and call service then request main component to update the widget', done => {
-        spyOn(vm.service, 'removeSourceBranch').and.returnValue(
+        jest.spyOn(vm.service, 'removeSourceBranch').mockReturnValue(
           new Promise(resolve => {
             resolve({
               data: {
@@ -135,14 +135,14 @@ describe('MRWidgetMerged', () => {
         );
 
         vm.removeSourceBranch();
-        setTimeout(() => {
-          const args = eventHub.$emit.calls.argsFor(0);
+        setImmediate(() => {
+          const args = eventHub.$emit.mock.calls[0];
 
           expect(vm.isMakingRequest).toEqual(true);
           expect(args[0]).toEqual('MRWidgetUpdateRequested');
           expect(args[1]).not.toThrow();
           done();
-        }, 333);
+        });
       });
     });
   });

spec/javascripts/vue_mr_widget/components/states/mr_widget_merging_spec.js → spec/frontend/vue_mr_widget/components/states/mr_widget_merging_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import mergingComponent from '~/vue_merge_request_widget/components/states/mr_widget_merging.vue';
 
 describe('MRWidgetMerging', () => {

spec/javascripts/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js → spec/frontend/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import missingBranchComponent from '~/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue';
 
 describe('MRWidgetMissingBranch', () => {

spec/javascripts/vue_mr_widget/components/states/mr_widget_not_allowed_spec.js → spec/frontend/vue_mr_widget/components/states/mr_widget_not_allowed_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import notAllowedComponent from '~/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue';
 
 describe('MRWidgetNotAllowed', () => {

spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js → spec/frontend/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { removeBreakLine } from 'spec/helpers/text_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { removeBreakLine } from 'helpers/text_helper';
 import pipelineBlockedComponent from '~/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue';
 
 describe('MRWidgetPipelineBlocked', () => {

spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js → spec/frontend/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js

 import Vue from 'vue';
-import { removeBreakLine } from 'spec/helpers/text_helper';
+import { removeBreakLine } from 'helpers/text_helper';
 import PipelineFailed from '~/vue_merge_request_widget/components/states/pipeline_failed.vue';
 
 describe('PipelineFailed', () => {

spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js → spec/frontend/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { removeBreakLine } from 'spec/helpers/text_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { removeBreakLine } from 'helpers/text_helper';
 import ShaMismatch from '~/vue_merge_request_widget/components/states/sha_mismatch.vue';
 
 describe('ShaMismatch', () => {

spec/javascripts/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js → spec/frontend/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import UnresolvedDiscussions from '~/vue_merge_request_widget/components/states/unresolved_discussions.vue';
+import { TEST_HOST } from 'helpers/test_constants';
 
 describe('UnresolvedDiscussions', () => {
   const Component = Vue.extend(UnresolvedDiscussions);
@@ -14,7 +15,7 @@ describe('UnresolvedDiscussions', () => {
     beforeEach(() => {
       vm = mountComponent(Component, {
         mr: {
-          createIssueToResolveDiscussionsPath: gl.TEST_HOST,
+          createIssueToResolveDiscussionsPath: TEST_HOST,
         },
       });
     });
@@ -25,7 +26,7 @@ describe('UnresolvedDiscussions', () => {
       );
 
       expect(vm.$el.innerText).toContain('Create an issue to resolve them later');
-      expect(vm.$el.querySelector('.js-create-issue').getAttribute('href')).toEqual(gl.TEST_HOST);
+      expect(vm.$el.querySelector('.js-create-issue').getAttribute('href')).toEqual(TEST_HOST);
     });
   });
 

spec/javascripts/vue_mr_widget/components/states/mr_widget_wip_spec.js → spec/frontend/vue_mr_widget/components/states/mr_widget_wip_spec.js

 import Vue from 'vue';
 import WorkInProgress from '~/vue_merge_request_widget/components/states/work_in_progress.vue';
 import eventHub from '~/vue_merge_request_widget/event_hub';
+import createFlash from '~/flash';
+
+jest.mock('~/flash');
 
 const createComponent = () => {
   const Component = Vue.extend(WorkInProgress);
@@ -47,9 +50,8 @@ describe('Wip', () => {
       it('should make a request to service and handle response', done => {
         const vm = createComponent();
 
-        const flashSpy = spyOnDependency(WorkInProgress, 'createFlash').and.returnValue(true);
-        spyOn(eventHub, '$emit');
-        spyOn(vm.service, 'removeWIP').and.returnValue(
+        jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
+        jest.spyOn(vm.service, 'removeWIP').mockReturnValue(
           new Promise(resolve => {
             resolve({
               data: mrObj,
@@ -58,12 +60,15 @@ describe('Wip', () => {
         );
 
         vm.handleRemoveWIP();
-        setTimeout(() => {
+        setImmediate(() => {
           expect(vm.isMakingRequest).toBeTruthy();
           expect(eventHub.$emit).toHaveBeenCalledWith('UpdateWidgetData', mrObj);
-          expect(flashSpy).toHaveBeenCalledWith('The merge request can now be merged.', 'notice');
+          expect(createFlash).toHaveBeenCalledWith(
+            'The merge request can now be merged.',
+            'notice',
+          );
           done();
-        }, 333);
+        });
       });
     });
   });

spec/javascripts/vue_shared/components/file_finder/index_spec.js → spec/frontend/vue_shared/components/file_finder/index_spec.js

 import Vue from 'vue';
 import Mousetrap from 'mousetrap';
 import { file } from 'jest/ide/helpers';
-import timeoutPromise from 'spec/helpers/set_timeout_promise_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import FindFileComponent from '~/vue_shared/components/file_finder/index.vue';
 import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 
@@ -48,7 +48,7 @@ describe('File finder item spec', () => {
         ],
       });
 
-      setTimeout(done);
+      setImmediate(done);
     });
 
     it('renders list of blobs', () => {
@@ -60,7 +60,7 @@ describe('File finder item spec', () => {
     it('filters entries', done => {
       vm.searchText = 'index';
 
-      setTimeout(() => {
+      setImmediate(() => {
         expect(vm.$el.textContent).toContain('index.js');
         expect(vm.$el.textContent).not.toContain('component.js');
 
@@ -71,7 +71,7 @@ describe('File finder item spec', () => {
     it('shows clear button when searchText is not empty', done => {
       vm.searchText = 'index';
 
-      setTimeout(() => {
+      setImmediate(() => {
         expect(vm.$el.querySelector('.dropdown-input').classList).toContain('has-value');
         expect(vm.$el.querySelector('.dropdown-input-search').classList).toContain('hidden');
 
@@ -82,11 +82,11 @@ describe('File finder item spec', () => {
     it('clear button resets searchText', done => {
       vm.searchText = 'index';
 
-      timeoutPromise()
+      waitForPromises()
         .then(() => {
           vm.$el.querySelector('.dropdown-input-clear').click();
         })
-        .then(timeoutPromise)
+        .then(waitForPromises)
         .then(() => {
           expect(vm.searchText).toBe('');
         })
@@ -95,14 +95,14 @@ describe('File finder item spec', () => {
     });
 
     it('clear button focues search input', done => {
-      spyOn(vm.$refs.searchInput, 'focus');
+      jest.spyOn(vm.$refs.searchInput, 'focus').mockImplementation(() => {});
       vm.searchText = 'index';
 
-      timeoutPromise()
+      waitForPromises()
         .then(() => {
           vm.$el.querySelector('.dropdown-input-clear').click();
         })
-        .then(timeoutPromise)
+        .then(waitForPromises)
         .then(() => {
           expect(vm.$refs.searchInput.focus).toHaveBeenCalled();
         })
@@ -114,7 +114,7 @@ describe('File finder item spec', () => {
       it('returns 1 when no filtered entries exist', done => {
         vm.searchText = 'testing 123';
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(vm.listShowCount).toBe(1);
 
           done();
@@ -134,7 +134,7 @@ describe('File finder item spec', () => {
       it('returns 33 when entries dont exist', done => {
         vm.searchText = 'testing 123';
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(vm.listHeight).toBe(33);
 
           done();
@@ -146,7 +146,7 @@ describe('File finder item spec', () => {
       it('returns length of filtered blobs', done => {
         vm.searchText = 'index';
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(vm.filteredBlobsLength).toBe(1);
 
           done();
@@ -160,7 +160,7 @@ describe('File finder item spec', () => {
           vm.focusedIndex = 1;
           vm.searchText = 'test';
 
-          setTimeout(() => {
+          setImmediate(() => {
             expect(vm.focusedIndex).toBe(0);
 
             done();
@@ -173,11 +173,11 @@ describe('File finder item spec', () => {
           vm.searchText = 'test';
           vm.visible = true;
 
-          timeoutPromise()
+          waitForPromises()
             .then(() => {
               vm.visible = false;
             })
-            .then(timeoutPromise)
+            .then(waitForPromises)
             .then(() => {
               expect(vm.searchText).toBe('');
             })
@@ -189,7 +189,7 @@ describe('File finder item spec', () => {
 
     describe('openFile', () => {
       beforeEach(() => {
-        spyOn(vm, '$emit');
+        jest.spyOn(vm, '$emit').mockImplementation(() => {});
       });
 
       it('closes file finder', () => {
@@ -210,11 +210,11 @@ describe('File finder item spec', () => {
         const event = new CustomEvent('keyup');
         event.keyCode = ENTER_KEY_CODE;
 
-        spyOn(vm, 'openFile');
+        jest.spyOn(vm, 'openFile').mockImplementation(() => {});
 
         vm.$refs.searchInput.dispatchEvent(event);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(vm.openFile).toHaveBeenCalledWith(vm.files[0]);
 
           done();
@@ -225,11 +225,11 @@ describe('File finder item spec', () => {
         const event = new CustomEvent('keyup');
         event.keyCode = ESC_KEY_CODE;
 
-        spyOn(vm, '$emit');
+        jest.spyOn(vm, '$emit').mockImplementation(() => {});
 
         vm.$refs.searchInput.dispatchEvent(event);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(vm.$emit).toHaveBeenCalledWith('toggle', false);
 
           done();
@@ -303,7 +303,7 @@ describe('File finder item spec', () => {
     beforeEach(done => {
       createComponent();
 
-      spyOn(vm, 'toggle');
+      jest.spyOn(vm, 'toggle').mockImplementation(() => {});
 
       vm.$nextTick(done);
     });

spec/javascripts/vue_shared/components/icon_spec.js → spec/frontend/vue_shared/components/icon_spec.js

 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import Icon from '~/vue_shared/components/icon.vue';
+import iconsPath from '@gitlab/svgs/dist/icons.svg';
 
-describe('Sprite Icon Component', function() {
-  describe('Initialization', function() {
+jest.mock('@gitlab/svgs/dist/icons.svg', () => 'testing');
+
+describe('Sprite Icon Component', () => {
+  describe('Initialization', () => {
     let icon;
 
-    beforeEach(function() {
+    beforeEach(() => {
       const IconComponent = Vue.extend(Icon);
 
       icon = mountComponent(IconComponent, {
@@ -20,20 +23,20 @@ describe('Sprite Icon Component', function() {
       icon.$destroy();
     });
 
-    it('should return a defined Vue component', function() {
+    it('should return a defined Vue component', () => {
       expect(icon).toBeDefined();
     });
 
-    it('should have <svg> as a child element', function() {
+    it('should have <svg> as a child element', () => {
       expect(icon.$el.tagName).toBe('svg');
     });
 
-    it('should have <use> as a child element with the correct href', function() {
+    it('should have <use> as a child element with the correct href', () => {
       expect(icon.$el.firstChild.tagName).toBe('use');
-      expect(icon.$el.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_icons}#commit`);
+      expect(icon.$el.firstChild.getAttribute('xlink:href')).toBe(`${iconsPath}#commit`);
     });
 
-    it('should properly compute iconSizeClass', function() {
+    it('should properly compute iconSizeClass', () => {
       expect(icon.iconSizeClass).toBe('s32');
     });
 
@@ -43,7 +46,7 @@ describe('Sprite Icon Component', function() {
       expect(icon.$options.props.size.validator(9001)).toBeFalsy();
     });
 
-    it('should properly render img css', function() {
+    it('should properly render img css', () => {
       const { classList } = icon.$el;
       const containsSizeClass = classList.contains('s32');
 
@@ -51,16 +54,18 @@ describe('Sprite Icon Component', function() {
     });
 
     it('`name` validator should return false for non existing icons', () => {
+      jest.spyOn(console, 'warn').mockImplementation();
+
       expect(Icon.props.name.validator('non_existing_icon_sprite')).toBe(false);
     });
 
-    it('`name` validator should return false for existing icons', () => {
+    it('`name` validator should return true for existing icons', () => {
       expect(Icon.props.name.validator('commit')).toBe(true);
     });
   });
 
   it('should call registered listeners when they are triggered', () => {
-    const clickHandler = jasmine.createSpy('clickHandler');
+    const clickHandler = jest.fn();
     const wrapper = mount(Icon, {
       propsData: { name: 'commit' },
       listeners: { click: clickHandler },

spec/javascripts/vue_shared/components/panel_resizer_spec.js → spec/frontend/vue_shared/components/panel_resizer_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import panelResizer from '~/vue_shared/components/panel_resizer.vue';
 
 describe('Panel Resizer component', () => {
@@ -69,12 +69,12 @@ describe('Panel Resizer component', () => {
       side: 'left',
     });
 
-    spyOn(vm, '$emit');
+    jest.spyOn(vm, '$emit').mockImplementation(() => {});
     triggerEvent('mousedown', vm.$el);
     triggerEvent('mousemove', document);
     triggerEvent('mouseup', document);
 
-    expect(vm.$emit.calls.allArgs()).toEqual([
+    expect(vm.$emit.mock.calls).toEqual([
       ['resize-start', 100],
       ['update:size', 100],
       ['resize-end', 100],

spec/javascripts/vue_shared/components/smart_virtual_list_spec.js → spec/frontend/vue_shared/components/smart_virtual_list_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import SmartVirtualScrollList from '~/vue_shared/components/smart_virtual_list.vue';
 
 describe('Toggle Button', () => {
@@ -28,7 +28,7 @@ describe('Toggle Button', () => {
       </smart-virtual-scroll-list>`,
     });
 
-    return mountComponent(Component);
+    return mount(Component).vm;
   };
 
   afterEach(() => {

spec/javascripts/vue_shared/directives/autofocusonshow_spec.js → spec/frontend/vue_shared/directives/autofocusonshow_spec.js

@@ -9,13 +9,21 @@ describe('AutofocusOnShow directive', () => {
   describe('with input invisible on component render', () => {
     let el;
 
-    beforeAll(() => {
+    beforeEach(() => {
       setFixtures('<div id="container" style="display: none;"><input id="inputel"/></div>');
       el = document.querySelector('#inputel');
+
+      window.IntersectionObserver = class {
+        observe = jest.fn();
+      };
+    });
+
+    afterEach(() => {
+      delete window.IntersectionObserver;
     });
 
     it('should bind IntersectionObserver on input element', () => {
-      spyOn(el, 'focus');
+      jest.spyOn(el, 'focus').mockImplementation(() => {});
 
       autofocusonshow.inserted(el);
 
@@ -27,7 +35,7 @@ describe('AutofocusOnShow directive', () => {
       el.visibilityObserver = {
         disconnect: () => {},
       };
-      spyOn(el.visibilityObserver, 'disconnect');
+      jest.spyOn(el.visibilityObserver, 'disconnect').mockImplementation(() => {});
 
       autofocusonshow.unbind(el);
 

spec/javascripts/vuex_shared/modules/modal/actions_spec.js → spec/frontend/vuex_shared/modules/modal/actions_spec.js

-import testAction from 'spec/helpers/vuex_action_helper';
+import testAction from 'helpers/vuex_action_helper';
 import * as types from '~/vuex_shared/modules/modal/mutation_types';
 import * as actions from '~/vuex_shared/modules/modal/actions';
 

spec/javascripts/vue_mr_widget/mock_data.js

-export { default } from '../../frontend/vue_mr_widget/mock_data';
-export * from '../../frontend/vue_mr_widget/mock_data';

spec/javascripts/vue_shared/components/issue/related_issuable_mock_data.js

-export * from '../../../../frontend/vue_shared/components/issue/related_issuable_mock_data';