1 files changed, 42 insertions, 37 deletions
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js
index 4da4fc82c26..cc43639f576 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js
@@ -1,51 +1,56 @@
 import Vue from 'vue';
-import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help';
-
-const props = {
-  missingBranch: 'this-is-not-the-branch-you-are-looking-for',
-};
-const text = `If the ${props.missingBranch} branch exists in your local repository`;
-
-const createComponent = () => {
-  const Component = Vue.extend(mergeHelpComponent);
-  return new Component({
-    el: document.createElement('div'),
-    propsData: props,
-  });
-};
+import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
 describe('MRWidgetMergeHelp', () => {
-  describe('props', () => {
-    it('should have props', () => {
-      const { missingBranch } = mergeHelpComponent.props;
-      const MissingBranchTypeClass = missingBranch.type;
-
-      expect(new MissingBranchTypeClass() instanceof String).toBeTruthy();
-      expect(missingBranch.required).toBeFalsy();
-      expect(missingBranch.default).toEqual('');
-    });
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(mergeHelpComponent);
   });
 
-  describe('template', () => {
-    let vm;
-    let el;
+  afterEach(() => {
+    vm.$destroy();
+  });
 
+  describe('with missing branch', () => {
     beforeEach(() => {
-      vm = createComponent();
-      el = vm.$el;
+      vm = mountComponent(Component, {
+        missingBranch: 'this-is-not-the-branch-you-are-looking-for',
+      });
     });
 
-    it('should have the correct elements', () => {
-      expect(el.classList.contains('mr-widget-help')).toBeTruthy();
-      expect(el.textContent).toContain(text);
+    it('renders missing branch information', () => {
+      expect(
+        vm.$el.textContent.trim().replace(/[\r\n]+/g, ' ').replace(/\s\s+/g, ' '),
+      ).toEqual(
+        'If the this-is-not-the-branch-you-are-looking-for branch exists in your local repository, you can merge this merge request manually using the command line',
+      );
     });
 
-    it('should not show missing branch name if missingBranch props is not provided', (done) => {
-      vm.missingBranch = null;
-      Vue.nextTick(() => {
-        expect(el.textContent).not.toContain(text);
-        done();
-      });
+    it('renders button to open help modal', () => {
+      expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-target')).toEqual('#modal_merge_info');
+      expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-toggle')).toEqual('modal');
+    });
+  });
+
+  describe('without missing branch', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component);
+    });
+
+    it('renders information about how to merge manually', () => {
+      expect(
+        vm.$el.textContent.trim().replace(/[\r\n]+/g, ' ').replace(/\s\s+/g, ' '),
+      ).toEqual(
+        'You can merge this merge request manually using the command line',
+      );
+    });
+
+    it('renders element to open a modal', () => {
+      expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-target')).toEqual('#modal_merge_info');
+      expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-toggle')).toEqual('modal');
     });
   });
 });