kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Move mr_widget_auto_merge_failed component into a vue file

This commit is contained in:
Filipa Lacerda 2018-01-18 17:33:06 +00:00
parent e56bcf9277
commit 86bc36c547
No known key found for this signature in database
GPG Key ID: 9CA3FDE4D1E2F1C8
5 changed files with 92 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js
View File

@ -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="failed" />
<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>
`,
};

52
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue Normal file
View File

@ -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="failed" />
<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>

2
app/assets/javascripts/vue_merge_request_widget/dependencies.js
View File

@ -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';

3
app/assets/javascripts/vue_merge_request_widget/index.js
View File

@ -2,6 +2,9 @@ import {
Vue,
mrWidgetOptions,
} from './dependencies';
import Translate from '../vue_shared/translate';
Vue.use(Translate);
document.addEventListener('DOMContentLoaded', () => {
gl.mrWidgetData.gitlabLogo = gon.gitlab_logo;

57
spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js
View File

@ -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();
});
});
});