Commit df51cf69 authored by Clement Ho's avatar Clement Ho

Merge branch 'winh-clear-interval-merge-request-failed' into 'master'

Clear refresh interval when MRWidgetFailedToMerge component is destroyed

See merge request gitlab-org/gitlab-ce!18600
parents c73b5d31 95b47df5
No related merge requests found
<script> <script>
import { n__ } from '~/locale'; import { n__ } from '~/locale';
import statusIcon from '../mr_widget_status_icon.vue'; import statusIcon from '../mr_widget_status_icon.vue';
import eventHub from '../../event_hub'; import eventHub from '../../event_hub';
export default { export default {
name: 'MRWidgetFailedToMerge', name: 'MRWidgetFailedToMerge',
components: { components: {
statusIcon, statusIcon,
}, },
props: { props: {
mr: { mr: {
type: Object, type: Object,
required: true, required: true,
default: () => ({}), default: () => ({}),
},
}, },
},
data() { data() {
return { return {
timer: 10, timer: 10,
isRefreshing: false, isRefreshing: false,
}; intervalId: null,
}, };
},
computed: { computed: {
timerText() { timerText() {
return n__( return n__(
'Refreshing in a second to show the updated status...', 'Refreshing in a second to show the updated status...',
'Refreshing in %d seconds to show the updated status...', 'Refreshing in %d seconds to show the updated status...',
this.timer, this.timer,
); );
},
}, },
},
mounted() { mounted() {
setInterval(() => { this.intervalId = setInterval(this.updateTimer, 1000);
this.updateTimer(); },
}, 1000);
},
created() { created() {
eventHub.$emit('DisablePolling'); eventHub.$emit('DisablePolling');
}, },
methods: { beforeDestroy() {
refresh() { if (this.intervalId) {
this.isRefreshing = true; clearInterval(this.intervalId);
eventHub.$emit('MRWidgetUpdateRequested'); }
eventHub.$emit('EnablePolling'); },
},
updateTimer() {
this.timer = this.timer - 1;
if (this.timer === 0) { methods: {
this.refresh(); refresh() {
} this.isRefreshing = true;
}, eventHub.$emit('MRWidgetUpdateRequested');
eventHub.$emit('EnablePolling');
}, },
updateTimer() {
this.timer = this.timer - 1;
}; if (this.timer === 0) {
this.refresh();
}
},
},
};
</script> </script>
<template> <template>
<div class="mr-widget-body media"> <div class="mr-widget-body media">
......
...@@ -4,21 +4,37 @@ import eventHub from '~/vue_merge_request_widget/event_hub'; ...@@ -4,21 +4,37 @@ import eventHub from '~/vue_merge_request_widget/event_hub';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'spec/helpers/vue_mount_component_helper';
describe('MRWidgetFailedToMerge', () => { describe('MRWidgetFailedToMerge', () => {
const dummyIntervalId = 1337;
let Component; let Component;
let vm; let vm;
beforeEach(() => { beforeEach(() => {
Component = Vue.extend(failedToMergeComponent); Component = Vue.extend(failedToMergeComponent);
spyOn(eventHub, '$emit'); spyOn(eventHub, '$emit');
vm = mountComponent(Component, { mr: { spyOn(window, 'setInterval').and.returnValue(dummyIntervalId);
mergeError: 'Merge error happened.', spyOn(window, 'clearInterval').and.stub();
} }); vm = mountComponent(Component, {
mr: {
mergeError: 'Merge error happened.',
},
});
}); });
afterEach(() => { afterEach(() => {
vm.$destroy(); 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('computed', () => {
describe('timerText', () => { describe('timerText', () => {
it('should return correct timer text', () => { it('should return correct timer text', () => {
...@@ -65,11 +81,13 @@ describe('MRWidgetFailedToMerge', () => { ...@@ -65,11 +81,13 @@ describe('MRWidgetFailedToMerge', () => {
}); });
describe('while it is refreshing', () => { describe('while it is refreshing', () => {
it('renders Refresing now', (done) => { it('renders Refresing now', done => {
vm.isRefreshing = true; vm.isRefreshing = true;
Vue.nextTick(() => { 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(); done();
}); });
}); });
...@@ -78,11 +96,15 @@ describe('MRWidgetFailedToMerge', () => { ...@@ -78,11 +96,15 @@ describe('MRWidgetFailedToMerge', () => {
describe('while it is not regresing', () => { describe('while it is not regresing', () => {
it('renders warning icon and disabled merge button', () => { it('renders warning icon and disabled merge button', () => {
expect(vm.$el.querySelector('.js-ci-status-icon-warning')).not.toBeNull(); 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', () => { 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', () => { it('renders refresh button', () => {
...@@ -90,13 +112,13 @@ describe('MRWidgetFailedToMerge', () => { ...@@ -90,13 +112,13 @@ describe('MRWidgetFailedToMerge', () => {
}); });
it('renders remaining time', () => { it('renders remaining time', () => {
expect( expect(vm.$el.querySelector('.has-custom-error').textContent.trim()).toEqual(
vm.$el.querySelector('.has-custom-error').textContent.trim(), 'Refreshing in 10 seconds to show the updated status...',
).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; vm.mr.mergeError = null;
Vue.nextTick(() => { Vue.nextTick(() => {
...@@ -106,7 +128,7 @@ describe('MRWidgetFailedToMerge', () => { ...@@ -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(); vm.refresh();
Vue.nextTick(() => { Vue.nextTick(() => {
expect(vm.$el.innerText).not.toContain('Merge failed. Refreshing'); expect(vm.$el.innerText).not.toContain('Merge failed. Refreshing');
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment