Merge branch 'himkp-jest-jobs' into 'master'

Migrate javascripts/jobs specs to Jest

See merge request gitlab-org/gitlab!31326

spec/javascripts/jobs/components/job_container_item_spec.js → spec/frontend/jobs/components/job_container_item_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import JobContainerItem from '~/jobs/components/job_container_item.vue';
 import job from '../mock_data';
 
@@ -18,7 +18,7 @@ describe('JobContainerItem', () => {
     });
 
     it('displays the job name', () => {
-      expect(vm.$el).toContainText(job.name);
+      expect(vm.$el.innerText).toContain(job.name);
     });
 
     it('displays a link to the job', () => {
@@ -75,9 +75,11 @@ describe('JobContainerItem', () => {
   describe('for delayed job', () => {
     beforeEach(() => {
       const remainingMilliseconds = 1337000;
-      spyOn(Date, 'now').and.callFake(
-        () => new Date(delayedJobFixture.scheduled_at).getTime() - remainingMilliseconds,
-      );
+      jest
+        .spyOn(Date, 'now')
+        .mockImplementation(
+          () => new Date(delayedJobFixture.scheduled_at).getTime() - remainingMilliseconds,
+        );
     });
 
     it('displays remaining time in tooltip', done => {

spec/javascripts/jobs/components/job_log_spec.js → spec/frontend/jobs/components/job_log_spec.js

 import Vue from 'vue';
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import component from '~/jobs/components/job_log.vue';
 import createStore from '~/jobs/store';
 import { resetStore } from '../store/helpers';

spec/javascripts/jobs/components/stages_dropdown_spec.js → spec/frontend/jobs/components/stages_dropdown_spec.js

 import Vue from 'vue';
-import { trimText } from 'spec/helpers/text_helper';
+import { trimText } from 'helpers/text_helper';
 import component from '~/jobs/components/stages_dropdown.vue';
 import mountComponent from '../../helpers/vue_mount_component_helper';
 

spec/javascripts/jobs/mixins/delayed_job_mixin_spec.js → spec/frontend/jobs/mixins/delayed_job_mixin_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
 
 describe('DelayedJobMixin', () => {
@@ -12,18 +12,16 @@ describe('DelayedJobMixin', () => {
         required: true,
       },
     },
-    template: '<div>{{ remainingTime }}</div>',
+    render(createElement) {
+      return createElement('div', this.remainingTime);
+    },
   });
 
   let vm;
 
-  beforeEach(() => {
-    jasmine.clock().install();
-  });
-
   afterEach(() => {
     vm.$destroy();
-    jasmine.clock().uninstall();
+    jest.clearAllTimers();
   });
 
   describe('if job is empty object', () => {
@@ -38,13 +36,9 @@ describe('DelayedJobMixin', () => {
     });
 
     describe('after mounting', () => {
-      beforeEach(done => {
-        Vue.nextTick()
-          .then(done)
-          .catch(done.fail);
-      });
+      beforeEach(() => vm.$nextTick());
 
-      it('doe not update remaining time', () => {
+      it('does not update remaining time', () => {
         expect(vm.$el.innerText).toBe('00:00:00');
       });
     });
@@ -54,39 +48,31 @@ describe('DelayedJobMixin', () => {
     let remainingTimeInMilliseconds = 42000;
 
     beforeEach(() => {
-      spyOn(Date, 'now').and.callFake(
-        () => new Date(delayedJobFixture.scheduled_at).getTime() - remainingTimeInMilliseconds,
-      );
+      jest
+        .spyOn(Date, 'now')
+        .mockImplementation(
+          () => new Date(delayedJobFixture.scheduled_at).getTime() - remainingTimeInMilliseconds,
+        );
+
       vm = mountComponent(dummyComponent, {
         job: delayedJobFixture,
       });
     });
 
-    it('sets remaining time to 00:00:00', () => {
-      expect(vm.$el.innerText).toBe('00:00:00');
-    });
-
     describe('after mounting', () => {
-      beforeEach(done => {
-        Vue.nextTick()
-          .then(done)
-          .catch(done.fail);
-      });
+      beforeEach(() => vm.$nextTick());
 
       it('sets remaining time', () => {
         expect(vm.$el.innerText).toBe('00:00:42');
       });
 
-      it('updates remaining time', done => {
+      it('updates remaining time', () => {
         remainingTimeInMilliseconds = 41000;
-        jasmine.clock().tick(1000);
+        jest.advanceTimersByTime(1000);
 
-        Vue.nextTick()
-          .then(() => {
-            expect(vm.$el.innerText).toBe('00:00:41');
-          })
-          .then(done)
-          .catch(done.fail);
+        return vm.$nextTick().then(() => {
+          expect(vm.$el.innerText).toBe('00:00:41');
+        });
       });
     });
   });

spec/javascripts/jobs/store/actions_spec.js → spec/frontend/jobs/store/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
-import testAction from 'spec/helpers/vuex_action_helper';
-import { TEST_HOST } from 'spec/test_constants';
+import testAction from 'helpers/vuex_action_helper';
+import { TEST_HOST } from '../../helpers/test_constants';
 import axios from '~/lib/utils/axios_utils';
 import {
   setJobEndpoint,
@@ -315,26 +315,26 @@ describe('Job State actions', () => {
     let commit;
 
     beforeEach(() => {
-      jasmine.clock().install();
-
-      dispatch = jasmine.createSpy();
-      commit = jasmine.createSpy();
+      dispatch = jest.fn();
+      commit = jest.fn();
 
       startPollingTrace({ dispatch, commit });
     });
 
     afterEach(() => {
-      jasmine.clock().uninstall();
+      jest.clearAllTimers();
     });
 
     it('should save the timeout id but not call fetchTrace', () => {
-      expect(commit).toHaveBeenCalledWith(types.SET_TRACE_TIMEOUT, 1);
+      expect(commit).toHaveBeenCalledWith(types.SET_TRACE_TIMEOUT, expect.any(Number));
+      expect(commit.mock.calls[0][1]).toBeGreaterThan(0);
+
       expect(dispatch).not.toHaveBeenCalledWith('fetchTrace');
     });
 
     describe('after timeout has passed', () => {
       beforeEach(() => {
-        jasmine.clock().tick(4000);
+        jest.advanceTimersByTime(4000);
       });
 
       it('should clear the timeout id and fetchTrace', () => {
@@ -351,7 +351,7 @@ describe('Job State actions', () => {
       // Can't use spyOn(window, 'clearTimeout') because this caused unrelated specs to timeout
       // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/23838#note_280277727
       origTimeout = window.clearTimeout;
-      window.clearTimeout = jasmine.createSpy();
+      window.clearTimeout = jest.fn();
     });
 
     afterEach(() => {