Added realtime prop and corrected specs

app/assets/javascripts/pages/projects/show/index.js

+import Vue from 'vue';
 import ShortcutsNavigation from '~/shortcuts_navigation';
 import NotificationsForm from '~/notifications_form';
 import UserCallout from '~/user_callout';
@@ -5,6 +6,7 @@ import TreeView from '~/tree';
 import BlobViewer from '~/blob/viewer/index';
 import Activities from '~/activities';
 import { ajaxGet } from '~/lib/utils/common_utils';
+import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import Star from '../../../star';
 import notificationsDropdown from '../../../notifications_dropdown';
 
@@ -24,4 +26,21 @@ export default () => {
   $('#tree-slider').waitForImages(() => {
     ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath);
   });
+
+  const commitPipelineStatusEl = document.getElementById('commit-pipeline-status');
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: '#commit-pipeline-status',
+    components: {
+      commitPipelineStatus,
+    },
+    render(createElement) {
+      return createElement('commit-pipeline-status', {
+        props: {
+          endpoint: commitPipelineStatusEl.dataset.endpoint,
+          realtime: false,
+        },
+      });
+    },
+  });
 };

app/assets/javascripts/pages/projects/tree/show/index.js

 import Vue from 'vue';
+import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import TreeView from '../../../../tree';
 import ShortcutsNavigation from '../../../../shortcuts_navigation';
 import BlobViewer from '../../../../blob/viewer';
 import NewCommitForm from '../../../../new_commit_form';
 import { ajaxGet } from '../../../../lib/utils/common_utils';
-import commitPipelineStatus from '../components/commit_pipeline_status_component.vue';
 
 export default () => {
   new ShortcutsNavigation(); // eslint-disable-line no-new

app/assets/javascripts/pages/projects/tree/components/commit_pipeline_status_component.vue → app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue

@@ -18,22 +18,33 @@
         type: String,
         required: true,
       },
+      realtime: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
     data() {
       return {
         ciStatus: {},
         isLoading: true,
         service: {},
+        stageTitle: '',
       };
     },
     mounted() {
       this.service = new CommitPipelineService(this.endpoint);
-      this.initPolling();
+      if (this.realtime) {
+        this.initPolling();
+      } else {
+        this.fetchPipelineCommitData();
+      }
     },
     methods: {
       successCallback(res) {
         if (res.data.pipelines.length > 0) {
-          this.ciStatus = res.data.pipelines[0].details.status;
+          this.ciStatus = res.data.pipelines[0].details.stages[0].status;
+          this.stageTitle = res.data.pipelines[0].details.stages[0].title;
           this.isLoading = false;
         } else {
           this.isLoading = true;
@@ -86,8 +97,8 @@
   >
     <ci-icon
       v-tooltip
-      :title="ciStatus.text"
-      :aria-label="ciStatus.text"
+      :title="stageTitle"
+      :aria-label="stageTitle"
       data-container="body"
       :status="ciStatus"
     />

features/project/project.feature

@@ -23,6 +23,7 @@ Feature: Project
     And I visit project "Shop" page
     Then I should see project "Shop" README
 
+  @javascript
   Scenario: I should see last commit with CI
     Given project "Shop" has CI enabled
     Given project "Shop" has CI build

features/steps/shared/project.rb

@@ -218,6 +218,7 @@ module SharedProject
   end
 
   step 'I should see last commit with CI status' do
+    sleep 2
     page.within ".blob-commit-info" do
       expect(page).to have_content(project.commit.sha[0..6])
       expect(page).to have_link("Commit: skipped")

spec/javascripts/commit/commit_pipeline_status_component_spec.js

 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
-import commitPipelineStatus from '~/pages/projects/tree/components/commit_pipeline_status_component.vue';
+import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import mountComponent from '../helpers/vue_mount_component_helper';
 
 describe('Commit pipeline status component', () => {
@@ -25,7 +25,12 @@ describe('Commit pipeline status component', () => {
         pipelines: [
           {
             details: {
-              status: mockCiStatus,
+              stages: [
+                {
+                  status: mockCiStatus,
+                  title: 'Commit: canceled',
+                },
+              ],
             },
           },
         ],