Check for null in job tooltip title40997-pipeline-null

2 files changed, 61 insertions, 11 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
index 08199b4234a..b01c799643c 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -59,8 +59,26 @@
     },
 
     computed: {
+      status() {
+        return this.job && this.job.status ? this.job.status : {};
+      },
+
       tooltipText() {
-        return `${this.job.name} - ${this.job.status.label}`;
+        const textBuilder = [];
+
+        if (this.job.name) {
+          textBuilder.push(this.job.name);
+        }
+
+        if (this.job.name && this.status.label) {
+          textBuilder.push('-');
+        }
+
+        if (this.status.label) {
+          textBuilder.push(`${this.job.status.label}`);
+        }
+
+        return textBuilder.join(' ');
       },
 
       /**
@@ -78,8 +96,8 @@
   <div class="ci-job-component">
     <a
       v-tooltip
-      v-if="job.status.has_details"
-      :href="job.status.details_path"
+      v-if="status.has_details"
+      :href="status.details_path"
       :title="tooltipText"
       :class="cssClassJobName"
       data-container="body"
@@ -95,6 +113,7 @@
     <div
       v-else
       v-tooltip
+      class="js-job-component-tooltip"
       :title="tooltipText"
       :class="cssClassJobName"
       data-container="body"
@@ -108,18 +127,18 @@
 
     <action-component
       v-if="hasAction && !isDropdown"
-      :tooltip-text="job.status.action.title"
-      :link="job.status.action.path"
-      :action-icon="job.status.action.icon"
-      :action-method="job.status.action.method"
+      :tooltip-text="status.action.title"
+      :link="status.action.path"
+      :action-icon="status.action.icon"
+      :action-method="status.action.method"
       />
 
     <dropdown-action-component
       v-if="hasAction && isDropdown"
-      :tooltip-text="job.status.action.title"
-      :link="job.status.action.path"
-      :action-icon="job.status.action.icon"
-      :action-method="job.status.action.method"
+      :tooltip-text="status.action.title"
+      :link="status.action.path"
+      :action-icon="status.action.icon"
+      :action-method="status.action.method"
       />
   </div>
 </template>
diff --git a/spec/javascripts/pipelines/graph/job_component_spec.js b/spec/javascripts/pipelines/graph/job_component_spec.js
index 23c87610d83..35e36e9c353 100644
--- a/spec/javascripts/pipelines/graph/job_component_spec.js
+++ b/spec/javascripts/pipelines/graph/job_component_spec.js
@@ -113,4 +113,35 @@ describe('pipeline graph job component', () => {
       component.$el.querySelector('a').classList.contains('css-class-job-name'),
     ).toBe(true);
   });
+
+  describe('status label', () => {
+    it('should not render status label when it is not provided', () => {
+      component = mountComponent(JobComponent, {
+        job: {
+          id: 4256,
+          name: 'test',
+          status: {
+            icon: 'icon_status_success',
+          },
+        },
+      });
+
+      expect(component.$el.querySelector('.js-job-component-tooltip').getAttribute('data-original-title')).toEqual('test');
+    });
+
+    it('should not render status label when it is  provided', () => {
+      component = mountComponent(JobComponent, {
+        job: {
+          id: 4256,
+          name: 'test',
+          status: {
+            icon: 'icon_status_success',
+            label: 'success',
+          },
+        },
+      });
+
+      expect(component.$el.querySelector('.js-job-component-tooltip').getAttribute('data-original-title')).toEqual('test - success');
+    });
+  });
 });