Add dynamic timer for delayed jobs on single job page

1 files changed, 29 insertions, 0 deletions

diff --git a/spec/javascripts/jobs/components/job_app_spec.js b/spec/javascripts/jobs/components/job_app_spec.js
index ba1889c4dcd..ba69554012e 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,34 @@ 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);
+        });
+      });
     });
   });