Update merge request widget pipeline block

This commit updates the pipeline block that appears on the merge request
page to include information that will be exposed by the API as part of
the post-merge pipeline feature.

2 files changed, 91 insertions, 3 deletions

diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
index d905bbe4040..de213210cfc 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import pipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { trimText } from 'spec/helpers/vue_component_helper';
 import mockData from '../mock_data';
 
 describe('MRWidgetPipeline', () => {
@@ -123,7 +124,7 @@ describe('MRWidgetPipeline', () => {
 
     describe('without commit path', () => {
       beforeEach(() => {
-        const mockCopy = Object.assign({}, mockData);
+        const mockCopy = JSON.parse(JSON.stringify(mockData));
         delete mockCopy.pipeline.commit;
 
         vm = mountComponent(Component, {
@@ -164,7 +165,7 @@ describe('MRWidgetPipeline', () => {
 
     describe('without coverage', () => {
       it('should not render a coverage', () => {
-        const mockCopy = Object.assign({}, mockData);
+        const mockCopy = JSON.parse(JSON.stringify(mockData));
         delete mockCopy.pipeline.coverage;
 
         vm = mountComponent(Component, {
@@ -180,7 +181,7 @@ describe('MRWidgetPipeline', () => {
 
     describe('without a pipeline graph', () => {
       it('should not render a pipeline graph', () => {
-        const mockCopy = Object.assign({}, mockData);
+        const mockCopy = JSON.parse(JSON.stringify(mockData));
         delete mockCopy.pipeline.details.stages;
 
         vm = mountComponent(Component, {
@@ -193,5 +194,81 @@ describe('MRWidgetPipeline', () => {
         expect(vm.$el.querySelector('.js-mini-pipeline-graph')).toEqual(null);
       });
     });
+
+    describe('without pipeline.merge_request', () => {
+      it('should render info that includes the commit and branch details', () => {
+        const mockCopy = JSON.parse(JSON.stringify(mockData));
+        delete mockCopy.pipeline.merge_request;
+        const { pipeline } = mockCopy;
+
+        vm = mountComponent(Component, {
+          pipeline,
+          hasCi: true,
+          ciStatus: 'success',
+          troubleshootingDocsPath: 'help',
+          sourceBranchLink: mockCopy.source_branch_link,
+        });
+
+        const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${
+          pipeline.commit.short_id
+        } on ${mockCopy.source_branch_link}`;
+
+        const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
+
+        expect(actual).toBe(expected);
+      });
+    });
+
+    describe('with pipeline.merge_request and flags.merge_request_pipeline', () => {
+      it('should render info that includes the commit, MR, source branch, and target branch details', () => {
+        const mockCopy = JSON.parse(JSON.stringify(mockData));
+        const { pipeline } = mockCopy;
+        pipeline.flags.merge_request_pipeline = true;
+        pipeline.flags.detached_merge_request_pipeline = false;
+
+        vm = mountComponent(Component, {
+          pipeline,
+          hasCi: true,
+          ciStatus: 'success',
+          troubleshootingDocsPath: 'help',
+          sourceBranchLink: mockCopy.source_branch_link,
+        });
+
+        const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${
+          pipeline.commit.short_id
+        } on !${pipeline.merge_request.iid} with ${pipeline.merge_request.source_branch} into ${
+          pipeline.merge_request.target_branch
+        }`;
+
+        const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
+
+        expect(actual).toBe(expected);
+      });
+    });
+
+    describe('with pipeline.merge_request and flags.detached_merge_request_pipeline', () => {
+      it('should render info that includes the commit, MR, and source branch details', () => {
+        const mockCopy = JSON.parse(JSON.stringify(mockData));
+        const { pipeline } = mockCopy;
+        pipeline.flags.merge_request_pipeline = false;
+        pipeline.flags.detached_merge_request_pipeline = true;
+
+        vm = mountComponent(Component, {
+          pipeline,
+          hasCi: true,
+          ciStatus: 'success',
+          troubleshootingDocsPath: 'help',
+          sourceBranchLink: mockCopy.source_branch_link,
+        });
+
+        const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${
+          pipeline.commit.short_id
+        } on !${pipeline.merge_request.iid} with ${pipeline.merge_request.source_branch}`;
+
+        const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
+
+        expect(actual).toBe(expected);
+      });
+    });
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/mock_data.js b/spec/javascripts/vue_mr_widget/mock_data.js
index 6ef07f81705..7ab203a6011 100644
--- a/spec/javascripts/vue_mr_widget/mock_data.js
+++ b/spec/javascripts/vue_mr_widget/mock_data.js
@@ -134,6 +134,8 @@ export default {
       yaml_errors: false,
       retryable: true,
       cancelable: false,
+      merge_request_pipeline: false,
+      detached_merge_request_pipeline: true,
     },
     ref: {
       name: 'daaaa',
@@ -141,6 +143,15 @@ export default {
       tag: false,
       branch: true,
     },
+    merge_request: {
+      iid: 1,
+      path: '/root/detached-merge-request-pipelines/merge_requests/1',
+      title: 'Update README.md',
+      source_branch: 'feature-1',
+      source_branch_path: '/root/detached-merge-request-pipelines/branches/feature-1',
+      target_branch: 'master',
+      target_branch_path: '/root/detached-merge-request-pipelines/branches/master',
+    },
     commit: {
       id: '104096c51715e12e7ae41f9333e9fa35b73f385d',
       short_id: '104096c5',