Extract JobContainerItem component

app/assets/javascripts/jobs/components/job_container_item.vue

+<script>
+import _ from 'underscore';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+
+export default {
+  components: {
+    CiIcon,
+    Icon,
+  },
+
+  directives: {
+    tooltip,
+  },
+
+  props: {
+    job: {
+      type: Object,
+      required: true,
+    },
+    isActive: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
+  computed: {
+    tooltipText() {
+      return `${_.escape(this.job.name)} - ${this.job.status.tooltip}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="build-job"
+    :class="{ retried: job.retried, active: isActive }"
+  >
+    <a
+      v-tooltip
+      :href="job.status.details_path"
+      :title="tooltipText"
+      data-container="body"
+      data-boundary="viewport"
+      class="js-job-link"
+    >
+      <icon
+        v-if="isActive"
+        name="arrow-right"
+        class="js-arrow-right icon-arrow-right"
+      />
+
+      <ci-icon :status="job.status" />
+
+      <span>{{ job.name ? job.name : job.id }}</span>
+
+      <icon
+        v-if="job.retried"
+        name="retry"
+        class="js-retry-icon"
+      />
+    </a>
+  </div>
+</template>

app/assets/javascripts/jobs/components/jobs_container.vue

 <script>
-import _ from 'underscore';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import Icon from '~/vue_shared/components/icon.vue';
-import tooltip from '~/vue_shared/directives/tooltip';
+import JobContainerItem from './job_container_item.vue';
 
 export default {
   components: {
-    CiIcon,
-    Icon,
-  },
-  directives: {
-    tooltip,
+    JobContainerItem,
   },
+
   props: {
     jobs: {
       type: Array,
@@ -26,49 +20,16 @@ export default {
     isJobActive(currentJobId) {
       return this.jobId === currentJobId;
     },
-    tooltipText(job) {
-      return `${_.escape(job.name)} - ${job.status.tooltip}`;
-    },
   },
 };
 </script>
 <template>
   <div class="js-jobs-container builds-container">
-    <div
+    <job-container-item
       v-for="job in jobs"
       :key="job.id"
-      class="build-job"
-      :class="{ retried: job.retried, active: isJobActive(job.id) }"
-    >
-      <a
-        v-tooltip
-        :href="job.status.details_path"
-        :title="tooltipText(job)"
-        data-container="body"
-      >
-        <icon
-          v-if="isJobActive(job.id)"
-          name="arrow-right"
-          class="js-arrow-right icon-arrow-right"
-        />
-
-        <ci-icon :status="job.status" />
-
-        <span>
-          <template v-if="job.name">
-            {{ job.name }}
-          </template>
-          <template v-else>
-            {{ job.id }}
-          </template>
-        </span>
-
-        <icon
-          v-if="job.retried"
-          name="retry"
-          class="js-retry-icon"
-        />
-      </a>
-    </div>
+      :job="job"
+      :is-active="isJobActive(job.id)"
+    />
   </div>
 </template>

spec/javascripts/jobs/components/job_container_item_spec.js

+import Vue from 'vue';
+import JobContainerItem from '~/jobs/components/job_container_item.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import job from '../mock_data';
+
+describe('JobContainerItem', () => {
+  const Component = Vue.extend(JobContainerItem);
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  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);
+    });
+
+    it('displays a link to the job', () => {
+      const link = vm.$el.querySelector('.js-job-link');
+
+      expect(link.href).toBe(job.status.details_path);
+    });
+  };
+
+  describe('when a job is not active and not retied', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        job,
+        isActive: false,
+      });
+    });
+
+    sharedTests();
+  });
+
+  describe('when a job is active', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        job,
+        isActive: true,
+      });
+    });
+
+    sharedTests();
+
+    it('displays an arrow', () => {
+      expect(vm.$el).toHaveSpriteIcon('arrow-right');
+    });
+  });
+
+  describe('when a job is retried', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        job: {
+          ...job,
+          retried: true,
+        },
+        isActive: false,
+      });
+    });
+
+    sharedTests();
+
+    it('displays an icon', () => {
+      expect(vm.$el).toHaveSpriteIcon('retry');
+    });
+  });
+});

spec/javascripts/jobs/mock_data.js

+import { TEST_HOST } from 'spec/test_constants';
+
 const threeWeeksAgo = new Date();
 threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
 
@@ -19,7 +21,7 @@ export default {
     label: 'passed',
     group: 'success',
     has_details: true,
-    details_path: '/root/ci-mock/-/jobs/4757',
+    details_path: `${TEST_HOST}/root/ci-mock/-/jobs/4757`,
     favicon:
       '/assets/ci_favicons/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.png',
     action: {