Merge branch 'ce-indicator-for-pipeline-for-merge-train' into 'master'

CE backport for gitlab-org/gitlab-ee!14664: Show indicator to Pipelines for merge train

See merge request gitlab-org/gitlab-ce!32025

3 files changed, 60 insertions, 76 deletions

diff --git a/spec/features/merge_request/user_sees_merge_widget_spec.rb b/spec/features/merge_request/user_sees_merge_widget_spec.rb
index 3f2a676462b..d19835741e3 100644
--- a/spec/features/merge_request/user_sees_merge_widget_spec.rb
+++ b/spec/features/merge_request/user_sees_merge_widget_spec.rb
@@ -189,26 +189,20 @@ describe 'Merge request > User sees merge widget', :js do
       visit project_merge_request_path(project, merge_request)
     end
 
-    it 'shows head pipeline information' do
-      within '.ci-widget-content' do
-        expect(page).to have_content("Pipeline ##{pipeline.id} pending " \
-                                     "for #{pipeline.short_sha} " \
-                                     "on #{merge_request.to_reference} " \
-                                     "with #{merge_request.source_branch}")
+    shared_examples 'pipeline widget' do
+      it 'shows head pipeline information' do
+        within '.ci-widget-content' do
+          expect(page).to have_content("Detached merge request pipeline ##{pipeline.id} pending for #{pipeline.short_sha}")
+        end
       end
     end
 
+    include_examples 'pipeline widget'
+
     context 'when source project is a forked project' do
       let(:source_project) { fork_project(project, user, repository: true) }
 
-      it 'shows head pipeline information' do
-        within '.ci-widget-content' do
-          expect(page).to have_content("Pipeline ##{pipeline.id} pending " \
-                                       "for #{pipeline.short_sha} " \
-                                       "on #{merge_request.to_reference} " \
-                                       "with #{merge_request.source_branch}")
-        end
-      end
+      include_examples 'pipeline widget'
     end
   end
 
@@ -234,29 +228,21 @@ describe 'Merge request > User sees merge widget', :js do
       visit project_merge_request_path(project, merge_request)
     end
 
-    it 'shows head pipeline information' do
-      within '.ci-widget-content' do
-        expect(page).to have_content("Pipeline ##{pipeline.id} pending " \
-                                     "for #{pipeline.short_sha} " \
-                                     "on #{merge_request.to_reference} " \
-                                     "with #{merge_request.source_branch} " \
-                                     "into #{merge_request.target_branch}")
+    shared_examples 'pipeline widget' do
+      it 'shows head pipeline information' do
+        within '.ci-widget-content' do
+          expect(page).to have_content("Merged result pipeline ##{pipeline.id} pending for #{pipeline.short_sha}")
+        end
       end
     end
 
+    include_examples 'pipeline widget'
+
     context 'when source project is a forked project' do
       let(:source_project) { fork_project(project, user, repository: true) }
       let(:merge_sha) { source_project.commit.sha }
 
-      it 'shows head pipeline information' do
-        within '.ci-widget-content' do
-          expect(page).to have_content("Pipeline ##{pipeline.id} pending " \
-                                       "for #{pipeline.short_sha} " \
-                                       "on #{merge_request.to_reference} " \
-                                       "with #{merge_request.source_branch} " \
-                                       "into #{merge_request.target_branch}")
-        end
-      end
+      include_examples 'pipeline widget'
     end
   end
 
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 fe831094ecf..67e85763fae 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
@@ -69,7 +69,6 @@ describe('MRWidgetPipeline', () => {
       vm = mountComponent(Component, {
         pipeline: mockData.pipeline,
         hasCi: true,
-        ciStatus: null,
         troubleshootingDocsPath: 'help',
       });
 
@@ -208,71 +207,66 @@ describe('MRWidgetPipeline', () => {
       });
     });
 
-    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}`;
+    describe('for each type of pipeline', () => {
+      let pipeline;
 
-        const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
+      beforeEach(() => {
+        ({ pipeline } = JSON.parse(JSON.stringify(mockData)));
 
-        expect(actual).toBe(expected);
+        pipeline.details.name = 'Pipeline';
+        pipeline.merge_request_event_type = undefined;
+        pipeline.ref.tag = false;
+        pipeline.ref.branch = false;
       });
-    });
-
-    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;
 
+      const factory = () => {
         vm = mountComponent(Component, {
           pipeline,
           hasCi: true,
           ciStatus: 'success',
           troubleshootingDocsPath: 'help',
-          sourceBranchLink: mockCopy.source_branch_link,
+          sourceBranchLink: mockData.source_branch_link,
         });
+      };
+
+      describe('for a branch pipeline', () => {
+        it('renders a pipeline widget that reads "Pipeline <ID> <status> for <SHA> on <branch>"', () => {
+          pipeline.ref.branch = true;
 
-        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}`;
+          factory();
 
-        const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
+          const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id} on ${mockData.source_branch_link}`;
+          const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
 
-        expect(actual).toBe(expected);
+          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;
+      describe('for a tag pipeline', () => {
+        it('renders a pipeline widget that reads "Pipeline <ID> <status> for <SHA> on <branch>"', () => {
+          pipeline.ref.tag = true;
 
-        vm = mountComponent(Component, {
-          pipeline,
-          hasCi: true,
-          ciStatus: 'success',
-          troubleshootingDocsPath: 'help',
-          sourceBranchLink: mockCopy.source_branch_link,
+          factory();
+
+          const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
+          const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
+
+          expect(actual).toBe(expected);
         });
+      });
+
+      describe('for a detached merge request pipeline', () => {
+        it('renders a pipeline widget that reads "Detached merge request pipeline <ID> <status> for <SHA>"', () => {
+          pipeline.details.name = 'Detached merge request pipeline';
+          pipeline.merge_request_event_type = 'detached';
 
-        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}`;
+          factory();
 
-        const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
+          const expected = `Detached merge request pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
+          const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
 
-        expect(actual).toBe(expected);
+          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 a55d5537df7..2f79806652b 100644
--- a/spec/javascripts/vue_mr_widget/mock_data.js
+++ b/spec/javascripts/vue_mr_widget/mock_data.js
@@ -259,6 +259,8 @@ export const mockStore = {
         tooltip: 'passed',
       },
     },
+    flags: {},
+    ref: {},
   },
   mergePipeline: {
     id: 1,
@@ -276,6 +278,8 @@ export const mockStore = {
         tooltip: 'passed',
       },
     },
+    flags: {},
+    ref: {},
   },
   targetBranch: 'target-branch',
   sourceBranch: 'source-branch',