Merge branch 'winh-delayed-jobs-dynamic-timer' into 'master'

Add dynamic timer to delayed jobs

See merge request gitlab-org/gitlab-ce!22382

3 files changed, 150 insertions, 0 deletions

diff --git a/spec/javascripts/jobs/components/job_app_spec.js b/spec/javascripts/jobs/components/job_app_spec.js
index f8ca43fc150..98c995393b9 100644
--- a/spec/javascripts/jobs/components/job_app_spec.js
+++ b/spec/javascripts/jobs/components/job_app_spec.js
@@ -8,6 +8,7 @@ import { resetStore } from '../store/helpers';
 import job from '../mock_data';
 
 describe('Job App ', () => {
+  const delayedJobFixture = getJSONFixture('jobs/delayed.json');
   const Component = Vue.extend(jobApp);
   let store;
   let vm;
@@ -420,6 +421,36 @@ describe('Job App ', () => {
           done();
         }, 0);
       });
+
+      it('displays remaining time for a delayed job', done => {
+        const oneHourInMilliseconds = 3600000;
+        spyOn(Date, 'now').and.callFake(
+          () => new Date(delayedJobFixture.scheduled_at).getTime() - oneHourInMilliseconds,
+        );
+        mock.onGet(props.endpoint).replyOnce(200, { ...delayedJobFixture });
+
+        vm = mountComponentWithStore(Component, {
+          props,
+          store,
+        });
+
+        store.subscribeAction(action => {
+          if (action.type !== 'receiveJobSuccess') {
+            return;
+          }
+
+          Vue.nextTick()
+            .then(() => {
+              expect(vm.$el.querySelector('.js-job-empty-state')).not.toBeNull();
+
+              const title = vm.$el.querySelector('.js-job-empty-state-title');
+
+              expect(title).toContainText('01:00:00');
+              done();
+            })
+            .catch(done.fail);
+        });
+      });
     });
   });
 
diff --git a/spec/javascripts/jobs/components/job_container_item_spec.js b/spec/javascripts/jobs/components/job_container_item_spec.js
index 8588eda19c8..2d108f1ad7f 100644
--- a/spec/javascripts/jobs/components/job_container_item_spec.js
+++ b/spec/javascripts/jobs/components/job_container_item_spec.js
@@ -4,6 +4,7 @@ import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import job from '../mock_data';
 
 describe('JobContainerItem', () => {
+  const delayedJobFixture = getJSONFixture('jobs/delayed.json');
   const Component = Vue.extend(JobContainerItem);
   let vm;
 
@@ -70,4 +71,29 @@ describe('JobContainerItem', () => {
       expect(vm.$el).toHaveSpriteIcon('retry');
     });
   });
+
+  describe('for delayed job', () => {
+    beforeEach(() => {
+      const remainingMilliseconds = 1337000;
+      spyOn(Date, 'now').and.callFake(
+        () => new Date(delayedJobFixture.scheduled_at).getTime() - remainingMilliseconds,
+      );
+    });
+
+    it('displays remaining time in tooltip', done => {
+      vm = mountComponent(Component, {
+        job: delayedJobFixture,
+        isActive: false,
+      });
+
+      Vue.nextTick()
+        .then(() => {
+          expect(vm.$el.querySelector('.js-job-link').getAttribute('data-original-title')).toEqual(
+            'delayed job - delayed manual action (00:22:17)',
+          );
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
 });
diff --git a/spec/javascripts/jobs/mixins/delayed_job_mixin_spec.js b/spec/javascripts/jobs/mixins/delayed_job_mixin_spec.js
new file mode 100644
index 00000000000..48a6b80b365
--- /dev/null
+++ b/spec/javascripts/jobs/mixins/delayed_job_mixin_spec.js
@@ -0,0 +1,93 @@
+import Vue from 'vue';
+import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+describe('DelayedJobMixin', () => {
+  const delayedJobFixture = getJSONFixture('jobs/delayed.json');
+  const dummyComponent = Vue.extend({
+    mixins: [delayedJobMixin],
+    props: {
+      job: {
+        type: Object,
+        required: true,
+      },
+    },
+    template: '<div>{{ remainingTime }}</div>',
+  });
+
+  let vm;
+
+  beforeEach(() => {
+    jasmine.clock().install();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+    jasmine.clock().uninstall();
+  });
+
+  describe('if job is empty object', () => {
+    beforeEach(() => {
+      vm = mountComponent(dummyComponent, {
+        job: {},
+      });
+    });
+
+    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);
+      });
+
+      it('doe not update remaining time', () => {
+        expect(vm.$el.innerText).toBe('00:00:00');
+      });
+    });
+  });
+
+  describe('if job is delayed job', () => {
+    let remainingTimeInMilliseconds = 42000;
+
+    beforeEach(() => {
+      spyOn(Date, 'now').and.callFake(
+        () => 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);
+      });
+
+      it('sets remaining time', () => {
+        expect(vm.$el.innerText).toBe('00:00:42');
+      });
+
+      it('updates remaining time', done => {
+        remainingTimeInMilliseconds = 41000;
+        jasmine.clock().tick(1000);
+
+        Vue.nextTick()
+          .then(() => {
+            expect(vm.$el.innerText).toBe('00:00:41');
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+    });
+  });
+});