Moves components into vue files:fl-mr-widget-components

  - mr_widget_failed_to_merge
  - mr_widget_merge_when_pipeline_succeeds
Adds i18n

7 files changed, 357 insertions, 355 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js
deleted file mode 100644
index 76b0235af1b..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import statusIcon from '../mr_widget_status_icon.vue';
-import eventHub from '../../event_hub';
-
-export default {
-  name: 'MRWidgetFailedToMerge',
-  props: {
-    mr: { type: Object, required: true },
-  },
-  data() {
-    return {
-      timer: 10,
-      isRefreshing: false,
-    };
-  },
-  mounted() {
-    setInterval(() => {
-      this.updateTimer();
-    }, 1000);
-  },
-  created() {
-    eventHub.$emit('DisablePolling');
-  },
-  computed: {
-    timerText() {
-      return this.timer > 1 ? `${this.timer} seconds` : 'a second';
-    },
-  },
-  methods: {
-    refresh() {
-      this.isRefreshing = true;
-      eventHub.$emit('MRWidgetUpdateRequested');
-      eventHub.$emit('EnablePolling');
-    },
-    updateTimer() {
-      this.timer = this.timer - 1;
-
-      if (this.timer === 0) {
-        this.refresh();
-      }
-    },
-  },
-  components: {
-    statusIcon,
-  },
-  template: `
-    <div class="mr-widget-body media">
-      <template v-if="isRefreshing">
-        <status-icon status="loading" />
-        <span class="media-body bold js-refresh-label">
-          Refreshing now
-        </span>
-      </template>
-      <template v-else>
-        <status-icon status="warning" :show-disabled-button="true" />
-        <div class="media-body space-children">
-          <span class="bold">
-            <span
-              class="has-error-message"
-              v-if="mr.mergeError">
-              {{mr.mergeError}}.
-            </span>
-            <span v-else>Merge failed.</span>
-            <span
-              :class="{ 'has-custom-error': mr.mergeError }">
-              Refreshing in {{timerText}} to show the updated status...
-            </span>
-          </span>
-          <button
-            @click="refresh"
-            class="btn btn-default btn-xs js-refresh-button"
-            type="button">
-            Refresh now
-          </button>
-        </div>
-      </template>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
new file mode 100644
index 00000000000..602b68ea572
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
@@ -0,0 +1,105 @@
+<script>
+  import { n__ } from '~/locale';
+  import statusIcon from '../mr_widget_status_icon.vue';
+  import eventHub from '../../event_hub';
+
+  export default {
+    name: 'MRWidgetFailedToMerge',
+
+    components: {
+      statusIcon,
+    },
+
+    props: {
+      mr: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+      },
+    },
+
+    data() {
+      return {
+        timer: 10,
+        isRefreshing: false,
+      };
+    },
+
+    computed: {
+      timerText() {
+        return n__(
+          'Refreshing in a second to show the updated status...',
+          'Refreshing in %d seconds to show the updated status...',
+          this.timer,
+        );
+      },
+    },
+
+    mounted() {
+      setInterval(() => {
+        this.updateTimer();
+      }, 1000);
+    },
+
+    created() {
+      eventHub.$emit('DisablePolling');
+    },
+
+    methods: {
+      refresh() {
+        this.isRefreshing = true;
+        eventHub.$emit('MRWidgetUpdateRequested');
+        eventHub.$emit('EnablePolling');
+      },
+      updateTimer() {
+        this.timer = this.timer - 1;
+
+        if (this.timer === 0) {
+          this.refresh();
+        }
+      },
+    },
+
+  };
+</script>
+<template>
+  <div class="mr-widget-body media">
+    <template v-if="isRefreshing">
+      <status-icon status="loading" />
+      <span class="media-body bold js-refresh-label">
+        {{ s__("mrWidget|Refreshing now") }}
+      </span>
+    </template>
+    <template v-else>
+      <status-icon
+        status="warning"
+        :show-disabled-button="true"
+      />
+      <div class="media-body space-children">
+        <span class="bold">
+          <span
+            class="has-error-message"
+            v-if="mr.mergeError"
+          >
+            {{ mr.mergeError }}.
+          </span>
+          <span v-else>
+            {{ s__("mrWidget|Merge failed.") }}
+          </span>
+          <span
+            :class="{ 'has-custom-error': mr.mergeError }"
+          >
+            {{ timerText }}
+          </span>
+        </span>
+        <button
+          @click="refresh"
+          class="btn btn-default btn-xs js-refresh-button"
+          type="button"
+        >
+          {{ s__("mrWidget|Refresh now") }}
+        </button>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
deleted file mode 100644
index 357485b9e78..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import Flash from '../../../flash';
-import statusIcon from '../mr_widget_status_icon.vue';
-import MRWidgetAuthor from '../../components/mr_widget_author';
-import eventHub from '../../event_hub';
-
-export default {
-  name: 'MRWidgetMergeWhenPipelineSucceeds',
-  props: {
-    mr: { type: Object, required: true },
-    service: { type: Object, required: true },
-  },
-  components: {
-    'mr-widget-author': MRWidgetAuthor,
-    statusIcon,
-  },
-  data() {
-    return {
-      isCancellingAutoMerge: false,
-      isRemovingSourceBranch: false,
-    };
-  },
-  computed: {
-    canRemoveSourceBranch() {
-      const { shouldRemoveSourceBranch, canRemoveSourceBranch,
-        mergeUserId, currentUserId } = this.mr;
-
-      return !shouldRemoveSourceBranch && canRemoveSourceBranch && mergeUserId === currentUserId;
-    },
-  },
-  methods: {
-    cancelAutomaticMerge() {
-      this.isCancellingAutoMerge = true;
-      this.service.cancelAutomaticMerge()
-        .then(res => res.data)
-        .then((data) => {
-          eventHub.$emit('UpdateWidgetData', data);
-        })
-        .catch(() => {
-          this.isCancellingAutoMerge = false;
-          new Flash('Something went wrong. Please try again.'); // eslint-disable-line
-        });
-    },
-    removeSourceBranch() {
-      const options = {
-        sha: this.mr.sha,
-        merge_when_pipeline_succeeds: true,
-        should_remove_source_branch: true,
-      };
-
-      this.isRemovingSourceBranch = true;
-      this.service.mergeResource.save(options)
-        .then(res => res.data)
-        .then((data) => {
-          if (data.status === 'merge_when_pipeline_succeeds') {
-            eventHub.$emit('MRWidgetUpdateRequested');
-          }
-        })
-        .catch(() => {
-          this.isRemovingSourceBranch = false;
-          new Flash('Something went wrong. Please try again.'); // eslint-disable-line
-        });
-    },
-  },
-  template: `
-    <div class="mr-widget-body media">
-      <status-icon status="success" />
-      <div class="media-body">
-        <h4 class="flex-container-block">
-          <span class="append-right-10">
-            Set by
-            <mr-widget-author :author="mr.setToMWPSBy" />
-            to be merged automatically when the pipeline succeeds
-          </span>
-          <a
-            v-if="mr.canCancelAutomaticMerge"
-            @click.prevent="cancelAutomaticMerge"
-            :disabled="isCancellingAutoMerge"
-            role="button"
-            href="#"
-            class="btn btn-xs btn-default js-cancel-auto-merge">
-            <i
-              v-if="isCancellingAutoMerge"
-              class="fa fa-spinner fa-spin"
-              aria-hidden="true" />
-              Cancel automatic merge
-          </a>
-        </h4>
-        <section class="mr-info-list">
-          <p>The changes will be merged into
-            <a
-              :href="mr.targetBranchPath"
-              class="label-branch">
-              {{mr.targetBranch}}
-            </a>
-          </p>
-          <p v-if="mr.shouldRemoveSourceBranch">
-            The source branch will be removed
-          </p>
-          <p
-            v-else
-            class="flex-container-block"
-          >
-            <span class="append-right-10">
-              The source branch will not be removed
-            </span>
-            <a
-              v-if="canRemoveSourceBranch"
-              :disabled="isRemovingSourceBranch"
-              @click.prevent="removeSourceBranch"
-              role="button"
-              class="btn btn-xs btn-default js-remove-source-branch"
-              href="#">
-              <i
-              v-if="isRemovingSourceBranch"
-              class="fa fa-spinner fa-spin"
-              aria-hidden="true" />
-              Remove source branch
-            </a>
-          </p>
-        </section>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
new file mode 100644
index 00000000000..d00808088bd
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
@@ -0,0 +1,147 @@
+<script>
+  import Flash from '../../../flash';
+  import statusIcon from '../mr_widget_status_icon.vue';
+  import mrWidgetAuthor from '../../components/mr_widget_author';
+  import eventHub from '../../event_hub';
+
+  export default {
+    name: 'MRWidgetMergeWhenPipelineSucceeds',
+    components: {
+      mrWidgetAuthor,
+      statusIcon,
+    },
+    props: {
+      mr: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+      },
+      service: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+      },
+    },
+    data() {
+      return {
+        isCancellingAutoMerge: false,
+        isRemovingSourceBranch: false,
+      };
+    },
+    computed: {
+      canRemoveSourceBranch() {
+        const {
+          shouldRemoveSourceBranch,
+          canRemoveSourceBranch,
+          mergeUserId,
+          currentUserId,
+        } = this.mr;
+
+        return !shouldRemoveSourceBranch &&
+          canRemoveSourceBranch &&
+          mergeUserId === currentUserId;
+      },
+    },
+    methods: {
+      cancelAutomaticMerge() {
+        this.isCancellingAutoMerge = true;
+        this.service.cancelAutomaticMerge()
+          .then(res => res.data)
+          .then((data) => {
+            eventHub.$emit('UpdateWidgetData', data);
+          })
+          .catch(() => {
+            this.isCancellingAutoMerge = false;
+            Flash('Something went wrong. Please try again.');
+          });
+      },
+      removeSourceBranch() {
+        const options = {
+          sha: this.mr.sha,
+          merge_when_pipeline_succeeds: true,
+          should_remove_source_branch: true,
+        };
+
+        this.isRemovingSourceBranch = true;
+        this.service.mergeResource.save(options)
+          .then(res => res.data)
+          .then((data) => {
+            if (data.status === 'merge_when_pipeline_succeeds') {
+              eventHub.$emit('MRWidgetUpdateRequested');
+            }
+          })
+          .catch(() => {
+            this.isRemovingSourceBranch = false;
+            Flash('Something went wrong. Please try again.');
+          });
+      },
+    },
+  };
+</script>
+<template>
+  <div class="mr-widget-body media">
+    <status-icon status="success" />
+    <div class="media-body">
+      <h4 class="flex-container-block">
+        <span class="append-right-10">
+          Set by
+          <mr-widget-author :author="mr.setToMWPSBy" />
+          to be merged automatically when the pipeline succeeds
+        </span>
+        <a
+          v-if="mr.canCancelAutomaticMerge"
+          @click.prevent="cancelAutomaticMerge"
+          :disabled="isCancellingAutoMerge"
+          role="button"
+          href="#"
+          class="btn btn-xs btn-default js-cancel-auto-merge">
+          <i
+            v-if="isCancellingAutoMerge"
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true"
+          >
+          </i>
+          {{ s__("mrWidget|Cancel automatic merge") }}
+        </a>
+      </h4>
+      <section class="mr-info-list">
+        <p>
+          {{ s__("mrWidget|The changes will be merged into") }}
+          <a
+            :href="mr.targetBranchPath"
+            class="label-branch"
+          >
+            {{ mr.targetBranch }}
+          </a>
+        </p>
+        <p v-if="mr.shouldRemoveSourceBranch">
+          {{ s__("mrWidget|The source branch will be removed") }}
+        </p>
+        <p
+          v-else
+          class="flex-container-block"
+        >
+          <span class="append-right-10">
+            {{ s__("mrWidget|The source branch will not be removed") }}
+          </span>
+          <a
+            v-if="canRemoveSourceBranch"
+            :disabled="isRemovingSourceBranch"
+            @click.prevent="removeSourceBranch"
+            role="button"
+            class="btn btn-xs btn-default js-remove-source-branch"
+            href="#"
+          >
+            <i
+              v-if="isRemovingSourceBranch"
+              class="fa fa-spinner fa-spin"
+              aria-hidden="true"
+            >
+            </i>
+            {{ s__("mrWidget|Remove source branch") }}
+          </a>
+        </p>
+      </section>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index 8651945a3da..b930aca6877 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -17,7 +17,7 @@ export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue';
 export { default as WidgetDeployment } from './components/mr_widget_deployment';
 export { default as WidgetRelatedLinks } from './components/mr_widget_related_links';
 export { default as MergedState } from './components/states/mr_widget_merged';
-export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge';
+export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge.vue';
 export { default as ClosedState } from './components/states/mr_widget_closed.vue';
 export { default as MergingState } from './components/states/mr_widget_merging.vue';
 export { default as WipState } from './components/states/mr_widget_wip';
@@ -31,7 +31,7 @@ export { default as SHAMismatchState } from './components/states/mr_widget_sha_m
 export { default as UnresolvedDiscussionsState } from './components/states/mr_widget_unresolved_discussions';
 export { default as PipelineBlockedState } from './components/states/mr_widget_pipeline_blocked';
 export { default as PipelineFailedState } from './components/states/mr_widget_pipeline_failed';
-export { default as MergeWhenPipelineSucceedsState } from './components/states/mr_widget_merge_when_pipeline_succeeds';
+export { default as MergeWhenPipelineSucceedsState } from './components/states/mr_widget_merge_when_pipeline_succeeds.vue';
 export { default as RebaseState } from './components/states/mr_widget_rebase.vue';
 export { default as AutoMergeFailed } from './components/states/mr_widget_auto_merge_failed.vue';
 export { default as CheckingState } from './components/states/mr_widget_checking.vue';
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js
index cef365eec8a..a57b9811e08 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js
@@ -1,45 +1,37 @@
 import Vue from 'vue';
-import failedToMergeComponent from '~/vue_merge_request_widget/components/states/mr_widget_failed_to_merge';
+import failedToMergeComponent from '~/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue';
 import eventHub from '~/vue_merge_request_widget/event_hub';
-
-const mr = {
-  mergeError: 'Merge error happened.',
-};
-const createComponent = () => {
-  const Component = Vue.extend(failedToMergeComponent);
-  return new Component({
-    el: document.createElement('div'),
-    propsData: { mr },
-  });
-};
+import mountComponent from '../../../helpers/vue_mount_component_helper';
 
 describe('MRWidgetFailedToMerge', () => {
-  describe('data', () => {
-    it('should have default data', () => {
-      const data = failedToMergeComponent.data();
+  let Component;
+  let vm;
+
+  beforeEach(() => {
+    Component = Vue.extend(failedToMergeComponent);
+    spyOn(eventHub, '$emit');
+    vm = mountComponent(Component, { mr: {
+      mergeError: 'Merge error happened.',
+    } });
+  });
 
-      expect(data.timer).toEqual(10);
-      expect(data.isRefreshing).toBeFalsy();
-    });
+  afterEach(() => {
+    vm.$destroy();
   });
 
   describe('computed', () => {
     describe('timerText', () => {
       it('should return correct timer text', () => {
-        const vm = createComponent();
-        expect(vm.timerText).toEqual('10 seconds');
+        expect(vm.timerText).toEqual('Refreshing in 10 seconds to show the updated status...');
 
         vm.timer = 1;
-        expect(vm.timerText).toEqual('a second');
+        expect(vm.timerText).toEqual('Refreshing in a second to show the updated status...');
       });
     });
   });
 
   describe('created', () => {
     it('should disable polling', () => {
-      spyOn(eventHub, '$emit');
-      createComponent();
-
       expect(eventHub.$emit).toHaveBeenCalledWith('DisablePolling');
     });
   });
@@ -47,13 +39,10 @@ describe('MRWidgetFailedToMerge', () => {
   describe('methods', () => {
     describe('refresh', () => {
       it('should emit event to request component refresh', () => {
-        spyOn(eventHub, '$emit');
-        const vm = createComponent();
-
-        expect(vm.isRefreshing).toBeFalsy();
+        expect(vm.isRefreshing).toEqual(false);
 
         vm.refresh();
-        expect(vm.isRefreshing).toBeTruthy();
+        expect(vm.isRefreshing).toEqual(true);
         expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
         expect(eventHub.$emit).toHaveBeenCalledWith('EnablePolling');
       });
@@ -61,12 +50,11 @@ describe('MRWidgetFailedToMerge', () => {
 
     describe('updateTimer', () => {
       it('should update timer and emit event when timer end', () => {
-        const vm = createComponent();
         spyOn(vm, 'refresh');
 
         expect(vm.timer).toEqual(10);
 
-        for (let i = 0; i < 10; i++) { // eslint-disable-line
+        for (let i = 0; i < 10; i += 1) {
           expect(vm.timer).toEqual(10 - i);
           vm.updateTimer();
         }
@@ -76,47 +64,54 @@ describe('MRWidgetFailedToMerge', () => {
     });
   });
 
-  describe('template', () => {
-    let vm;
-    let el;
+  describe('while it is refreshing', () => {
+    it('renders Refresing now', (done) => {
+      vm.isRefreshing = true;
 
-    beforeEach(() => {
-      vm = createComponent();
-      el = vm.$el;
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.js-refresh-label').textContent.trim()).toEqual('Refreshing now');
+        done();
+      });
     });
+  });
 
-    it('should have correct elements', (done) => {
-      expect(el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(el.innerText).toContain('Merge error happened.');
-      expect(el.innerText).toContain('Refreshing in 10 seconds');
-      expect(el.innerText).not.toContain('Merge failed.');
-      expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(el.querySelector('button').innerText).toContain('Merge');
-      expect(el.querySelector('.js-refresh-button').innerText).toContain('Refresh now');
-      expect(el.querySelector('.js-refresh-label')).toEqual(null);
-      expect(el.innerText).not.toContain('Refreshing now');
-      setTimeout(() => {
-        expect(el.innerText).toContain('Refreshing in 9 seconds');
-        done();
-      }, 1010);
+  describe('while it is not regresing', () => {
+    it('renders warning icon and disabled merge button', () => {
+      expect(vm.$el.querySelector('.js-ci-status-icon-warning')).not.toBeNull();
+      expect(vm.$el.querySelector('.js-disabled-merge-button').getAttribute('disabled')).toEqual('disabled');
+    });
+
+    it('renders given error', () => {
+      expect(vm.$el.querySelector('.has-error-message').textContent.trim()).toEqual('Merge error happened..');
     });
 
-    it('should just generic merge failed message if merge_error is not available', (done) => {
-      vm.mr.mergeError = null;
+    it('renders refresh button', () => {
+      expect(vm.$el.querySelector('.js-refresh-button').textContent.trim()).toEqual('Refresh now');
+    });
 
-      Vue.nextTick(() => {
-        expect(el.innerText).toContain('Merge failed.');
-        expect(el.innerText).not.toContain('Merge error happened.');
-        done();
-      });
+    it('renders remaining time', () => {
+      expect(
+        vm.$el.querySelector('.has-custom-error').textContent.trim(),
+      ).toEqual('Refreshing in 10 seconds to show the updated status...');
+    });
+  });
+
+  it('should just generic merge failed message if merge_error is not available', (done) => {
+    vm.mr.mergeError = null;
+
+    Vue.nextTick(() => {
+      expect(vm.$el.innerText).toContain('Merge failed.');
+      expect(vm.$el.innerText).not.toContain('Merge error happened.');
+      done();
     });
+  });
 
-    it('should show refresh label when refresh requested', () => {
-      vm.refresh();
-      Vue.nextTick(() => {
-        expect(el.innerText).not.toContain('Merge failed. Refreshing');
-        expect(el.innerText).toContain('Refreshing now');
-      });
+  it('should show refresh label when refresh requested', (done) => {
+    vm.refresh();
+    Vue.nextTick(() => {
+      expect(vm.$el.innerText).not.toContain('Merge failed. Refreshing');
+      expect(vm.$el.innerText).toContain('Refreshing now');
+      done();
     });
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js
index 5f4df15bcd6..df56c4e2c5c 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js
@@ -1,77 +1,50 @@
 import Vue from 'vue';
-import mwpsComponent from '~/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds';
+import mwpsComponent from '~/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue';
 import eventHub from '~/vue_merge_request_widget/event_hub';
-
-const targetBranchPath = '/foo/bar';
-const targetBranch = 'foo';
-const sha = '1EA2EZ34';
-
-const createComponent = () => {
-  const Component = Vue.extend(mwpsComponent);
-  const mr = {
-    shouldRemoveSourceBranch: false,
-    canRemoveSourceBranch: true,
-    canCancelAutomaticMerge: true,
-    mergeUserId: 1,
-    currentUserId: 1,
-    setToMWPSBy: {},
-    sha,
-    targetBranchPath,
-    targetBranch,
-  };
-
-  const service = {
-    cancelAutomaticMerge() {},
-    mergeResource: {
-      save() {},
-    },
-  };
-
-  return new Component({
-    el: document.createElement('div'),
-    propsData: { mr, service },
-  });
-};
+import mountComponent from '../../../helpers/vue_mount_component_helper';
 
 describe('MRWidgetMergeWhenPipelineSucceeds', () => {
-  describe('props', () => {
-    it('should have props', () => {
-      const { mr, service } = mwpsComponent.props;
-
-      expect(mr.type instanceof Object).toBeTruthy();
-      expect(mr.required).toBeTruthy();
-
-      expect(service.type instanceof Object).toBeTruthy();
-      expect(service.required).toBeTruthy();
+  let vm;
+  const targetBranchPath = '/foo/bar';
+  const targetBranch = 'foo';
+  const sha = '1EA2EZ34';
+
+  beforeEach(() => {
+    const Component = Vue.extend(mwpsComponent);
+    spyOn(eventHub, '$emit');
+
+    vm = mountComponent(Component, {
+      mr: {
+        shouldRemoveSourceBranch: false,
+        canRemoveSourceBranch: true,
+        canCancelAutomaticMerge: true,
+        mergeUserId: 1,
+        currentUserId: 1,
+        setToMWPSBy: {},
+        sha,
+        targetBranchPath,
+        targetBranch,
+      },
+      service: {
+        cancelAutomaticMerge() {},
+        mergeResource: {
+          save() {},
+        },
+      },
     });
   });
 
-  describe('components', () => {
-    it('should have components added', () => {
-      expect(mwpsComponent.components['mr-widget-author']).toBeDefined();
-    });
-  });
-
-  describe('data', () => {
-    it('should have default data', () => {
-      const data = mwpsComponent.data();
-
-      expect(data.isCancellingAutoMerge).toBeFalsy();
-      expect(data.isRemovingSourceBranch).toBeFalsy();
-    });
+  afterEach(() => {
+    vm.$destroy();
   });
 
   describe('computed', () => {
     describe('canRemoveSourceBranch', () => {
       it('should return true when user is able to remove source branch', () => {
-        const vm = createComponent();
-
         expect(vm.canRemoveSourceBranch).toBeTruthy();
       });
 
       it('should return false when user id is not the same with who set the MWPS', () => {
-        const vm = createComponent();
-
         vm.mr.mergeUserId = 2;
         expect(vm.canRemoveSourceBranch).toBeFalsy();
 
@@ -83,15 +56,11 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
       });
 
       it('should return false when shouldRemoveSourceBranch set to false', () => {
-        const vm = createComponent();
-
         vm.mr.shouldRemoveSourceBranch = true;
         expect(vm.canRemoveSourceBranch).toBeFalsy();
       });
 
       it('should return false if user is not able to remove the source branch', () => {
-        const vm = createComponent();
-
         vm.mr.canRemoveSourceBranch = false;
         expect(vm.canRemoveSourceBranch).toBeFalsy();
       });
@@ -101,11 +70,9 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
   describe('methods', () => {
     describe('cancelAutomaticMerge', () => {
       it('should set flag and call service then tell main component to update the widget with data', (done) => {
-        const vm = createComponent();
         const mrObj = {
           is_new_mr_data: true,
         };
-        spyOn(eventHub, '$emit');
         spyOn(vm.service, 'cancelAutomaticMerge').and.returnValue(new Promise((resolve) => {
           resolve({
             data: mrObj,
@@ -123,8 +90,6 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
 
     describe('removeSourceBranch', () => {
       it('should set flag and call service then request main component to update the widget', (done) => {
-        const vm = createComponent();
-        spyOn(eventHub, '$emit');
         spyOn(vm.service.mergeResource, 'save').and.returnValue(new Promise((resolve) => {
           resolve({
             data: {
@@ -148,31 +113,23 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
   });
 
   describe('template', () => {
-    let vm;
-    let el;
-
-    beforeEach(() => {
-      vm = createComponent();
-      el = vm.$el;
-    });
-
     it('should have correct elements', () => {
-      expect(el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(el.innerText).toContain('to be merged automatically when the pipeline succeeds');
-      expect(el.innerText).toContain('The changes will be merged into');
-      expect(el.innerText).toContain(targetBranch);
-      expect(el.innerText).toContain('The source branch will not be removed');
-      expect(el.querySelector('.js-cancel-auto-merge').innerText).toContain('Cancel automatic merge');
-      expect(el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeFalsy();
-      expect(el.querySelector('.js-remove-source-branch').innerText).toContain('Remove source branch');
-      expect(el.querySelector('.js-remove-source-branch').getAttribute('disabled')).toBeFalsy();
+      expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
+      expect(vm.$el.innerText).toContain('to be merged automatically when the pipeline succeeds');
+      expect(vm.$el.innerText).toContain('The changes will be merged into');
+      expect(vm.$el.innerText).toContain(targetBranch);
+      expect(vm.$el.innerText).toContain('The source branch will not be removed');
+      expect(vm.$el.querySelector('.js-cancel-auto-merge').innerText).toContain('Cancel automatic merge');
+      expect(vm.$el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeFalsy();
+      expect(vm.$el.querySelector('.js-remove-source-branch').innerText).toContain('Remove source branch');
+      expect(vm.$el.querySelector('.js-remove-source-branch').getAttribute('disabled')).toBeFalsy();
     });
 
     it('should disable cancel auto merge button when the action is in progress', (done) => {
       vm.isCancellingAutoMerge = true;
 
       Vue.nextTick(() => {
-        expect(el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeTruthy();
+        expect(vm.$el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeTruthy();
         done();
       });
     });
@@ -181,7 +138,7 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
       vm.mr.shouldRemoveSourceBranch = true;
 
       Vue.nextTick(() => {
-        const normalizedText = el.innerText.replace(/\s+/g, ' ');
+        const normalizedText = vm.$el.innerText.replace(/\s+/g, ' ');
         expect(normalizedText).toContain('The source branch will be removed');
         expect(normalizedText).not.toContain('The source branch will not be removed');
         done();
@@ -192,7 +149,7 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
       vm.mr.currentUserId = 4;
 
       Vue.nextTick(() => {
-        expect(el.querySelector('.js-remove-source-branch')).toEqual(null);
+        expect(vm.$el.querySelector('.js-remove-source-branch')).toEqual(null);
         done();
       });
     });
@@ -201,7 +158,7 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
       vm.isRemovingSourceBranch = true;
 
       Vue.nextTick(() => {
-        expect(el.querySelector('.js-remove-source-branch').getAttribute('disabled')).toBeTruthy();
+        expect(vm.$el.querySelector('.js-remove-source-branch').getAttribute('disabled')).toBeTruthy();
         done();
       });
     });