Add two warning messages to the MR widget

This commit adds two new warning messages to the MR widget that handle
cases involving merge request pipelines.

3 files changed, 143 insertions, 0 deletions

diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_alert_message_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_alert_message_spec.js
new file mode 100644
index 00000000000..f115cb457e5
--- /dev/null
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_alert_message_spec.js
@@ -0,0 +1,63 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import MrWidgetAlertMessage from '~/vue_merge_request_widget/components/mr_widget_alert_message.vue';
+import { GlLink } from '@gitlab/ui';
+
+describe('MrWidgetAlertMessage', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    const localVue = createLocalVue();
+
+    wrapper = shallowMount(localVue.extend(MrWidgetAlertMessage), {
+      propsData: {},
+      localVue,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when type is not provided', () => {
+    it('should render a red message', () => {
+      expect(wrapper.classes()).toContain('danger_message');
+      expect(wrapper.classes()).not.toContain('warning_message');
+    });
+  });
+
+  describe('when type === "danger"', () => {
+    it('should render a red message', () => {
+      wrapper.setProps({ type: 'danger' });
+
+      expect(wrapper.classes()).toContain('danger_message');
+      expect(wrapper.classes()).not.toContain('warning_message');
+    });
+  });
+
+  describe('when type === "warning"', () => {
+    it('should render a red message', () => {
+      wrapper.setProps({ type: 'warning' });
+
+      expect(wrapper.classes()).toContain('warning_message');
+      expect(wrapper.classes()).not.toContain('danger_message');
+    });
+  });
+
+  describe('when helpPath is not provided', () => {
+    it('should not render a help icon/link', () => {
+      const link = wrapper.find(GlLink);
+
+      expect(link.exists()).toBe(false);
+    });
+  });
+
+  describe('when helpPath is provided', () => {
+    it('should render a help icon/link', () => {
+      wrapper.setProps({ helpPath: '/path/to/help/docs' });
+      const link = wrapper.find(GlLink);
+
+      expect(link.exists()).toBe(true);
+      expect(link.attributes().href).toBe('/path/to/help/docs');
+    });
+  });
+});
diff --git a/spec/javascripts/vue_mr_widget/mock_data.js b/spec/javascripts/vue_mr_widget/mock_data.js
index 7ab203a6011..dda16375103 100644
--- a/spec/javascripts/vue_mr_widget/mock_data.js
+++ b/spec/javascripts/vue_mr_widget/mock_data.js
@@ -233,6 +233,7 @@ export default {
   merge_commit_path:
     'http://localhost:3000/root/acets-app/commit/53027d060246c8f47e4a9310fb332aa52f221775',
   troubleshooting_docs_path: 'help',
+  merge_request_pipelines_docs_path: '/help/ci/merge_request_pipelines/index.md',
   squash: true,
 };
 
diff --git a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
index 3e8f73646c8..690fcd3e224 100644
--- a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
+++ b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
@@ -183,6 +183,85 @@ describe('mrWidgetOptions', () => {
         });
       });
     });
+
+    describe('showMergePipelineForkWarning', () => {
+      describe('when the source project and target project are the same', () => {
+        beforeEach(done => {
+          Vue.set(vm.mr, 'mergePipelinesEnabled', true);
+          Vue.set(vm.mr, 'sourceProjectId', 1);
+          Vue.set(vm.mr, 'targetProjectId', 1);
+          vm.$nextTick(done);
+        });
+
+        it('should be false', () => {
+          expect(vm.showMergePipelineForkWarning).toEqual(false);
+        });
+      });
+
+      describe('when merge pipelines are not enabled', () => {
+        beforeEach(done => {
+          Vue.set(vm.mr, 'mergePipelinesEnabled', false);
+          Vue.set(vm.mr, 'sourceProjectId', 1);
+          Vue.set(vm.mr, 'targetProjectId', 2);
+          vm.$nextTick(done);
+        });
+
+        it('should be false', () => {
+          expect(vm.showMergePipelineForkWarning).toEqual(false);
+        });
+      });
+
+      describe('when merge pipelines are enabled _and_ the source project and target project are different', () => {
+        beforeEach(done => {
+          Vue.set(vm.mr, 'mergePipelinesEnabled', true);
+          Vue.set(vm.mr, 'sourceProjectId', 1);
+          Vue.set(vm.mr, 'targetProjectId', 2);
+          vm.$nextTick(done);
+        });
+
+        it('should be true', () => {
+          expect(vm.showMergePipelineForkWarning).toEqual(true);
+        });
+      });
+    });
+
+    describe('showTargetBranchAdvancedError', () => {
+      describe(`when the pipeline's target_sha property doesn't exist`, () => {
+        beforeEach(done => {
+          Vue.set(vm.mr.pipeline, 'target_sha', undefined);
+          Vue.set(vm.mr, 'targetBranchSha', 'abcd');
+          vm.$nextTick(done);
+        });
+
+        it('should be false', () => {
+          expect(vm.showTargetBranchAdvancedError).toEqual(false);
+        });
+      });
+
+      describe(`when the pipeline's target_sha matches the target branch's sha`, () => {
+        beforeEach(done => {
+          Vue.set(vm.mr.pipeline, 'target_sha', 'abcd');
+          Vue.set(vm.mr, 'targetBranchSha', 'abcd');
+          vm.$nextTick(done);
+        });
+
+        it('should be false', () => {
+          expect(vm.showTargetBranchAdvancedError).toEqual(false);
+        });
+      });
+
+      describe(`when the pipeline's target_sha does not match the target branch's sha`, () => {
+        beforeEach(done => {
+          Vue.set(vm.mr.pipeline, 'target_sha', 'abcd');
+          Vue.set(vm.mr, 'targetBranchSha', 'bcde');
+          vm.$nextTick(done);
+        });
+
+        it('should be true', () => {
+          expect(vm.showTargetBranchAdvancedError).toEqual(true);
+        });
+      });
+    });
   });
 
   describe('methods', () => {