Use shared JobName component in JobContainerItemwinh-extract-job-container-item-name

2 files changed, 14 insertions, 8 deletions

diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue
index 81cc0823792..675faee7f67 100644
--- a/app/assets/javascripts/jobs/components/job_container_item.vue
+++ b/app/assets/javascripts/jobs/components/job_container_item.vue
@@ -2,12 +2,14 @@
 import _ from 'underscore';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Icon from '~/vue_shared/components/icon.vue';
+import JobName from '~/vue_shared/components/job_name_component.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
   components: {
     CiIcon,
     Icon,
+    JobName,
   },
 
   directives: {
@@ -26,6 +28,10 @@ export default {
   },
 
   computed: {
+    jobName() {
+      return this.job.name ? this.job.name : this.job.id.toString();
+    },
+
     tooltipText() {
       return `${_.escape(this.job.name)} - ${this.job.status.tooltip}`;
     },
@@ -52,9 +58,11 @@ export default {
         class="js-arrow-right icon-arrow-right"
       />
 
-      <ci-icon :status="job.status" />
-
-      <span>{{ job.name ? job.name : job.id }}</span>
+      <job-name
+        class="js-job-name"
+        :name="jobName"
+        :status="job.status"
+      />
 
       <icon
         v-if="job.retried"
diff --git a/spec/javascripts/jobs/components/job_container_item_spec.js b/spec/javascripts/jobs/components/job_container_item_spec.js
index 8588eda19c8..a8b574fb23d 100644
--- a/spec/javascripts/jobs/components/job_container_item_spec.js
+++ b/spec/javascripts/jobs/components/job_container_item_spec.js
@@ -12,12 +12,10 @@ describe('JobContainerItem', () => {
   });
 
   const sharedTests = () => {
-    it('displays a status icon', () => {
-      expect(vm.$el).toHaveSpriteIcon(job.status.icon);
-    });
-
     it('displays the job name', () => {
-      expect(vm.$el).toContainText(job.name);
+      const jobNameElement = vm.$el.querySelector('.js-job-name');
+
+      expect(jobNameElement).not.toBe(null);
     });
 
     it('displays a link to the job', () => {