Migrate all specs in vue_mr_widget to Jest

Migrate all tests in spec/javascripts/vue_mr_widget to Jest.

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_mr_widget/mock_data.js

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