Clear refresh interval when MRWidgetFailedToMerge component is destroyed

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue

 <script>
-  import { n__ } from '~/locale';
-  import statusIcon from '../mr_widget_status_icon.vue';
-  import eventHub from '../../event_hub';
+import { n__ } from '~/locale';
+import statusIcon from '../mr_widget_status_icon.vue';
+import eventHub from '../../event_hub';
 
-  export default {
+export default {
   name: 'MRWidgetFailedToMerge',
 
   components: {
@@ -22,6 +22,7 @@
     return {
       timer: 10,
       isRefreshing: false,
+      intervalId: null,
     };
   },
 
@@ -36,15 +37,19 @@
   },
 
   mounted() {
-      setInterval(() => {
-        this.updateTimer();
-      }, 1000);
+    this.intervalId = setInterval(this.updateTimer, 1000);
   },
 
   created() {
     eventHub.$emit('DisablePolling');
   },
 
+  beforeDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  },
+
   methods: {
     refresh() {
       this.isRefreshing = true;
@@ -59,8 +64,7 @@
       }
     },
   },
-
-  };
+};
 </script>
 <template>
   <div class="mr-widget-body media">

spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js

@@ -4,21 +4,37 @@ import eventHub from '~/vue_merge_request_widget/event_hub';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('MRWidgetFailedToMerge', () => {
+  const dummyIntervalId = 1337;
   let Component;
   let vm;
 
   beforeEach(() => {
     Component = Vue.extend(failedToMergeComponent);
     spyOn(eventHub, '$emit');
-    vm = mountComponent(Component, { mr: {
+    spyOn(window, 'setInterval').and.returnValue(dummyIntervalId);
+    spyOn(window, 'clearInterval').and.stub();
+    vm = mountComponent(Component, {
+      mr: {
         mergeError: 'Merge error happened.',
-    } });
+      },
+    });
   });
 
   afterEach(() => {
     vm.$destroy();
   });
 
+  it('sets interval to refresh', () => {
+    expect(window.setInterval).toHaveBeenCalledWith(vm.updateTimer, 1000);
+    expect(vm.intervalId).toBe(dummyIntervalId);
+  });
+
+  it('clears interval when destroying ', () => {
+    vm.$destroy();
+
+    expect(window.clearInterval).toHaveBeenCalledWith(dummyIntervalId);
+  });
+
   describe('computed', () => {
     describe('timerText', () => {
       it('should return correct timer text', () => {
@@ -65,11 +81,13 @@ describe('MRWidgetFailedToMerge', () => {
   });
 
   describe('while it is refreshing', () => {
-    it('renders Refresing now', (done) => {
+    it('renders Refresing now', done => {
       vm.isRefreshing = true;
 
       Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.js-refresh-label').textContent.trim()).toEqual('Refreshing now');
+        expect(vm.$el.querySelector('.js-refresh-label').textContent.trim()).toEqual(
+          'Refreshing now',
+        );
         done();
       });
     });
@@ -78,11 +96,15 @@ describe('MRWidgetFailedToMerge', () => {
   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');
+      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..');
+      expect(vm.$el.querySelector('.has-error-message').textContent.trim()).toEqual(
+        'Merge error happened..',
+      );
     });
 
     it('renders refresh button', () => {
@@ -90,13 +112,13 @@ describe('MRWidgetFailedToMerge', () => {
     });
 
     it('renders remaining time', () => {
-      expect(
-        vm.$el.querySelector('.has-custom-error').textContent.trim(),
-      ).toEqual('Refreshing in 10 seconds to show the updated status...');
+      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) => {
+  it('should just generic merge failed message if merge_error is not available', done => {
     vm.mr.mergeError = null;
 
     Vue.nextTick(() => {
@@ -106,7 +128,7 @@ describe('MRWidgetFailedToMerge', () => {
     });
   });
 
-  it('should show refresh label when refresh requested', (done) => {
+  it('should show refresh label when refresh requested', done => {
     vm.refresh();
     Vue.nextTick(() => {
       expect(vm.$el.innerText).not.toContain('Merge failed. Refreshing');