Migrate pipelines specs to Jest + VTU

Migrated some pipelines specs to Jest and Vue Test Utils to help us with
the BootrstrapVue upgrade

spec/javascripts/pipelines/graph/job_item_spec.js → spec/frontend/pipelines/graph/job_item_spec.js

-import Vue from 'vue';
+import { trimText } from 'helpers/text_helper';
+import { mount } from '@vue/test-utils';
 import JobItem from '~/pipelines/components/graph/job_item.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('pipeline graph job item', () => {
-  const JobComponent = Vue.extend(JobItem);
-  let component;
+  let wrapper;
+
+  const createWrapper = propsData => {
+    wrapper = mount(JobItem, { sync: false, attachToDocument: true, propsData });
+  };
 
   const delayedJobFixture = getJSONFixture('jobs/delayed.json');
   const mockJob = {
@@ -28,27 +31,25 @@ describe('pipeline graph job item', () => {
   };
 
   afterEach(() => {
-    component.$destroy();
+    wrapper.destroy();
   });
 
   describe('name with link', () => {
     it('should render the job name and status with a link', done => {
-      component = mountComponent(JobComponent, { job: mockJob });
+      createWrapper({ job: mockJob });
 
-      Vue.nextTick(() => {
-        const link = component.$el.querySelector('a');
+      wrapper.vm.$nextTick(() => {
+        const link = wrapper.find('a');
 
-        expect(link.getAttribute('href')).toEqual(mockJob.status.details_path);
+        expect(link.attributes('href')).toBe(mockJob.status.details_path);
 
-        expect(link.getAttribute('data-original-title')).toEqual(
+        expect(link.attributes('data-original-title')).toEqual(
           `${mockJob.name} - ${mockJob.status.label}`,
         );
 
-        expect(component.$el.querySelector('.js-status-icon-success')).toBeDefined();
+        expect(wrapper.find('.js-status-icon-success')).toBeDefined();
 
-        expect(component.$el.querySelector('.ci-status-text').textContent.trim()).toEqual(
-          mockJob.name,
-        );
+        expect(trimText(wrapper.find('.ci-status-text').text())).toBe(mockJob.name);
 
         done();
       });
@@ -57,7 +58,7 @@ describe('pipeline graph job item', () => {
 
   describe('name without link', () => {
     it('it should render status and name', () => {
-      component = mountComponent(JobComponent, {
+      createWrapper({
         job: {
           id: 4257,
           name: 'test',
@@ -72,36 +73,34 @@ describe('pipeline graph job item', () => {
         },
       });
 
-      expect(component.$el.querySelector('.js-status-icon-success')).toBeDefined();
-      expect(component.$el.querySelector('a')).toBeNull();
+      expect(wrapper.find('.js-status-icon-success')).toBeDefined();
+      expect(wrapper.find('a').exists()).toBe(false);
 
-      expect(component.$el.querySelector('.ci-status-text').textContent.trim()).toEqual(
-        mockJob.name,
-      );
+      expect(trimText(wrapper.find('.ci-status-text').text())).toEqual(mockJob.name);
     });
   });
 
   describe('action icon', () => {
     it('it should render the action icon', () => {
-      component = mountComponent(JobComponent, { job: mockJob });
+      createWrapper({ job: mockJob });
 
-      expect(component.$el.querySelector('a.ci-action-icon-container')).toBeDefined();
-      expect(component.$el.querySelector('i.ci-action-icon-wrapper')).toBeDefined();
+      expect(wrapper.find('a.ci-action-icon-container')).toBeDefined();
+      expect(wrapper.find('i.ci-action-icon-wrapper')).toBeDefined();
     });
   });
 
   it('should render provided class name', () => {
-    component = mountComponent(JobComponent, {
+    createWrapper({
       job: mockJob,
       cssClassJobName: 'css-class-job-name',
     });
 
-    expect(component.$el.querySelector('a').classList.contains('css-class-job-name')).toBe(true);
+    expect(wrapper.find('a').classes()).toContain('css-class-job-name');
   });
 
   describe('status label', () => {
     it('should not render status label when it is not provided', () => {
-      component = mountComponent(JobComponent, {
+      createWrapper({
         job: {
           id: 4258,
           name: 'test',
@@ -111,15 +110,13 @@ describe('pipeline graph job item', () => {
         },
       });
 
-      expect(
-        component.$el
-          .querySelector('.js-job-component-tooltip')
-          .getAttribute('data-original-title'),
-      ).toEqual('test');
+      expect(wrapper.find('.js-job-component-tooltip').attributes('data-original-title')).toBe(
+        'test',
+      );
     });
 
     it('should not render status label when it is  provided', () => {
-      component = mountComponent(JobComponent, {
+      createWrapper({
         job: {
           id: 4259,
           name: 'test',
@@ -131,25 +128,21 @@ describe('pipeline graph job item', () => {
         },
       });
 
-      expect(
-        component.$el
-          .querySelector('.js-job-component-tooltip')
-          .getAttribute('data-original-title'),
-      ).toEqual('test - success');
+      expect(wrapper.find('.js-job-component-tooltip').attributes('data-original-title')).toEqual(
+        'test - success',
+      );
     });
   });
 
   describe('for delayed job', () => {
     it('displays remaining time in tooltip', () => {
-      component = mountComponent(JobComponent, {
+      createWrapper({
         job: delayedJobFixture,
       });
 
-      expect(
-        component.$el
-          .querySelector('.js-pipeline-graph-job-link')
-          .getAttribute('data-original-title'),
-      ).toEqual(`delayed job - delayed manual action (${component.remainingTime})`);
+      expect(wrapper.find('.js-pipeline-graph-job-link').attributes('data-original-title')).toEqual(
+        `delayed job - delayed manual action (${wrapper.vm.remainingTime})`,
+      );
     });
   });
 });

spec/javascripts/pipelines/graph/linked_pipeline_spec.js → spec/frontend/pipelines/graph/linked_pipeline_spec.js

-import Vue from 'vue';
+import { mount } from '@vue/test-utils';
 import LinkedPipelineComponent from '~/pipelines/components/graph/linked_pipeline.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
 import mockData from './linked_pipelines_mock_data';
 
 const mockPipeline = mockData.triggered[0];
 
 describe('Linked pipeline', () => {
-  const Component = Vue.extend(LinkedPipelineComponent);
-  let vm;
+  let wrapper;
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('rendered output', () => {
@@ -19,57 +18,61 @@ describe('Linked pipeline', () => {
     };
 
     beforeEach(() => {
-      vm = mountComponent(Component, props);
+      wrapper = mount(LinkedPipelineComponent, {
+        sync: false,
+        attachToDocument: true,
+        propsData: props,
+      });
     });
 
     it('should render a list item as the containing element', () => {
-      expect(vm.$el.tagName).toBe('LI');
+      expect(wrapper.is('li')).toBe(true);
     });
 
     it('should render a button', () => {
-      const linkElement = vm.$el.querySelector('.js-linked-pipeline-content');
+      const linkElement = wrapper.find('.js-linked-pipeline-content');
 
-      expect(linkElement).not.toBeNull();
+      expect(linkElement.exists()).toBe(true);
     });
 
     it('should render the project name', () => {
-      expect(vm.$el.innerText).toContain(props.pipeline.project.name);
+      expect(wrapper.text()).toContain(props.pipeline.project.name);
     });
 
     it('should render an svg within the status container', () => {
-      const pipelineStatusElement = vm.$el.querySelector('.js-linked-pipeline-status');
+      const pipelineStatusElement = wrapper.find('.js-linked-pipeline-status');
 
-      expect(pipelineStatusElement.querySelector('svg')).not.toBeNull();
+      expect(pipelineStatusElement.find('svg').exists()).toBe(true);
     });
 
     it('should render the pipeline status icon svg', () => {
-      expect(vm.$el.querySelector('.js-ci-status-icon-running')).not.toBeNull();
-      expect(vm.$el.querySelector('.js-ci-status-icon-running').innerHTML).toContain('<svg');
+      expect(wrapper.find('.js-ci-status-icon-running').exists()).toBe(true);
+      expect(wrapper.find('.js-ci-status-icon-running').html()).toContain('<svg');
     });
 
     it('should have a ci-status child component', () => {
-      expect(vm.$el.querySelector('.js-linked-pipeline-status')).not.toBeNull();
+      expect(wrapper.find('.js-linked-pipeline-status').exists()).toBe(true);
     });
 
     it('should render the pipeline id', () => {
-      expect(vm.$el.innerText).toContain(`#${props.pipeline.id}`);
+      expect(wrapper.text()).toContain(`#${props.pipeline.id}`);
     });
 
     it('should correctly compute the tooltip text', () => {
-      expect(vm.tooltipText).toContain(mockPipeline.project.name);
-      expect(vm.tooltipText).toContain(mockPipeline.details.status.label);
+      expect(wrapper.vm.tooltipText).toContain(mockPipeline.project.name);
+      expect(wrapper.vm.tooltipText).toContain(mockPipeline.details.status.label);
     });
 
     it('should render the tooltip text as the title attribute', () => {
-      const tooltipRef = vm.$el.querySelector('.js-linked-pipeline-content');
-      const titleAttr = tooltipRef.getAttribute('data-original-title');
+      const tooltipRef = wrapper.find('.js-linked-pipeline-content');
+      const titleAttr = tooltipRef.attributes('data-original-title');
 
       expect(titleAttr).toContain(mockPipeline.project.name);
       expect(titleAttr).toContain(mockPipeline.details.status.label);
     });
 
     it('does not render the loading icon when isLoading is false', () => {
-      expect(vm.$el.querySelector('.js-linked-pipeline-loading')).toBeNull();
+      expect(wrapper.find('.js-linked-pipeline-loading').exists()).toBe(false);
     });
   });
 
@@ -79,11 +82,15 @@ describe('Linked pipeline', () => {
     };
 
     beforeEach(() => {
-      vm = mountComponent(Component, props);
+      wrapper = mount(LinkedPipelineComponent, {
+        sync: false,
+        attachToDocument: true,
+        propsData: props,
+      });
     });
 
     it('renders a loading icon', () => {
-      expect(vm.$el.querySelector('.js-linked-pipeline-loading')).not.toBeNull();
+      expect(wrapper.find('.js-linked-pipeline-loading').exists()).toBe(true);
     });
   });
 
@@ -93,21 +100,25 @@ describe('Linked pipeline', () => {
     };
 
     beforeEach(() => {
-      vm = mountComponent(Component, props);
+      wrapper = mount(LinkedPipelineComponent, {
+        sync: false,
+        attachToDocument: true,
+        propsData: props,
+      });
     });
 
     it('emits `pipelineClicked` event', () => {
-      spyOn(vm, '$emit');
-      vm.$el.querySelector('button').click();
+      jest.spyOn(wrapper.vm, '$emit');
+      wrapper.find('button').trigger('click');
 
-      expect(vm.$emit).toHaveBeenCalledWith('pipelineClicked');
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('pipelineClicked');
     });
 
     it('should emit `bv::hide::tooltip` to close the tooltip', () => {
-      spyOn(vm.$root, '$emit');
-      vm.$el.querySelector('button').click();
+      jest.spyOn(wrapper.vm.$root, '$emit');
+      wrapper.find('button').trigger('click');
 
-      expect(vm.$root.$emit.calls.argsFor(0)).toEqual([
+      expect(wrapper.vm.$root.$emit.mock.calls[0]).toEqual([
         'bv::hide::tooltip',
         'js-linked-pipeline-132',
       ]);

spec/frontend/pipelines/graph/linked_pipelines_mock_data.js

+export default {
+  triggered_by: {
+    id: 129,
+    active: true,
+    path: '/gitlab-org/gitlab-foss/pipelines/129',
+    project: {
+      name: 'GitLabCE',
+    },
+    details: {
+      status: {
+        icon: 'status_running',
+        text: 'running',
+        label: 'running',
+        group: 'running',
+        has_details: true,
+        details_path: '/gitlab-org/gitlab-foss/pipelines/129',
+        favicon:
+          '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
+      },
+    },
+    flags: {
+      latest: false,
+      triggered: false,
+      stuck: false,
+      yaml_errors: false,
+      retryable: true,
+      cancelable: true,
+    },
+    ref: {
+      name: '7-5-stable',
+      path: '/gitlab-org/gitlab-foss/commits/7-5-stable',
+      tag: false,
+      branch: true,
+    },
+    commit: {
+      id: '23433d4d8b20d7e45c103d0b6048faad38a130ab',
+      short_id: '23433d4d',
+      title: 'Version 7.5.0.rc1',
+      created_at: '2014-11-17T15:44:14.000+01:00',
+      parent_ids: ['30ac909f30f58d319b42ed1537664483894b18cd'],
+      message: 'Version 7.5.0.rc1\n',
+      author_name: 'Jacob Vosmaer',
+      author_email: 'contact@jacobvosmaer.nl',
+      authored_date: '2014-11-17T15:44:14.000+01:00',
+      committer_name: 'Jacob Vosmaer',
+      committer_email: 'contact@jacobvosmaer.nl',
+      committed_date: '2014-11-17T15:44:14.000+01:00',
+      author_gravatar_url:
+        'http://www.gravatar.com/avatar/e66d11c0eedf8c07b3b18fca46599807?s=80&d=identicon',
+      commit_url:
+        'http://localhost:3000/gitlab-org/gitlab-foss/commit/23433d4d8b20d7e45c103d0b6048faad38a130ab',
+      commit_path: '/gitlab-org/gitlab-foss/commit/23433d4d8b20d7e45c103d0b6048faad38a130ab',
+    },
+    retry_path: '/gitlab-org/gitlab-foss/pipelines/129/retry',
+    cancel_path: '/gitlab-org/gitlab-foss/pipelines/129/cancel',
+    created_at: '2017-05-24T14:46:20.090Z',
+    updated_at: '2017-05-24T14:46:29.906Z',
+  },
+  triggered: [
+    {
+      id: 132,
+      active: true,
+      path: '/gitlab-org/gitlab-foss/pipelines/132',
+      project: {
+        name: 'GitLabCE',
+      },
+      details: {
+        status: {
+          icon: 'status_running',
+          text: 'running',
+          label: 'running',
+          group: 'running',
+          has_details: true,
+          details_path: '/gitlab-org/gitlab-foss/pipelines/132',
+          favicon:
+            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
+        },
+      },
+      flags: {
+        latest: false,
+        triggered: false,
+        stuck: false,
+        yaml_errors: false,
+        retryable: true,
+        cancelable: true,
+      },
+      ref: {
+        name: 'crowd',
+        path: '/gitlab-org/gitlab-foss/commits/crowd',
+        tag: false,
+        branch: true,
+      },
+      commit: {
+        id: 'b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
+        short_id: 'b9d58c4c',
+        title: 'getting user keys publically through http without any authentication, the github…',
+        created_at: '2013-10-03T12:50:33.000+05:30',
+        parent_ids: ['e219cf7246c6a0495e4507deaffeba11e79f13b8'],
+        message:
+          'getting user keys publically through http without any authentication, the github way. E.g: http://github.com/devaroop.keys\n\nchangelog updated to include ssh key retrieval feature update\n',
+        author_name: 'devaroop',
+        author_email: 'devaroop123@yahoo.co.in',
+        authored_date: '2013-10-02T20:39:29.000+05:30',
+        committer_name: 'devaroop',
+        committer_email: 'devaroop123@yahoo.co.in',
+        committed_date: '2013-10-03T12:50:33.000+05:30',
+        author_gravatar_url:
+          'http://www.gravatar.com/avatar/35df4b155ec66a3127d53459941cf8a2?s=80&d=identicon',
+        commit_url:
+          'http://localhost:3000/gitlab-org/gitlab-foss/commit/b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
+        commit_path: '/gitlab-org/gitlab-foss/commit/b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
+      },
+      retry_path: '/gitlab-org/gitlab-foss/pipelines/132/retry',
+      cancel_path: '/gitlab-org/gitlab-foss/pipelines/132/cancel',
+      created_at: '2017-05-24T14:46:24.644Z',
+      updated_at: '2017-05-24T14:48:55.226Z',
+    },
+    {
+      id: 133,
+      active: true,
+      path: '/gitlab-org/gitlab-foss/pipelines/133',
+      project: {
+        name: 'GitLabCE',
+      },
+      details: {
+        status: {
+          icon: 'status_running',
+          text: 'running',
+          label: 'running',
+          group: 'running',
+          has_details: true,
+          details_path: '/gitlab-org/gitlab-foss/pipelines/133',
+          favicon:
+            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
+        },
+      },
+      flags: {
+        latest: false,
+        triggered: false,
+        stuck: false,
+        yaml_errors: false,
+        retryable: true,
+        cancelable: true,
+      },
+      ref: {
+        name: 'crowd',
+        path: '/gitlab-org/gitlab-foss/commits/crowd',
+        tag: false,
+        branch: true,
+      },
+      commit: {
+        id: 'b6bd4856a33df3d144be66c4ed1f1396009bb08b',
+        short_id: 'b6bd4856',
+        title: 'getting user keys publically through http without any authentication, the github…',
+        created_at: '2013-10-02T20:39:29.000+05:30',
+        parent_ids: ['e219cf7246c6a0495e4507deaffeba11e79f13b8'],
+        message:
+          'getting user keys publically through http without any authentication, the github way. E.g: http://github.com/devaroop.keys\n',
+        author_name: 'devaroop',
+        author_email: 'devaroop123@yahoo.co.in',
+        authored_date: '2013-10-02T20:39:29.000+05:30',
+        committer_name: 'devaroop',
+        committer_email: 'devaroop123@yahoo.co.in',
+        committed_date: '2013-10-02T20:39:29.000+05:30',
+        author_gravatar_url:
+          'http://www.gravatar.com/avatar/35df4b155ec66a3127d53459941cf8a2?s=80&d=identicon',
+        commit_url:
+          'http://localhost:3000/gitlab-org/gitlab-foss/commit/b6bd4856a33df3d144be66c4ed1f1396009bb08b',
+        commit_path: '/gitlab-org/gitlab-foss/commit/b6bd4856a33df3d144be66c4ed1f1396009bb08b',
+      },
+      retry_path: '/gitlab-org/gitlab-foss/pipelines/133/retry',
+      cancel_path: '/gitlab-org/gitlab-foss/pipelines/133/cancel',
+      created_at: '2017-05-24T14:46:24.648Z',
+      updated_at: '2017-05-24T14:48:59.673Z',
+    },
+    {
+      id: 130,
+      active: true,
+      path: '/gitlab-org/gitlab-foss/pipelines/130',
+      project: {
+        name: 'GitLabCE',
+      },
+      details: {
+        status: {
+          icon: 'status_running',
+          text: 'running',
+          label: 'running',
+          group: 'running',
+          has_details: true,
+          details_path: '/gitlab-org/gitlab-foss/pipelines/130',
+          favicon:
+            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
+        },
+      },
+      flags: {
+        latest: false,
+        triggered: false,
+        stuck: false,
+        yaml_errors: false,
+        retryable: true,
+        cancelable: true,
+      },
+      ref: {
+        name: 'crowd',
+        path: '/gitlab-org/gitlab-foss/commits/crowd',
+        tag: false,
+        branch: true,
+      },
+      commit: {
+        id: '6d7ced4a2311eeff037c5575cca1868a6d3f586f',
+        short_id: '6d7ced4a',
+        title: 'Whitespace fixes to patch',
+        created_at: '2013-10-08T13:53:22.000-05:00',
+        parent_ids: ['1875141a963a4238bda29011d8f7105839485253'],
+        message: 'Whitespace fixes to patch\n',
+        author_name: 'Dale Hamel',
+        author_email: 'dale.hamel@srvthe.net',
+        authored_date: '2013-10-08T13:53:22.000-05:00',
+        committer_name: 'Dale Hamel',
+        committer_email: 'dale.hamel@invenia.ca',
+        committed_date: '2013-10-08T13:53:22.000-05:00',
+        author_gravatar_url:
+          'http://www.gravatar.com/avatar/cd08930e69fa5ad1a669206e7bafe476?s=80&d=identicon',
+        commit_url:
+          'http://localhost:3000/gitlab-org/gitlab-foss/commit/6d7ced4a2311eeff037c5575cca1868a6d3f586f',
+        commit_path: '/gitlab-org/gitlab-foss/commit/6d7ced4a2311eeff037c5575cca1868a6d3f586f',
+      },
+      retry_path: '/gitlab-org/gitlab-foss/pipelines/130/retry',
+      cancel_path: '/gitlab-org/gitlab-foss/pipelines/130/cancel',
+      created_at: '2017-05-24T14:46:24.630Z',
+      updated_at: '2017-05-24T14:49:45.091Z',
+    },
+    {
+      id: 131,
+      active: true,
+      path: '/gitlab-org/gitlab-foss/pipelines/132',
+      project: {
+        name: 'GitLabCE',
+      },
+      details: {
+        status: {
+          icon: 'status_running',
+          text: 'running',
+          label: 'running',
+          group: 'running',
+          has_details: true,
+          details_path: '/gitlab-org/gitlab-foss/pipelines/132',
+          favicon:
+            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
+        },
+      },
+      flags: {
+        latest: false,
+        triggered: false,
+        stuck: false,
+        yaml_errors: false,
+        retryable: true,
+        cancelable: true,
+      },
+      ref: {
+        name: 'crowd',
+        path: '/gitlab-org/gitlab-foss/commits/crowd',
+        tag: false,
+        branch: true,
+      },
+      commit: {
+        id: 'b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
+        short_id: 'b9d58c4c',
+        title: 'getting user keys publically through http without any authentication, the github…',
+        created_at: '2013-10-03T12:50:33.000+05:30',
+        parent_ids: ['e219cf7246c6a0495e4507deaffeba11e79f13b8'],
+        message:
+          'getting user keys publically through http without any authentication, the github way. E.g: http://github.com/devaroop.keys\n\nchangelog updated to include ssh key retrieval feature update\n',
+        author_name: 'devaroop',
+        author_email: 'devaroop123@yahoo.co.in',
+        authored_date: '2013-10-02T20:39:29.000+05:30',
+        committer_name: 'devaroop',
+        committer_email: 'devaroop123@yahoo.co.in',
+        committed_date: '2013-10-03T12:50:33.000+05:30',
+        author_gravatar_url:
+          'http://www.gravatar.com/avatar/35df4b155ec66a3127d53459941cf8a2?s=80&d=identicon',
+        commit_url:
+          'http://localhost:3000/gitlab-org/gitlab-foss/commit/b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
+        commit_path: '/gitlab-org/gitlab-foss/commit/b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
+      },
+      retry_path: '/gitlab-org/gitlab-foss/pipelines/132/retry',
+      cancel_path: '/gitlab-org/gitlab-foss/pipelines/132/cancel',
+      created_at: '2017-05-24T14:46:24.644Z',
+      updated_at: '2017-05-24T14:48:55.226Z',
+    },
+    {
+      id: 134,
+      active: true,
+      path: '/gitlab-org/gitlab-foss/pipelines/133',
+      project: {
+        name: 'GitLabCE',
+      },
+      details: {
+        status: {
+          icon: 'status_running',
+          text: 'running',
+          label: 'running',
+          group: 'running',
+          has_details: true,
+          details_path: '/gitlab-org/gitlab-foss/pipelines/133',
+          favicon:
+            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
+        },
+      },
+      flags: {
+        latest: false,
+        triggered: false,
+        stuck: false,
+        yaml_errors: false,
+        retryable: true,
+        cancelable: true,
+      },
+      ref: {
+        name: 'crowd',
+        path: '/gitlab-org/gitlab-foss/commits/crowd',
+        tag: false,
+        branch: true,
+      },
+      commit: {
+        id: 'b6bd4856a33df3d144be66c4ed1f1396009bb08b',
+        short_id: 'b6bd4856',
+        title: 'getting user keys publically through http without any authentication, the github…',
+        created_at: '2013-10-02T20:39:29.000+05:30',
+        parent_ids: ['e219cf7246c6a0495e4507deaffeba11e79f13b8'],
+        message:
+          'getting user keys publically through http without any authentication, the github way. E.g: http://github.com/devaroop.keys\n',
+        author_name: 'devaroop',
+        author_email: 'devaroop123@yahoo.co.in',
+        authored_date: '2013-10-02T20:39:29.000+05:30',
+        committer_name: 'devaroop',
+        committer_email: 'devaroop123@yahoo.co.in',
+        committed_date: '2013-10-02T20:39:29.000+05:30',
+        author_gravatar_url:
+          'http://www.gravatar.com/avatar/35df4b155ec66a3127d53459941cf8a2?s=80&d=identicon',
+        commit_url:
+          'http://localhost:3000/gitlab-org/gitlab-foss/commit/b6bd4856a33df3d144be66c4ed1f1396009bb08b',
+        commit_path: '/gitlab-org/gitlab-foss/commit/b6bd4856a33df3d144be66c4ed1f1396009bb08b',
+      },
+      retry_path: '/gitlab-org/gitlab-foss/pipelines/133/retry',
+      cancel_path: '/gitlab-org/gitlab-foss/pipelines/133/cancel',
+      created_at: '2017-05-24T14:46:24.648Z',
+      updated_at: '2017-05-24T14:48:59.673Z',
+    },
+    {
+      id: 135,
+      active: true,
+      path: '/gitlab-org/gitlab-foss/pipelines/130',
+      project: {
+        name: 'GitLabCE',
+      },
+      details: {
+        status: {
+          icon: 'status_running',
+          text: 'running',
+          label: 'running',
+          group: 'running',
+          has_details: true,
+          details_path: '/gitlab-org/gitlab-foss/pipelines/130',
+          favicon:
+            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
+        },
+      },
+      flags: {
+        latest: false,
+        triggered: false,
+        stuck: false,
+        yaml_errors: false,
+        retryable: true,
+        cancelable: true,
+      },
+      ref: {
+        name: 'crowd',
+        path: '/gitlab-org/gitlab-foss/commits/crowd',
+        tag: false,
+        branch: true,
+      },
+      commit: {
+        id: '6d7ced4a2311eeff037c5575cca1868a6d3f586f',
+        short_id: '6d7ced4a',
+        title: 'Whitespace fixes to patch',
+        created_at: '2013-10-08T13:53:22.000-05:00',
+        parent_ids: ['1875141a963a4238bda29011d8f7105839485253'],
+        message: 'Whitespace fixes to patch\n',
+        author_name: 'Dale Hamel',
+        author_email: 'dale.hamel@srvthe.net',
+        authored_date: '2013-10-08T13:53:22.000-05:00',
+        committer_name: 'Dale Hamel',
+        committer_email: 'dale.hamel@invenia.ca',
+        committed_date: '2013-10-08T13:53:22.000-05:00',
+        author_gravatar_url:
+          'http://www.gravatar.com/avatar/cd08930e69fa5ad1a669206e7bafe476?s=80&d=identicon',
+        commit_url:
+          'http://localhost:3000/gitlab-org/gitlab-foss/commit/6d7ced4a2311eeff037c5575cca1868a6d3f586f',
+        commit_path: '/gitlab-org/gitlab-foss/commit/6d7ced4a2311eeff037c5575cca1868a6d3f586f',
+      },
+      retry_path: '/gitlab-org/gitlab-foss/pipelines/130/retry',
+      cancel_path: '/gitlab-org/gitlab-foss/pipelines/130/cancel',
+      created_at: '2017-05-24T14:46:24.630Z',
+      updated_at: '2017-05-24T14:49:45.091Z',
+    },
+  ],
+};

spec/frontend/pipelines/pipeline_url_spec.js

+import $ from 'jquery';
+import { trimText } from 'helpers/text_helper';
+import { shallowMount } from '@vue/test-utils';
+import PipelineUrlComponent from '~/pipelines/components/pipeline_url.vue';
+
+$.fn.popover = () => {};
+
+describe('Pipeline Url Component', () => {
+  let wrapper;
+
+  const createComponent = props => {
+    wrapper = shallowMount(PipelineUrlComponent, {
+      sync: false,
+      attachToDocument: true,
+      propsData: props,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render a table cell', () => {
+    createComponent({
+      pipeline: {
+        id: 1,
+        path: 'foo',
+        flags: {},
+      },
+      autoDevopsHelpPath: 'foo',
+    });
+
+    expect(wrapper.attributes('class')).toContain('table-section');
+  });
+
+  it('should render a link the provided path and id', () => {
+    createComponent({
+      pipeline: {
+        id: 1,
+        path: 'foo',
+        flags: {},
+      },
+      autoDevopsHelpPath: 'foo',
+    });
+
+    expect(wrapper.find('.js-pipeline-url-link').attributes('href')).toBe('foo');
+
+    expect(wrapper.find('.js-pipeline-url-link span').text()).toBe('#1');
+  });
+
+  it('should render latest, yaml invalid, merge request, and stuck flags when provided', () => {
+    createComponent({
+      pipeline: {
+        id: 1,
+        path: 'foo',
+        flags: {
+          latest: true,
+          yaml_errors: true,
+          stuck: true,
+          merge_request_pipeline: true,
+          detached_merge_request_pipeline: true,
+        },
+      },
+      autoDevopsHelpPath: 'foo',
+    });
+
+    expect(wrapper.find('.js-pipeline-url-latest').text()).toContain('latest');
+
+    expect(wrapper.find('.js-pipeline-url-yaml').text()).toContain('yaml invalid');
+
+    expect(wrapper.find('.js-pipeline-url-stuck').text()).toContain('stuck');
+
+    expect(wrapper.find('.js-pipeline-url-detached').text()).toContain('detached');
+  });
+
+  it('should render a badge for autodevops', () => {
+    createComponent({
+      pipeline: {
+        id: 1,
+        path: 'foo',
+        flags: {
+          latest: true,
+          yaml_errors: true,
+          stuck: true,
+          auto_devops: true,
+        },
+      },
+      autoDevopsHelpPath: 'foo',
+    });
+
+    expect(trimText(wrapper.find('.js-pipeline-url-autodevops').text())).toEqual('Auto DevOps');
+  });
+
+  it('should render error badge when pipeline has a failure reason set', () => {
+    createComponent({
+      pipeline: {
+        id: 1,
+        path: 'foo',
+        flags: {
+          failure_reason: true,
+        },
+        failure_reason: 'some reason',
+      },
+      autoDevopsHelpPath: 'foo',
+    });
+
+    expect(wrapper.find('.js-pipeline-url-failure').text()).toContain('error');
+    expect(wrapper.find('.js-pipeline-url-failure').attributes('data-original-title')).toContain(
+      'some reason',
+    );
+  });
+});

spec/javascripts/pipelines/graph/linked_pipelines_mock_data.js

-export default {
-  triggered_by: {
-    id: 129,
-    active: true,
-    path: '/gitlab-org/gitlab-foss/pipelines/129',
-    project: {
-      name: 'GitLabCE',
-    },
-    details: {
-      status: {
-        icon: 'status_running',
-        text: 'running',
-        label: 'running',
-        group: 'running',
-        has_details: true,
-        details_path: '/gitlab-org/gitlab-foss/pipelines/129',
-        favicon:
-          '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
-      },
-    },
-    flags: {
-      latest: false,
-      triggered: false,
-      stuck: false,
-      yaml_errors: false,
-      retryable: true,
-      cancelable: true,
-    },
-    ref: {
-      name: '7-5-stable',
-      path: '/gitlab-org/gitlab-foss/commits/7-5-stable',
-      tag: false,
-      branch: true,
-    },
-    commit: {
-      id: '23433d4d8b20d7e45c103d0b6048faad38a130ab',
-      short_id: '23433d4d',
-      title: 'Version 7.5.0.rc1',
-      created_at: '2014-11-17T15:44:14.000+01:00',
-      parent_ids: ['30ac909f30f58d319b42ed1537664483894b18cd'],
-      message: 'Version 7.5.0.rc1\n',
-      author_name: 'Jacob Vosmaer',
-      author_email: 'contact@jacobvosmaer.nl',
-      authored_date: '2014-11-17T15:44:14.000+01:00',
-      committer_name: 'Jacob Vosmaer',
-      committer_email: 'contact@jacobvosmaer.nl',
-      committed_date: '2014-11-17T15:44:14.000+01:00',
-      author_gravatar_url:
-        'http://www.gravatar.com/avatar/e66d11c0eedf8c07b3b18fca46599807?s=80&d=identicon',
-      commit_url:
-        'http://localhost:3000/gitlab-org/gitlab-foss/commit/23433d4d8b20d7e45c103d0b6048faad38a130ab',
-      commit_path: '/gitlab-org/gitlab-foss/commit/23433d4d8b20d7e45c103d0b6048faad38a130ab',
-    },
-    retry_path: '/gitlab-org/gitlab-foss/pipelines/129/retry',
-    cancel_path: '/gitlab-org/gitlab-foss/pipelines/129/cancel',
-    created_at: '2017-05-24T14:46:20.090Z',
-    updated_at: '2017-05-24T14:46:29.906Z',
-  },
-  triggered: [
-    {
-      id: 132,
-      active: true,
-      path: '/gitlab-org/gitlab-foss/pipelines/132',
-      project: {
-        name: 'GitLabCE',
-      },
-      details: {
-        status: {
-          icon: 'status_running',
-          text: 'running',
-          label: 'running',
-          group: 'running',
-          has_details: true,
-          details_path: '/gitlab-org/gitlab-foss/pipelines/132',
-          favicon:
-            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
-        },
-      },
-      flags: {
-        latest: false,
-        triggered: false,
-        stuck: false,
-        yaml_errors: false,
-        retryable: true,
-        cancelable: true,
-      },
-      ref: {
-        name: 'crowd',
-        path: '/gitlab-org/gitlab-foss/commits/crowd',
-        tag: false,
-        branch: true,
-      },
-      commit: {
-        id: 'b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
-        short_id: 'b9d58c4c',
-        title: 'getting user keys publically through http without any authentication, the github…',
-        created_at: '2013-10-03T12:50:33.000+05:30',
-        parent_ids: ['e219cf7246c6a0495e4507deaffeba11e79f13b8'],
-        message:
-          'getting user keys publically through http without any authentication, the github way. E.g: http://github.com/devaroop.keys\n\nchangelog updated to include ssh key retrieval feature update\n',
-        author_name: 'devaroop',
-        author_email: 'devaroop123@yahoo.co.in',
-        authored_date: '2013-10-02T20:39:29.000+05:30',
-        committer_name: 'devaroop',
-        committer_email: 'devaroop123@yahoo.co.in',
-        committed_date: '2013-10-03T12:50:33.000+05:30',
-        author_gravatar_url:
-          'http://www.gravatar.com/avatar/35df4b155ec66a3127d53459941cf8a2?s=80&d=identicon',
-        commit_url:
-          'http://localhost:3000/gitlab-org/gitlab-foss/commit/b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
-        commit_path: '/gitlab-org/gitlab-foss/commit/b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
-      },
-      retry_path: '/gitlab-org/gitlab-foss/pipelines/132/retry',
-      cancel_path: '/gitlab-org/gitlab-foss/pipelines/132/cancel',
-      created_at: '2017-05-24T14:46:24.644Z',
-      updated_at: '2017-05-24T14:48:55.226Z',
-    },
-    {
-      id: 133,
-      active: true,
-      path: '/gitlab-org/gitlab-foss/pipelines/133',
-      project: {
-        name: 'GitLabCE',
-      },
-      details: {
-        status: {
-          icon: 'status_running',
-          text: 'running',
-          label: 'running',
-          group: 'running',
-          has_details: true,
-          details_path: '/gitlab-org/gitlab-foss/pipelines/133',
-          favicon:
-            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
-        },
-      },
-      flags: {
-        latest: false,
-        triggered: false,
-        stuck: false,
-        yaml_errors: false,
-        retryable: true,
-        cancelable: true,
-      },
-      ref: {
-        name: 'crowd',
-        path: '/gitlab-org/gitlab-foss/commits/crowd',
-        tag: false,
-        branch: true,
-      },
-      commit: {
-        id: 'b6bd4856a33df3d144be66c4ed1f1396009bb08b',
-        short_id: 'b6bd4856',
-        title: 'getting user keys publically through http without any authentication, the github…',
-        created_at: '2013-10-02T20:39:29.000+05:30',
-        parent_ids: ['e219cf7246c6a0495e4507deaffeba11e79f13b8'],
-        message:
-          'getting user keys publically through http without any authentication, the github way. E.g: http://github.com/devaroop.keys\n',
-        author_name: 'devaroop',
-        author_email: 'devaroop123@yahoo.co.in',
-        authored_date: '2013-10-02T20:39:29.000+05:30',
-        committer_name: 'devaroop',
-        committer_email: 'devaroop123@yahoo.co.in',
-        committed_date: '2013-10-02T20:39:29.000+05:30',
-        author_gravatar_url:
-          'http://www.gravatar.com/avatar/35df4b155ec66a3127d53459941cf8a2?s=80&d=identicon',
-        commit_url:
-          'http://localhost:3000/gitlab-org/gitlab-foss/commit/b6bd4856a33df3d144be66c4ed1f1396009bb08b',
-        commit_path: '/gitlab-org/gitlab-foss/commit/b6bd4856a33df3d144be66c4ed1f1396009bb08b',
-      },
-      retry_path: '/gitlab-org/gitlab-foss/pipelines/133/retry',
-      cancel_path: '/gitlab-org/gitlab-foss/pipelines/133/cancel',
-      created_at: '2017-05-24T14:46:24.648Z',
-      updated_at: '2017-05-24T14:48:59.673Z',
-    },
-    {
-      id: 130,
-      active: true,
-      path: '/gitlab-org/gitlab-foss/pipelines/130',
-      project: {
-        name: 'GitLabCE',
-      },
-      details: {
-        status: {
-          icon: 'status_running',
-          text: 'running',
-          label: 'running',
-          group: 'running',
-          has_details: true,
-          details_path: '/gitlab-org/gitlab-foss/pipelines/130',
-          favicon:
-            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
-        },
-      },
-      flags: {
-        latest: false,
-        triggered: false,
-        stuck: false,
-        yaml_errors: false,
-        retryable: true,
-        cancelable: true,
-      },
-      ref: {
-        name: 'crowd',
-        path: '/gitlab-org/gitlab-foss/commits/crowd',
-        tag: false,
-        branch: true,
-      },
-      commit: {
-        id: '6d7ced4a2311eeff037c5575cca1868a6d3f586f',
-        short_id: '6d7ced4a',
-        title: 'Whitespace fixes to patch',
-        created_at: '2013-10-08T13:53:22.000-05:00',
-        parent_ids: ['1875141a963a4238bda29011d8f7105839485253'],
-        message: 'Whitespace fixes to patch\n',
-        author_name: 'Dale Hamel',
-        author_email: 'dale.hamel@srvthe.net',
-        authored_date: '2013-10-08T13:53:22.000-05:00',
-        committer_name: 'Dale Hamel',
-        committer_email: 'dale.hamel@invenia.ca',
-        committed_date: '2013-10-08T13:53:22.000-05:00',
-        author_gravatar_url:
-          'http://www.gravatar.com/avatar/cd08930e69fa5ad1a669206e7bafe476?s=80&d=identicon',
-        commit_url:
-          'http://localhost:3000/gitlab-org/gitlab-foss/commit/6d7ced4a2311eeff037c5575cca1868a6d3f586f',
-        commit_path: '/gitlab-org/gitlab-foss/commit/6d7ced4a2311eeff037c5575cca1868a6d3f586f',
-      },
-      retry_path: '/gitlab-org/gitlab-foss/pipelines/130/retry',
-      cancel_path: '/gitlab-org/gitlab-foss/pipelines/130/cancel',
-      created_at: '2017-05-24T14:46:24.630Z',
-      updated_at: '2017-05-24T14:49:45.091Z',
-    },
-    {
-      id: 131,
-      active: true,
-      path: '/gitlab-org/gitlab-foss/pipelines/132',
-      project: {
-        name: 'GitLabCE',
-      },
-      details: {
-        status: {
-          icon: 'status_running',
-          text: 'running',
-          label: 'running',
-          group: 'running',
-          has_details: true,
-          details_path: '/gitlab-org/gitlab-foss/pipelines/132',
-          favicon:
-            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
-        },
-      },
-      flags: {
-        latest: false,
-        triggered: false,
-        stuck: false,
-        yaml_errors: false,
-        retryable: true,
-        cancelable: true,
-      },
-      ref: {
-        name: 'crowd',
-        path: '/gitlab-org/gitlab-foss/commits/crowd',
-        tag: false,
-        branch: true,
-      },
-      commit: {
-        id: 'b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
-        short_id: 'b9d58c4c',
-        title: 'getting user keys publically through http without any authentication, the github…',
-        created_at: '2013-10-03T12:50:33.000+05:30',
-        parent_ids: ['e219cf7246c6a0495e4507deaffeba11e79f13b8'],
-        message:
-          'getting user keys publically through http without any authentication, the github way. E.g: http://github.com/devaroop.keys\n\nchangelog updated to include ssh key retrieval feature update\n',
-        author_name: 'devaroop',
-        author_email: 'devaroop123@yahoo.co.in',
-        authored_date: '2013-10-02T20:39:29.000+05:30',
-        committer_name: 'devaroop',
-        committer_email: 'devaroop123@yahoo.co.in',
-        committed_date: '2013-10-03T12:50:33.000+05:30',
-        author_gravatar_url:
-          'http://www.gravatar.com/avatar/35df4b155ec66a3127d53459941cf8a2?s=80&d=identicon',
-        commit_url:
-          'http://localhost:3000/gitlab-org/gitlab-foss/commit/b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
-        commit_path: '/gitlab-org/gitlab-foss/commit/b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
-      },
-      retry_path: '/gitlab-org/gitlab-foss/pipelines/132/retry',
-      cancel_path: '/gitlab-org/gitlab-foss/pipelines/132/cancel',
-      created_at: '2017-05-24T14:46:24.644Z',
-      updated_at: '2017-05-24T14:48:55.226Z',
-    },
-    {
-      id: 134,
-      active: true,
-      path: '/gitlab-org/gitlab-foss/pipelines/133',
-      project: {
-        name: 'GitLabCE',
-      },
-      details: {
-        status: {
-          icon: 'status_running',
-          text: 'running',
-          label: 'running',
-          group: 'running',
-          has_details: true,
-          details_path: '/gitlab-org/gitlab-foss/pipelines/133',
-          favicon:
-            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
-        },
-      },
-      flags: {
-        latest: false,
-        triggered: false,
-        stuck: false,
-        yaml_errors: false,
-        retryable: true,
-        cancelable: true,
-      },
-      ref: {
-        name: 'crowd',
-        path: '/gitlab-org/gitlab-foss/commits/crowd',
-        tag: false,
-        branch: true,
-      },
-      commit: {
-        id: 'b6bd4856a33df3d144be66c4ed1f1396009bb08b',
-        short_id: 'b6bd4856',
-        title: 'getting user keys publically through http without any authentication, the github…',
-        created_at: '2013-10-02T20:39:29.000+05:30',
-        parent_ids: ['e219cf7246c6a0495e4507deaffeba11e79f13b8'],
-        message:
-          'getting user keys publically through http without any authentication, the github way. E.g: http://github.com/devaroop.keys\n',
-        author_name: 'devaroop',
-        author_email: 'devaroop123@yahoo.co.in',
-        authored_date: '2013-10-02T20:39:29.000+05:30',
-        committer_name: 'devaroop',
-        committer_email: 'devaroop123@yahoo.co.in',
-        committed_date: '2013-10-02T20:39:29.000+05:30',
-        author_gravatar_url:
-          'http://www.gravatar.com/avatar/35df4b155ec66a3127d53459941cf8a2?s=80&d=identicon',
-        commit_url:
-          'http://localhost:3000/gitlab-org/gitlab-foss/commit/b6bd4856a33df3d144be66c4ed1f1396009bb08b',
-        commit_path: '/gitlab-org/gitlab-foss/commit/b6bd4856a33df3d144be66c4ed1f1396009bb08b',
-      },
-      retry_path: '/gitlab-org/gitlab-foss/pipelines/133/retry',
-      cancel_path: '/gitlab-org/gitlab-foss/pipelines/133/cancel',
-      created_at: '2017-05-24T14:46:24.648Z',
-      updated_at: '2017-05-24T14:48:59.673Z',
-    },
-    {
-      id: 135,
-      active: true,
-      path: '/gitlab-org/gitlab-foss/pipelines/130',
-      project: {
-        name: 'GitLabCE',
-      },
-      details: {
-        status: {
-          icon: 'status_running',
-          text: 'running',
-          label: 'running',
-          group: 'running',
-          has_details: true,
-          details_path: '/gitlab-org/gitlab-foss/pipelines/130',
-          favicon:
-            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
-        },
-      },
-      flags: {
-        latest: false,
-        triggered: false,
-        stuck: false,
-        yaml_errors: false,
-        retryable: true,
-        cancelable: true,
-      },
-      ref: {
-        name: 'crowd',
-        path: '/gitlab-org/gitlab-foss/commits/crowd',
-        tag: false,
-        branch: true,
-      },
-      commit: {
-        id: '6d7ced4a2311eeff037c5575cca1868a6d3f586f',
-        short_id: '6d7ced4a',
-        title: 'Whitespace fixes to patch',
-        created_at: '2013-10-08T13:53:22.000-05:00',
-        parent_ids: ['1875141a963a4238bda29011d8f7105839485253'],
-        message: 'Whitespace fixes to patch\n',
-        author_name: 'Dale Hamel',
-        author_email: 'dale.hamel@srvthe.net',
-        authored_date: '2013-10-08T13:53:22.000-05:00',
-        committer_name: 'Dale Hamel',
-        committer_email: 'dale.hamel@invenia.ca',
-        committed_date: '2013-10-08T13:53:22.000-05:00',
-        author_gravatar_url:
-          'http://www.gravatar.com/avatar/cd08930e69fa5ad1a669206e7bafe476?s=80&d=identicon',
-        commit_url:
-          'http://localhost:3000/gitlab-org/gitlab-foss/commit/6d7ced4a2311eeff037c5575cca1868a6d3f586f',
-        commit_path: '/gitlab-org/gitlab-foss/commit/6d7ced4a2311eeff037c5575cca1868a6d3f586f',
-      },
-      retry_path: '/gitlab-org/gitlab-foss/pipelines/130/retry',
-      cancel_path: '/gitlab-org/gitlab-foss/pipelines/130/cancel',
-      created_at: '2017-05-24T14:46:24.630Z',
-      updated_at: '2017-05-24T14:49:45.091Z',
-    },
-  ],
-};
+import mockData from '../../../frontend/pipelines/graph/linked_pipelines_mock_data';
+
+export default mockData;

spec/javascripts/pipelines/pipeline_url_spec.js

-import Vue from 'vue';
-import pipelineUrlComp from '~/pipelines/components/pipeline_url.vue';
-
-describe('Pipeline Url Component', () => {
-  let PipelineUrlComponent;
-
-  beforeEach(() => {
-    PipelineUrlComponent = Vue.extend(pipelineUrlComp);
-  });
-
-  it('should render a table cell', () => {
-    const component = new PipelineUrlComponent({
-      propsData: {
-        pipeline: {
-          id: 1,
-          path: 'foo',
-          flags: {},
-        },
-        autoDevopsHelpPath: 'foo',
-      },
-    }).$mount();
-
-    expect(component.$el.getAttribute('class')).toContain('table-section');
-  });
-
-  it('should render a link the provided path and id', () => {
-    const component = new PipelineUrlComponent({
-      propsData: {
-        pipeline: {
-          id: 1,
-          path: 'foo',
-          flags: {},
-        },
-        autoDevopsHelpPath: 'foo',
-      },
-    }).$mount();
-
-    expect(component.$el.querySelector('.js-pipeline-url-link').getAttribute('href')).toEqual(
-      'foo',
-    );
-
-    expect(component.$el.querySelector('.js-pipeline-url-link span').textContent).toEqual('#1');
-  });
-
-  it('should render latest, yaml invalid, merge request, and stuck flags when provided', () => {
-    const component = new PipelineUrlComponent({
-      propsData: {
-        pipeline: {
-          id: 1,
-          path: 'foo',
-          flags: {
-            latest: true,
-            yaml_errors: true,
-            stuck: true,
-            merge_request_pipeline: true,
-            detached_merge_request_pipeline: true,
-          },
-        },
-        autoDevopsHelpPath: 'foo',
-      },
-    }).$mount();
-
-    expect(component.$el.querySelector('.js-pipeline-url-latest').textContent).toContain('latest');
-
-    expect(component.$el.querySelector('.js-pipeline-url-yaml').textContent).toContain(
-      'yaml invalid',
-    );
-
-    expect(component.$el.querySelector('.js-pipeline-url-stuck').textContent).toContain('stuck');
-
-    expect(component.$el.querySelector('.js-pipeline-url-detached').textContent).toContain(
-      'detached',
-    );
-  });
-
-  it('should render a badge for autodevops', () => {
-    const component = new PipelineUrlComponent({
-      propsData: {
-        pipeline: {
-          id: 1,
-          path: 'foo',
-          flags: {
-            latest: true,
-            yaml_errors: true,
-            stuck: true,
-            auto_devops: true,
-          },
-        },
-        autoDevopsHelpPath: 'foo',
-      },
-    }).$mount();
-
-    expect(component.$el.querySelector('.js-pipeline-url-autodevops').textContent.trim()).toEqual(
-      'Auto DevOps',
-    );
-  });
-
-  it('should render error badge when pipeline has a failure reason set', () => {
-    const component = new PipelineUrlComponent({
-      propsData: {
-        pipeline: {
-          id: 1,
-          path: 'foo',
-          flags: {
-            failure_reason: true,
-          },
-          failure_reason: 'some reason',
-        },
-        autoDevopsHelpPath: 'foo',
-      },
-    }).$mount();
-
-    expect(component.$el.querySelector('.js-pipeline-url-failure').textContent).toContain('error');
-    expect(
-      component.$el.querySelector('.js-pipeline-url-failure').getAttribute('data-original-title'),
-    ).toContain('some reason');
-  });
-});