Renders empty states in the Vue app in Job page

3 files changed, 232 insertions, 1 deletions

diff --git a/spec/javascripts/jobs/components/empty_state_spec.js b/spec/javascripts/jobs/components/empty_state_spec.js
index 872cc1e3864..73488eaab9b 100644
--- a/spec/javascripts/jobs/components/empty_state_spec.js
+++ b/spec/javascripts/jobs/components/empty_state_spec.js
@@ -67,7 +67,7 @@ describe('Empty State', () => {
         content,
         action: {
           path: 'runner',
-          title: 'Check runner',
+          button_title: 'Check runner',
           method: 'post',
         },
       });
diff --git a/spec/javascripts/jobs/components/job_app_spec.js b/spec/javascripts/jobs/components/job_app_spec.js
index c31fa6f9887..e02eb9723fe 100644
--- a/spec/javascripts/jobs/components/job_app_spec.js
+++ b/spec/javascripts/jobs/components/job_app_spec.js
@@ -37,6 +37,7 @@ describe('Job App ', () => {
       available: false,
     },
     tags: ['docker'],
+    has_trace: true,
   };
 
   const props = {
@@ -182,4 +183,142 @@ describe('Job App ', () => {
       expect(vm.$el.querySelector('.js-job-stuck')).toBeNull();
     });
   });
+
+  describe('environments block', () => {
+    it('renders environment block when job has environment', () => {
+      store.dispatch(
+        'receiveJobSuccess',
+        Object.assign({}, job, {
+          deployment_status: {
+            environment: {
+              environment_path: '/path',
+              name: 'foo',
+            },
+          },
+        }),
+      );
+
+      vm = mountComponentWithStore(Component, {
+        props,
+        store,
+      });
+
+      expect(vm.$el.querySelector('.js-job-environment')).not.toBeNull();
+    });
+
+    it('does not render environment block when job has environment', () => {
+      store.dispatch('receiveJobSuccess', job);
+
+      vm = mountComponentWithStore(Component, {
+        props,
+        store,
+      });
+
+      expect(vm.$el.querySelector('.js-job-environment')).toBeNull();
+    });
+  });
+
+  describe('erased block', () => {
+    it('renders erased block when `erased` is true', () => {
+      store.dispatch(
+        'receiveJobSuccess',
+        Object.assign({}, job, {
+          erased: true,
+          erased_by: {
+            username: 'root',
+            web_url: 'gitlab.com/root',
+          },
+          erased_at: '2016-11-07T11:11:16.525Z',
+        }),
+      );
+
+      vm = mountComponentWithStore(Component, {
+        props,
+        store,
+      });
+
+      expect(vm.$el.querySelector('.js-job-erased')).not.toBeNull();
+    });
+
+    it('does not render erased block when `erased` is false', () => {
+      store.dispatch('receiveJobSuccess', Object.assign({}, job, { erased: false }));
+
+      vm = mountComponentWithStore(Component, {
+        props,
+        store,
+      });
+
+      expect(vm.$el.querySelector('.js-job-erased')).toBeNull();
+    });
+  });
+
+  describe('empty states block', () => {
+    it('renders empty state when job does not have trace and is not running', () => {
+      store.dispatch(
+        'receiveJobSuccess',
+        Object.assign({}, job, {
+          has_trace: false,
+          status: {
+            group: 'pending',
+            icon: 'status_pending',
+            label: 'pending',
+            text: 'pending',
+            details_path: 'path',
+            illustration: {
+              image: 'path',
+              size: '340',
+              title: 'Empty State',
+              content: 'This is an empty state',
+            },
+            action: {
+              button_title: 'Retry job',
+              method: 'post',
+              path: '/path',
+            },
+          },
+        }),
+      );
+
+      vm = mountComponentWithStore(Component, {
+        props,
+        store,
+      });
+
+      expect(vm.$el.querySelector('.js-job-empty-state')).not.toBeNull();
+    });
+
+    it('does not render empty state when job does not have trace but it is running', () => {
+      store.dispatch(
+        'receiveJobSuccess',
+        Object.assign({}, job, {
+          has_trace: false,
+          status: {
+            group: 'running',
+            icon: 'status_running',
+            label: 'running',
+            text: 'running',
+            details_path: 'path',
+          },
+        }),
+      );
+
+      vm = mountComponentWithStore(Component, {
+        props,
+        store,
+      });
+
+      expect(vm.$el.querySelector('.js-job-empty-state')).toBeNull();
+    });
+
+    it('does not render empty state when job has trace but it is not running', () => {
+      store.dispatch('receiveJobSuccess', Object.assign({}, job, { has_trace: true }));
+
+      vm = mountComponentWithStore(Component, {
+        props,
+        store,
+      });
+
+      expect(vm.$el.querySelector('.js-job-empty-state')).toBeNull();
+    });
+  });
 });
diff --git a/spec/javascripts/jobs/store/getters_spec.js b/spec/javascripts/jobs/store/getters_spec.js
index 63ef4135d83..160b2f4b34a 100644
--- a/spec/javascripts/jobs/store/getters_spec.js
+++ b/spec/javascripts/jobs/store/getters_spec.js
@@ -99,12 +99,14 @@ describe('Job Store Getters', () => {
         expect(getters.hasEnvironment(localState)).toEqual(false);
       });
     });
+
     describe('with an empty object for `deployment_status`', () => {
       it('returns false', () => {
         localState.job.deployment_status = {};
         expect(getters.hasEnvironment(localState)).toEqual(false);
       });
     });
+
     describe('when `deployment_status` is defined and not empty', () => {
       it('returns true', () => {
         localState.job.deployment_status = {
@@ -118,4 +120,94 @@ describe('Job Store Getters', () => {
       });
     });
   });
+
+  describe('hasTrace', () => {
+    describe('when has_trace is true', () => {
+      it('returns true', () => {
+        localState.job.has_trace = true;
+        localState.job.status = {};
+
+        expect(getters.hasTrace(localState)).toEqual(true);
+      });
+    });
+
+    describe('when job is running', () => {
+      it('returns true', () => {
+        localState.job.has_trace = false;
+        localState.job.status = { group: 'running' };
+
+        expect(getters.hasTrace(localState)).toEqual(true);
+      });
+    });
+
+    describe('when has_trace is false and job is not running', () => {
+      it('returns false', () => {
+        localState.job.has_trace = false;
+        localState.job.status = { group: 'pending' };
+
+        expect(getters.hasTrace(localState)).toEqual(false);
+      });
+    });
+  });
+
+  describe('emptyStateIllustration', () => {
+    describe('with defined illustration', () => {
+      it('returns the state illustration object', () => {
+        localState.job.status = {
+          illustration: {
+            path: 'foo',
+          },
+        };
+
+        expect(getters.emptyStateIllustration(localState)).toEqual({ path: 'foo' });
+      });
+    });
+
+    describe('when illustration is not defined', () => {
+      it('returns an empty object', () => {
+        expect(getters.emptyStateIllustration(localState)).toEqual({});
+      });
+    });
+  });
+
+  describe('isJobStuck', () => {
+    describe('when job is pending and runners are not available', () => {
+      it('returns true', () => {
+        localState.job.status = {
+          group: 'pending',
+        };
+        localState.job.runners = {
+          available: false,
+        };
+
+        expect(getters.isJobStuck(localState)).toEqual(true);
+      });
+    });
+
+    describe('when job is not pending', () => {
+      it('returns false', () => {
+        localState.job.status = {
+          group: 'running',
+        };
+        localState.job.runners = {
+          available: false,
+        };
+
+        expect(getters.isJobStuck(localState)).toEqual(false);
+      });
+    });
+
+    describe('when runners are available', () => {
+      it('returns false', () => {
+        localState.job.status = {
+          group: 'pending',
+        };
+        localState.job.runners = {
+          available: true,
+        };
+
+        expect(getters.isJobStuck(localState)).toEqual(false);
+      });
+    });
+  });
 });