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

Moves status icon into a vue file and adds tests

Browse source 
Moves merging component into a vue file, adds i18n and better test cases
This commit is contained in:
Filipa Lacerda 2018-01-24 16:54:06 +00:00
parent 59a13575a1
commit 8f6f421643
No known key found for this signature in database
GPG key ID: 9CA3FDE4D1E2F1C8
26 changed files with 189 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
View file

@ -2,7 +2,7 @@ import { getTimeago } from '~/lib/utils/datetime_utility';
import { visitUrl } from '../../lib/utils/url_utility';
import Flash from '../../flash';
import MemoryUsage from './mr_widget_memory_usage';
import StatusIcon from './mr_widget_status_icon';
import StatusIcon from './mr_widget_status_icon.vue';
import MRWidgetService from '../services/mr_widget_service';
export default {

36
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js
View file

@ -1,36 +0,0 @@
import ciIcon from '../../vue_shared/components/ci_icon.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
export default {
props: {
status: { type: String, required: true },
showDisabledButton: { type: Boolean, required: false },
},
components: {
ciIcon,
loadingIcon,
},
computed: {
statusObj() {
return {
group: this.status,
icon: `status_${this.status}`,
};
},
},
template: `
<div class="space-children flex-container-block append-right-10">
<div v-if="status === 'loading'" class="mr-widget-icon">
<loading-icon />
</div>
<ci-icon v-else :status="statusObj" />
<button
v-if="showDisabledButton"
type="button"
class="js-disabled-merge-button btn btn-success btn-sm"
disabled="true">
Merge
</button>
</div>
`,
};

57
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue Normal file
View file

@ -0,0 +1,57 @@
<script>
import ciIcon from '../../vue_shared/components/ci_icon.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
export default {
components: {
ciIcon,
loadingIcon,
},
props: {
status: {
type: String,
required: true,
},
showDisabledButton: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
isLoading() {
return this.status === 'loading';
},
statusObj() {
return {
group: this.status,
icon: `status_${this.status}`,
};
},
},
};
</script>
<template>
<div class="space-children flex-container-block append-right-10">
<div
v-if="isLoading"
class="mr-widget-icon"
>
<loading-icon />
</div>
<ci-icon
v-else
:status="statusObj"
/>
<button
v-if="showDisabledButton"
type="button"
class="js-disabled-merge-button btn btn-success btn-sm"
disabled="true"
>
{{ s__("mrWidget|Merge") }}
</button>
</div>
</template>

2
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
View file

@ -1,5 +1,5 @@
<script>
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
export default {
name: 'MRWidgetArchived',

2
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
View file

@ -1,7 +1,7 @@
<script>
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import eventHub from '../../event_hub';
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
export default {
name: 'MRWidgetAutoMergeFailed',

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

@ -1,4 +1,4 @@
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
export default {
name: 'MRWidgetChecking',

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

@ -1,5 +1,5 @@
import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
export default {
name: 'MRWidgetClosed',

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

@ -1,4 +1,4 @@
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
export default {
name: 'MRWidgetConflicts',

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

@ -1,4 +1,4 @@
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
import eventHub from '../../event_hub';
export default {

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

@ -1,5 +1,5 @@
import Flash from '../../../flash';
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
import MRWidgetAuthor from '../../components/mr_widget_author';
import eventHub from '../../event_hub';

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

@ -2,7 +2,7 @@ import Flash from '../../../flash';
import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
import tooltip from '../../../vue_shared/directives/tooltip';
import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
import eventHub from '../../event_hub';
export default {

29
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.js
View file

@ -1,29 +0,0 @@
import statusIcon from '../mr_widget_status_icon';
export default {
name: 'MRWidgetMerging',
props: {
mr: { type: Object, required: true },
},
components: {
statusIcon,
},
template: `
<div class="mr-widget-body mr-state-locked media">
<status-icon status="loading" />
<div class="media-body">
<h4>
This merge request is in the process of being merged
</h4>
<section class="mr-info-list">
<p>
The changes will be merged into
<span class="label-branch">
<a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
</span>
</p>
</section>
</div>
</div>
`,
};

35
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue Normal file
View file

@ -0,0 +1,35 @@
<script>
import statusIcon from '../mr_widget_status_icon.vue';
export default {
name: 'MRWidgetMerging',
components: {
statusIcon,
},
props: {
mr: {
type: Object,
required: true,
default: () => ({}),
},
},
};
</script>
<template>
<div class="mr-widget-body mr-state-locked media">
<status-icon status="loading" />
<div class="media-body">
<h4>
{{ s__("mrWidget|This merge request is in the process of being merged") }}
</h4>
<section class="mr-info-list">
<p>
{{ s__("mrWidget|The changes will be merged into") }}
<span class="label-branch">
<a :href="mr.targetBranchPath">{{ mr.targetBranch }}</a>
</span>
</p>
</section>
</div>
</div>
</template>

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

@ -1,4 +1,4 @@
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
import tooltip from '../../../vue_shared/directives/tooltip';
import mrWidgetMergeHelp from '../../components/mr_widget_merge_help';

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

@ -1,4 +1,4 @@
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
export default {
name: 'MRWidgetNotAllowed',

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

@ -1,4 +1,4 @@
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
export default {
name: 'MRWidgetPipelineBlocked',

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

@ -1,4 +1,4 @@
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
export default {
name: 'MRWidgetPipelineBlocked',

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

@ -3,7 +3,7 @@ import warningSvg from 'icons/_icon_status_warning.svg';
import simplePoll from '~/lib/utils/simple_poll';
import MergeRequest from '../../../merge_request';
import Flash from '../../../flash';
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
import eventHub from '../../event_hub';
export default {

2
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
View file

@ -1,7 +1,7 @@
<script>
import simplePoll from '../../../lib/utils/simple_poll';
import eventHub from '../../event_hub';
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
import Flash from '../../../flash';

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

@ -1,4 +1,4 @@
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
export default {
name: 'MRWidgetSHAMismatch',

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

@ -1,4 +1,4 @@
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
export default {
name: 'MRWidgetUnresolvedDiscussions',

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

@ -1,4 +1,4 @@
import statusIcon from '../mr_widget_status_icon';
import statusIcon from '../mr_widget_status_icon.vue';
import tooltip from '../../../vue_shared/directives/tooltip';
import eventHub from '../../event_hub';

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

@ -19,7 +19,7 @@ export { default as WidgetRelatedLinks } from './components/mr_widget_related_li
export { default as MergedState } from './components/states/mr_widget_merged';
export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge';
export { default as ClosedState } from './components/states/mr_widget_closed';
export { default as MergingState } from './components/states/mr_widget_merging';
export { default as MergingState } from './components/states/mr_widget_merging.vue';
export { default as WipState } from './components/states/mr_widget_wip';
export { default as ArchivedState } from './components/states/mr_widget_archived.vue';
export { default as ConflictsState } from './components/states/mr_widget_conflicts';

44
spec/javascripts/vue_mr_widget/components/mr_widget_status_icon_spec.js Normal file
View file

@ -0,0 +1,44 @@
import Vue from 'vue';
import mrStatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
describe('MR widget status icon component', () => {
let vm;
let Component;
beforeEach(() => {
Component = Vue.extend(mrStatusIcon);
});
afterEach(() => {
vm.$destroy();
});
describe('while loading', () => {
it('renders loading icon', () => {
vm = mountComponent(Component, { status: 'loading' });
expect(vm.$el.querySelector('.mr-widget-icon i').classList).toContain('fa-spinner');
});
});
describe('with status icon', () => {
it('renders ci status icon', () => {
vm = mountComponent(Component, { status: 'failed' });
expect(vm.$el.querySelector('.js-ci-status-icon-failed')).not.toBeNull();
});
});
describe('with disabled button', () => {
it('renders a disabled button', () => {
vm = mountComponent(Component, { status: 'failed', showDisabledButton: true });
expect(vm.$el.querySelector('.js-disabled-merge-button').textContent.trim()).toEqual('Merge');
});
});
describe('without disabled button', () => {
it('does not render a disabled button', () => {
vm = mountComponent(Component, { status: 'failed' });
expect(vm.$el.querySelector('.js-disabled-merge-button')).toBeNull();
});
});
});

33
spec/javascripts/vue_mr_widget/components/states/mr_widget_locked_spec.js
View file

@ -1,33 +0,0 @@
import Vue from 'vue';
import mergingComponent from '~/vue_merge_request_widget/components/states/mr_widget_merging';
describe('MRWidgetMerging', () => {
describe('props', () => {
it('should have props', () => {
const { mr } = mergingComponent.props;
expect(mr.type instanceof Object).toBeTruthy();
expect(mr.required).toBeTruthy();
});
});
describe('template', () => {
it('should have correct elements', () => {
const Component = Vue.extend(mergingComponent);
const mr = {
targetBranchPath: '/branch-path',
targetBranch: 'branch',
};
const el = new Component({
el: document.createElement('div'),
propsData: { mr },
}).$el;
expect(el.classList.contains('mr-widget-body')).toBeTruthy();
expect(el.innerText).toContain('This merge request is in the process of being merged');
expect(el.innerText).toContain('changes will be merged into');
expect(el.querySelector('.label-branch a').getAttribute('href')).toEqual(mr.targetBranchPath);
expect(el.querySelector('.label-branch a').textContent).toContain(mr.targetBranch);
});
});
});

34
spec/javascripts/vue_mr_widget/components/states/mr_widget_merging_spec.js Normal file
View file

@ -0,0 +1,34 @@
import Vue from 'vue';
import mergingComponent from '~/vue_merge_request_widget/components/states/mr_widget_merging.vue';
import mountComponent from '../../../helpers/vue_mount_component_helper';
describe('MRWidgetMerging', () => {
let vm;
beforeEach(() => {
const Component = Vue.extend(mergingComponent);
vm = mountComponent(Component, { mr: {
targetBranchPath: '/branch-path',
targetBranch: 'branch',
} });
});
afterEach(() => {
vm.$destroy();
});
it('renders information about merge request being merged', () => {
expect(
vm.$el.querySelector('.media-body').textContent.trim(),
).toEqual('This merge request is in the process of being merged');
});
it('renders branch information', () => {
expect(
vm.$el.querySelector('.mr-info-list').textContent.trim().replace(/\s\s+/g, ' ').replace(/[\r\n]+/g, ' '),
).toEqual('The changes will be merged into branch');
expect(
vm.$el.querySelector('a').getAttribute('href'),
).toEqual('/branch-path');
});
});