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

Moves merge help into a vue component

Browse source
This commit is contained in:
Filipa Lacerda 2018-01-31 11:37:30 +00:00
parent bebb9c0c6d
commit 1533cf1053
No known key found for this signature in database
GPG key ID: 9CA3FDE4D1E2F1C8
5 changed files with 66 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js
View file

@ -1,23 +0,0 @@
export default {
name: 'MRWidgetMergeHelp',
props: {
missingBranch: { type: String, required: false, default: '' },
},
template: `
<section class="mr-widget-help">
<template
v-if="missingBranch">
If the {{missingBranch}} branch exists in your local repository, you
</template>
<template v-else>
You
</template>
can merge this merge request manually using the
<a
data-toggle="modal"
href="#modal_merge_info">
command line
</a>
</section>
`,
};

39
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue Normal file
View file

@ -0,0 +1,39 @@
<script>
import { sprintf, s__ } from '~/locale';
export default {
name: 'MRWidgetMergeHelp',
props: {
missingBranch: {
type: String,
required: false,
default: ''
},
},
computed: {
missingBranchInfo() {
return sprintf(
s__('mrWidget|If the %{branch} branch exists in your local repository, you can merge this merge request manually using the'),
{ branch: this.missingBranch }
);
},
},
};
</script>
<template>
<section class="mr-widget-help">
<template v-if="missingBranch">
{{ missingBranchInfo }}
</template>
<template v-else>
{{ s__("mrWidget|You can merge this merge request manually using the") }}
</template>
<a
role="button"
data-toggle="modal"
href="#modal_merge_info">
{{ s__("mrWidget|command line") }}
</a>
</section>
</template>

2
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
View file

@ -1,6 +1,6 @@
import statusIcon from '../mr_widget_status_icon.vue';
import tooltip from '../../../vue_shared/directives/tooltip';
import mrWidgetMergeHelp from '../../components/mr_widget_merge_help';
import mrWidgetMergeHelp from '../../components/mr_widget_merge_help.vue';
export default {
name: 'MRWidgetMissingBranch',

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

@ -12,7 +12,7 @@
export { default as Vue } from 'vue';
export { default as SmartInterval } from '~/smart_interval';
export { default as WidgetHeader } from './components/mr_widget_header';
export { default as WidgetMergeHelp } from './components/mr_widget_merge_help';
export { default as WidgetMergeHelp } from './components/mr_widget_merge_help.vue';
export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue';
export { default as WidgetDeployment } from './components/mr_widget_deployment';
export { default as WidgetRelatedLinks } from './components/mr_widget_related_links';

63
spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js
View file

@ -1,51 +1,38 @@
import Vue from 'vue';
import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help';
import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
const props = {
missingBranch: 'this-is-not-the-branch-you-are-looking-for',
};
const text = `If the ${props.missingBranch} branch exists in your local repository`;
const createComponent = () => {
const Component = Vue.extend(mergeHelpComponent);
return new Component({
el: document.createElement('div'),
propsData: props,
});
};
describe('MRWidgetMergeHelp', () => {
describe('props', () => {
it('should have props', () => {
const { missingBranch } = mergeHelpComponent.props;
const MissingBranchTypeClass = missingBranch.type;
let vm;
let Component;
beforeEach(() => {
Component = Vue.extend(mergeHelpComponent);
});
afterEach(() => {
vm.$destroy();
});
fdescribe('with missing branch', () => {
beforeEach(() => {
vm = mountComponent(Component, {
missingBranch: 'this-is-not-the-branch-you-are-looking-for',
});
});
it('renders missing branch information', () => {
console.log('', vm.$el);
expect(new MissingBranchTypeClass() instanceof String).toBeTruthy();
expect(missingBranch.required).toBeFalsy();
expect(missingBranch.default).toEqual('');
});
});
describe('template', () => {
let vm;
let el;
describe('without missing branch', () => {
beforeEach(() => {
vm = createComponent();
el = vm.$el;
});
it('should have the correct elements', () => {
expect(el.classList.contains('mr-widget-help')).toBeTruthy();
expect(el.textContent).toContain(text);
});
it('should not show missing branch name if missingBranch props is not provided', (done) => {
vm.missingBranch = null;
Vue.nextTick(() => {
expect(el.textContent).not.toContain(text);
done();
});
vm = mountComponent(Component);
});
});
});