1 files changed, 21 insertions, 45 deletions
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_merge_help_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_merge_help_spec.js
index 00e79a22485..53a74bf7456 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_merge_help_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_merge_help_spec.js
@@ -1,69 +1,45 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue';
+import { shallowMount } from '@vue/test-utils';
+import MergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue';
 
 describe('MRWidgetMergeHelp', () => {
-  let vm;
-  let Component;
+  let wrapper;
 
-  beforeEach(() => {
-    Component = Vue.extend(mergeHelpComponent);
-  });
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = shallowMount(MergeHelpComponent, {
+      propsData: {
+        missingBranch: 'this-is-not-the-branch-you-are-looking-for',
+        ...props,
+      },
+    });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
   describe('with missing branch', () => {
     beforeEach(() => {
-      vm = mountComponent(Component, {
-        missingBranch: 'this-is-not-the-branch-you-are-looking-for',
-      });
+      createComponent();
     });
 
     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('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',
+      expect(wrapper.find('.mr-widget-help').text()).toContain(
+        'If the this-is-not-the-branch-you-are-looking-for branch exists in your local repository',
       );
     });
   });
 
   describe('without missing branch', () => {
     beforeEach(() => {
-      vm = mountComponent(Component);
+      createComponent({
+        props: { missingBranch: '' },
+      });
     });
 
     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',
+      expect(wrapper.find('.mr-widget-help').text()).toContain(
+        'You can merge this merge request manually',
       );
     });
   });