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
This commit is contained in:
commit
d6e63f9848
|
@ -1,47 +0,0 @@
|
|||
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>
|
||||
`,
|
||||
};
|
|
@ -0,0 +1,52 @@
|
|||
<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
|
|||
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 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 MRWidgetStore } from './stores/mr_widget_store';
|
||||
export { default as MRWidgetService } from './services/mr_widget_service';
|
||||
|
|
|
@ -1,32 +1,47 @@
|
|||
import Vue from 'vue';
|
||||
import autoMergeFailedComponent from '~/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed';
|
||||
|
||||
const mergeError = 'This is the merge error';
|
||||
import autoMergeFailedComponent from '~/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue';
|
||||
import eventHub from '~/vue_merge_request_widget/event_hub';
|
||||
import mountComponent from '../../../helpers/vue_mount_component_helper';
|
||||
|
||||
describe('MRWidgetAutoMergeFailed', () => {
|
||||
describe('props', () => {
|
||||
it('should have props', () => {
|
||||
const mrProp = autoMergeFailedComponent.props.mr;
|
||||
let vm;
|
||||
const mergeError = 'This is the merge error';
|
||||
|
||||
expect(mrProp.type instanceof Object).toBeTruthy();
|
||||
expect(mrProp.required).toBeTruthy();
|
||||
beforeEach(() => {
|
||||
const Component = Vue.extend(autoMergeFailedComponent);
|
||||
vm = mountComponent(Component, {
|
||||
mr: { mergeError },
|
||||
});
|
||||
});
|
||||
|
||||
describe('template', () => {
|
||||
const Component = Vue.extend(autoMergeFailedComponent);
|
||||
const vm = new Component({
|
||||
el: document.createElement('div'),
|
||||
propsData: {
|
||||
mr: { mergeError },
|
||||
},
|
||||
});
|
||||
afterEach(() => {
|
||||
vm.$destroy();
|
||||
});
|
||||
|
||||
it('should have correct elements', () => {
|
||||
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);
|
||||
it('renders failed message', () => {
|
||||
expect(vm.$el.textContent).toContain('This merge request failed to be merged automatically');
|
||||
});
|
||||
|
||||
it('renders merge error provided', () => {
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue