Commit d6e63f98 authored by Phil Hughes's avatar Phil Hughes

Merge branch 'vue-mr-widget-state' into 'master'

Move mr_widget_auto_merge_failed component into a vue file

See merge request gitlab-org/gitlab-ce!16564
parents 6d9da738 5de85992
import eventHub from '../../event_hub';
import statusIcon from '../mr_widget_status_icon';
export default {
name: 'MRWidgetAutoMergeFailed',
props: {
mr: { type: Object, required: true },
},
data() {
return {
isRefreshing: false,
};
},
components: {
statusIcon,
},
methods: {
refreshWidget() {
this.isRefreshing = true;
eventHub.$emit('MRWidgetUpdateRequested', () => {
this.isRefreshing = false;
});
},
},
template: `
<div class="mr-widget-body media">
<status-icon status="warning" />
<div class="media-body space-children">
<span class="bold">
<template v-if="mr.mergeError">{{mr.mergeError}}.</template>
This merge request failed to be merged automatically
</span>
<button
@click="refreshWidget"
:disabled="isRefreshing"
type="button"
class="btn btn-xs btn-default">
<i
v-if="isRefreshing"
class="fa fa-spinner fa-spin"
aria-hidden="true" />
Refresh
</button>
</div>
</div>
`,
};
<script>
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import eventHub from '../../event_hub';
import statusIcon from '../mr_widget_status_icon';
export default {
name: 'MRWidgetAutoMergeFailed',
components: {
statusIcon,
loadingIcon,
},
props: {
mr: {
type: Object,
required: true,
},
},
data() {
return {
isRefreshing: false,
};
},
methods: {
refreshWidget() {
this.isRefreshing = true;
eventHub.$emit('MRWidgetUpdateRequested', () => {
this.isRefreshing = false;
});
},
},
};
</script>
<template>
<div class="mr-widget-body media">
<status-icon status="warning" />
<div class="media-body space-children">
<span class="bold">
<template v-if="mr.mergeError">{{ mr.mergeError }}.</template>
{{ s__("mrWidget|This merge request failed to be merged automatically") }}
</span>
<button
@click="refreshWidget"
:disabled="isRefreshing"
type="button"
class="btn btn-xs btn-default"
>
<loading-icon v-if="isRefreshing" />
{{ s__("mrWidget|Refresh") }}
</button>
</div>
</div>
</template>
...@@ -33,7 +33,7 @@ export { default as PipelineBlockedState } from './components/states/mr_widget_p ...@@ -33,7 +33,7 @@ export { default as PipelineBlockedState } from './components/states/mr_widget_p
export { default as PipelineFailedState } from './components/states/mr_widget_pipeline_failed'; 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';
export { default as RebaseState } from './components/states/mr_widget_rebase.vue'; export { default as RebaseState } from './components/states/mr_widget_rebase.vue';
export { default as AutoMergeFailed } from './components/states/mr_widget_auto_merge_failed'; export { default as AutoMergeFailed } from './components/states/mr_widget_auto_merge_failed.vue';
export { default as CheckingState } from './components/states/mr_widget_checking'; export { default as CheckingState } from './components/states/mr_widget_checking';
export { default as MRWidgetStore } from './stores/mr_widget_store'; export { default as MRWidgetStore } from './stores/mr_widget_store';
export { default as MRWidgetService } from './services/mr_widget_service'; export { default as MRWidgetService } from './services/mr_widget_service';
......
import Vue from 'vue'; import Vue from 'vue';
import autoMergeFailedComponent from '~/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed'; import autoMergeFailedComponent from '~/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue';
import eventHub from '~/vue_merge_request_widget/event_hub';
const mergeError = 'This is the merge error'; import mountComponent from '../../../helpers/vue_mount_component_helper';
describe('MRWidgetAutoMergeFailed', () => { describe('MRWidgetAutoMergeFailed', () => {
describe('props', () => { let vm;
it('should have props', () => { const mergeError = 'This is the merge error';
const mrProp = autoMergeFailedComponent.props.mr;
expect(mrProp.type instanceof Object).toBeTruthy(); beforeEach(() => {
expect(mrProp.required).toBeTruthy(); const Component = Vue.extend(autoMergeFailedComponent);
vm = mountComponent(Component, {
mr: { mergeError },
}); });
}); });
describe('template', () => { afterEach(() => {
const Component = Vue.extend(autoMergeFailedComponent); vm.$destroy();
const vm = new Component({ });
el: document.createElement('div'),
propsData: { it('renders failed message', () => {
mr: { mergeError }, expect(vm.$el.textContent).toContain('This merge request failed to be merged automatically');
},
}); });
it('should have correct elements', () => { it('renders merge error provided', () => {
expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeFalsy();
expect(vm.$el.innerText).toContain('This merge request failed to be merged automatically');
expect(vm.$el.innerText).toContain(mergeError); expect(vm.$el.innerText).toContain(mergeError);
}); });
it('render refresh button', () => {
expect(vm.$el.querySelector('button').textContent.trim()).toEqual('Refresh');
});
it('emits event and shows loading icon when button is clicked', (done) => {
spyOn(eventHub, '$emit');
vm.$el.querySelector('button').click();
expect(eventHub.$emit.calls.argsFor(0)[0]).toEqual('MRWidgetUpdateRequested');
Vue.nextTick(() => {
expect(vm.$el.querySelector('button').getAttribute('disabled')).toEqual('disabled');
expect(
vm.$el.querySelector('button i').classList,
).toContain('fa-spinner');
done();
});
}); });
}); });
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