Skip to content

G
gitlab-ce
Commit 6b24028b authored by Filipa Lacerda's avatar Filipa Lacerda
Browse files
Options

Moves components into vue files: 

  - mr_widget_failed_to_merge
  - mr_widget_merge_when_pipeline_succeeds
Adds i18n
parent 7ea8ea8e
Show whitespace changes
Inline Side-by-side
Showing with 357 additions and 355 deletions
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js deleted 100644 → 0
View file @ 7ea8ea8e
import statusIcon from '../mr_widget_status_icon.vue';
import eventHub from '../../event_hub';
export default {
name: 'MRWidgetFailedToMerge',
props: {
mr: { type: Object, required: true },
},
data() {
return {
timer: 10,
isRefreshing: false,
};
},
mounted() {
setInterval(() => {
this.updateTimer();
}, 1000);
},
created() {
eventHub.$emit('DisablePolling');
},
computed: {
timerText() {
return this.timer > 1 ? `${this.timer} seconds` : 'a second';
},
},
methods: {
refresh() {
this.isRefreshing = true;
eventHub.$emit('MRWidgetUpdateRequested');
eventHub.$emit('EnablePolling');
},
updateTimer() {
this.timer = this.timer - 1;
if (this.timer === 0) {
this.refresh();
}
},
},
components: {
statusIcon,
},
template: `
<div class="mr-widget-body media">
<template v-if="isRefreshing">
<status-icon status="loading" />
<span class="media-body bold js-refresh-label">
Refreshing now
</span>
</template>
<template v-else>
<status-icon status="warning" :show-disabled-button="true" />
<div class="media-body space-children">
<span class="bold">
<span
class="has-error-message"
v-if="mr.mergeError">
{{mr.mergeError}}.
</span>
<span v-else>Merge failed.</span>
<span
:class="{ 'has-custom-error': mr.mergeError }">
Refreshing in {{timerText}} to show the updated status...
</span>
</span>
<button
@click="refresh"
class="btn btn-default btn-xs js-refresh-button"
type="button">
Refresh now
</button>
</div>
</template>
</div>
`,
};
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue 0 → 100644
View file @ 6b24028b
<script>
import { n__ } from '~/locale';
import statusIcon from '../mr_widget_status_icon.vue';
import eventHub from '../../event_hub';
export default {
name: 'MRWidgetFailedToMerge',
components: {
statusIcon,
},
props: {
mr: {
type: Object,
required: true,
default: () => ({}),
},
},
data() {
return {
timer: 10,
isRefreshing: false,
};
},
computed: {
timerText() {
return n__(
'Refreshing in a second to show the updated status...',
'Refreshing in %d seconds to show the updated status...',
this.timer,
);
},
},
mounted() {
setInterval(() => {
this.updateTimer();
}, 1000);
},
created() {
eventHub.$emit('DisablePolling');
},
methods: {
refresh() {
this.isRefreshing = true;
eventHub.$emit('MRWidgetUpdateRequested');
eventHub.$emit('EnablePolling');
},
updateTimer() {
this.timer = this.timer - 1;
if (this.timer === 0) {
this.refresh();
}
},
},
};
</script>
<template>
<div class="mr-widget-body media">
<template v-if="isRefreshing">
<status-icon status="loading" />
<span class="media-body bold js-refresh-label">
{{ s__("mrWidget|Refreshing now") }}
</span>
</template>
<template v-else>
<status-icon
status="warning"
:show-disabled-button="true"
/>
<div class="media-body space-children">
<span class="bold">
<span
class="has-error-message"
v-if="mr.mergeError"
>
{{ mr.mergeError }}.
</span>
<span v-else>
{{ s__("mrWidget|Merge failed.") }}
</span>
<span
:class="{ 'has-custom-error': mr.mergeError }"
>
{{ timerText }}
</span>
</span>
<button
@click="refresh"
class="btn btn-default btn-xs js-refresh-button"
type="button"
>
{{ s__("mrWidget|Refresh now") }}
</button>
</div>
</template>
</div>
</template>
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js deleted 100644 → 0
View file @ 7ea8ea8e
import Flash from '../../../flash';
import statusIcon from '../mr_widget_status_icon.vue';
import MRWidgetAuthor from '../../components/mr_widget_author';
import eventHub from '../../event_hub';
export default {
name: 'MRWidgetMergeWhenPipelineSucceeds',
props: {
mr: { type: Object, required: true },
service: { type: Object, required: true },
},
components: {
'mr-widget-author': MRWidgetAuthor,
statusIcon,
},
data() {
return {
isCancellingAutoMerge: false,
isRemovingSourceBranch: false,
};
},
computed: {
canRemoveSourceBranch() {
const { shouldRemoveSourceBranch, canRemoveSourceBranch,
mergeUserId, currentUserId } = this.mr;
return !shouldRemoveSourceBranch && canRemoveSourceBranch && mergeUserId === currentUserId;
},
},
methods: {
cancelAutomaticMerge() {
this.isCancellingAutoMerge = true;
this.service.cancelAutomaticMerge()
.then(res => res.data)
.then((data) => {
eventHub.$emit('UpdateWidgetData', data);
})
.catch(() => {
this.isCancellingAutoMerge = false;
new Flash('Something went wrong. Please try again.'); // eslint-disable-line
});
},
removeSourceBranch() {
const options = {
sha: this.mr.sha,
merge_when_pipeline_succeeds: true,
should_remove_source_branch: true,
};
this.isRemovingSourceBranch = true;
this.service.mergeResource.save(options)
.then(res => res.data)
.then((data) => {
if (data.status === 'merge_when_pipeline_succeeds') {
eventHub.$emit('MRWidgetUpdateRequested');
}
})
.catch(() => {
this.isRemovingSourceBranch = false;
new Flash('Something went wrong. Please try again.'); // eslint-disable-line
});
},
},
template: `
<div class="mr-widget-body media">
<status-icon status="success" />
<div class="media-body">
<h4 class="flex-container-block">
<span class="append-right-10">
Set by
<mr-widget-author :author="mr.setToMWPSBy" />
to be merged automatically when the pipeline succeeds
</span>
<a
v-if="mr.canCancelAutomaticMerge"
@click.prevent="cancelAutomaticMerge"
:disabled="isCancellingAutoMerge"
role="button"
href="#"
class="btn btn-xs btn-default js-cancel-auto-merge">
<i
v-if="isCancellingAutoMerge"
class="fa fa-spinner fa-spin"
aria-hidden="true" />
Cancel automatic merge
</a>
</h4>
<section class="mr-info-list">
<p>The changes will be merged into
<a
:href="mr.targetBranchPath"
class="label-branch">
{{mr.targetBranch}}
</a>
</p>
<p v-if="mr.shouldRemoveSourceBranch">
The source branch will be removed
</p>
<p
v-else
class="flex-container-block"
>
<span class="append-right-10">
The source branch will not be removed
</span>
<a
v-if="canRemoveSourceBranch"
:disabled="isRemovingSourceBranch"
@click.prevent="removeSourceBranch"
role="button"
class="btn btn-xs btn-default js-remove-source-branch"
href="#">
<i
v-if="isRemovingSourceBranch"
class="fa fa-spinner fa-spin"
aria-hidden="true" />
Remove source branch
</a>
</p>
</section>
</div>
</div>
`,
};
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue 0 → 100644
View file @ 6b24028b
<script>
import Flash from '../../../flash';
import statusIcon from '../mr_widget_status_icon.vue';
import mrWidgetAuthor from '../../components/mr_widget_author';
import eventHub from '../../event_hub';
export default {
name: 'MRWidgetMergeWhenPipelineSucceeds',
components: {
mrWidgetAuthor,
statusIcon,
},
props: {
mr: {
type: Object,
required: true,
default: () => ({}),
},
service: {
type: Object,
required: true,
default: () => ({}),
},
},
data() {
return {
isCancellingAutoMerge: false,
isRemovingSourceBranch: false,
};
},
computed: {
canRemoveSourceBranch() {
const {
shouldRemoveSourceBranch,
canRemoveSourceBranch,
mergeUserId,
currentUserId,
} = this.mr;
return !shouldRemoveSourceBranch &&
canRemoveSourceBranch &&
mergeUserId === currentUserId;
},
},
methods: {
cancelAutomaticMerge() {
this.isCancellingAutoMerge = true;
this.service.cancelAutomaticMerge()
.then(res => res.data)
.then((data) => {
eventHub.$emit('UpdateWidgetData', data);
})
.catch(() => {
this.isCancellingAutoMerge = false;
Flash('Something went wrong. Please try again.');
});
},
removeSourceBranch() {
const options = {
sha: this.mr.sha,
merge_when_pipeline_succeeds: true,
should_remove_source_branch: true,
};
this.isRemovingSourceBranch = true;
this.service.mergeResource.save(options)
.then(res => res.data)
.then((data) => {
if (data.status === 'merge_when_pipeline_succeeds') {
eventHub.$emit('MRWidgetUpdateRequested');
}
})
.catch(() => {
this.isRemovingSourceBranch = false;
Flash('Something went wrong. Please try again.');
});
},
},
};
</script>
<template>
<div class="mr-widget-body media">
<status-icon status="success" />
<div class="media-body">
<h4 class="flex-container-block">
<span class="append-right-10">
Set by
<mr-widget-author :author="mr.setToMWPSBy" />
to be merged automatically when the pipeline succeeds
</span>
<a
v-if="mr.canCancelAutomaticMerge"
@click.prevent="cancelAutomaticMerge"
:disabled="isCancellingAutoMerge"
role="button"
href="#"
class="btn btn-xs btn-default js-cancel-auto-merge">
<i
v-if="isCancellingAutoMerge"
class="fa fa-spinner fa-spin"
aria-hidden="true"
>
</i>
{{ s__("mrWidget|Cancel automatic merge") }}
</a>
</h4>
<section class="mr-info-list">
<p>
{{ s__("mrWidget|The changes will be merged into") }}
<a
:href="mr.targetBranchPath"
class="label-branch"
>
{{ mr.targetBranch }}
</a>
</p>
<p v-if="mr.shouldRemoveSourceBranch">
{{ s__("mrWidget|The source branch will be removed") }}
</p>
<p
v-else
class="flex-container-block"
>
<span class="append-right-10">
{{ s__("mrWidget|The source branch will not be removed") }}
</span>
<a
v-if="canRemoveSourceBranch"
:disabled="isRemovingSourceBranch"
@click.prevent="removeSourceBranch"
role="button"
class="btn btn-xs btn-default js-remove-source-branch"
href="#"
>
<i
v-if="isRemovingSourceBranch"
class="fa fa-spinner fa-spin"
aria-hidden="true"
>
</i>
{{ s__("mrWidget|Remove source branch") }}
</a>
</p>
</section>
</div>
</div>
</template>
app/assets/javascripts/vue_merge_request_widget/dependencies.js
View file @ 6b24028b
...@@ -17,7 +17,7 @@ export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue'; ...@@ -17,7 +17,7 @@ export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue';
export { default as WidgetDeployment } from './components/mr_widget_deployment'; export { default as WidgetDeployment } from './components/mr_widget_deployment';
export { default as WidgetRelatedLinks } from './components/mr_widget_related_links'; export { default as WidgetRelatedLinks } from './components/mr_widget_related_links';
export { default as MergedState } from './components/states/mr_widget_merged'; 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 FailedToMerge } from './components/states/mr_widget_failed_to_merge.vue';
export { default as ClosedState } from './components/states/mr_widget_closed.vue'; export { default as ClosedState } from './components/states/mr_widget_closed.vue';
export { default as MergingState } from './components/states/mr_widget_merging.vue'; export { default as MergingState } from './components/states/mr_widget_merging.vue';
export { default as WipState } from './components/states/mr_widget_wip'; export { default as WipState } from './components/states/mr_widget_wip';
...@@ -31,7 +31,7 @@ export { default as SHAMismatchState } from './components/states/mr_widget_sha_m ...@@ -31,7 +31,7 @@ export { default as SHAMismatchState } from './components/states/mr_widget_sha_m
export { default as UnresolvedDiscussionsState } from './components/states/mr_widget_unresolved_discussions'; export { default as UnresolvedDiscussionsState } from './components/states/mr_widget_unresolved_discussions';
export { default as PipelineBlockedState } from './components/states/mr_widget_pipeline_blocked'; export { default as PipelineBlockedState } from './components/states/mr_widget_pipeline_blocked';
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.vue';
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.vue'; export { default as AutoMergeFailed } from './components/states/mr_widget_auto_merge_failed.vue';
export { default as CheckingState } from './components/states/mr_widget_checking.vue'; export { default as CheckingState } from './components/states/mr_widget_checking.vue';
......
spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js
View file @ 6b24028b
import Vue from 'vue'; import Vue from 'vue';
import failedToMergeComponent from '~/vue_merge_request_widget/components/states/mr_widget_failed_to_merge'; import failedToMergeComponent from '~/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue';
import eventHub from '~/vue_merge_request_widget/event_hub'; import eventHub from '~/vue_merge_request_widget/event_hub';
import mountComponent from '../../../helpers/vue_mount_component_helper';
const mr = {
mergeError: 'Merge error happened.',
};
const createComponent = () => {
const Component = Vue.extend(failedToMergeComponent);
return new Component({
el: document.createElement('div'),
propsData: { mr },
});
};
describe('MRWidgetFailedToMerge', () => { describe('MRWidgetFailedToMerge', () => {
describe('data', () => { let Component;
it('should have default data', () => { let vm;
const data = failedToMergeComponent.data();
expect(data.timer).toEqual(10); beforeEach(() => {
expect(data.isRefreshing).toBeFalsy(); Component = Vue.extend(failedToMergeComponent);
spyOn(eventHub, '$emit');
vm = mountComponent(Component, { mr: {
mergeError: 'Merge error happened.',
} });
}); });
afterEach(() => {
vm.$destroy();
}); });
describe('computed', () => { describe('computed', () => {
describe('timerText', () => { describe('timerText', () => {
it('should return correct timer text', () => { it('should return correct timer text', () => {
const vm = createComponent(); expect(vm.timerText).toEqual('Refreshing in 10 seconds to show the updated status...');
expect(vm.timerText).toEqual('10 seconds');
vm.timer = 1; vm.timer = 1;
expect(vm.timerText).toEqual('a second'); expect(vm.timerText).toEqual('Refreshing in a second to show the updated status...');
}); });
}); });
}); });
describe('created', () => { describe('created', () => {
it('should disable polling', () => { it('should disable polling', () => {
spyOn(eventHub, '$emit');
createComponent();
expect(eventHub.$emit).toHaveBeenCalledWith('DisablePolling'); expect(eventHub.$emit).toHaveBeenCalledWith('DisablePolling');
}); });
}); });
...@@ -47,13 +39,10 @@ describe('MRWidgetFailedToMerge', () => { ...@@ -47,13 +39,10 @@ describe('MRWidgetFailedToMerge', () => {
describe('methods', () => { describe('methods', () => {
describe('refresh', () => { describe('refresh', () => {
it('should emit event to request component refresh', () => { it('should emit event to request component refresh', () => {
spyOn(eventHub, '$emit'); expect(vm.isRefreshing).toEqual(false);
const vm = createComponent();
expect(vm.isRefreshing).toBeFalsy();
vm.refresh(); vm.refresh();
expect(vm.isRefreshing).toBeTruthy(); expect(vm.isRefreshing).toEqual(true);
expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested'); expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
expect(eventHub.$emit).toHaveBeenCalledWith('EnablePolling'); expect(eventHub.$emit).toHaveBeenCalledWith('EnablePolling');
}); });
...@@ -61,12 +50,11 @@ describe('MRWidgetFailedToMerge', () => { ...@@ -61,12 +50,11 @@ describe('MRWidgetFailedToMerge', () => {
describe('updateTimer', () => { describe('updateTimer', () => {
it('should update timer and emit event when timer end', () => { it('should update timer and emit event when timer end', () => {
const vm = createComponent();
spyOn(vm, 'refresh'); spyOn(vm, 'refresh');
expect(vm.timer).toEqual(10); expect(vm.timer).toEqual(10);
for (let i = 0; i < 10; i++) { // eslint-disable-line for (let i = 0; i < 10; i += 1) {
expect(vm.timer).toEqual(10 - i); expect(vm.timer).toEqual(10 - i);
vm.updateTimer(); vm.updateTimer();
} }
...@@ -76,47 +64,54 @@ describe('MRWidgetFailedToMerge', () => { ...@@ -76,47 +64,54 @@ describe('MRWidgetFailedToMerge', () => {
}); });
}); });
describe('template', () => { describe('while it is refreshing', () => {
let vm; it('renders Refresing now', (done) => {
let el; vm.isRefreshing = true;
beforeEach(() => { Vue.nextTick(() => {
vm = createComponent(); expect(vm.$el.querySelector('.js-refresh-label').textContent.trim()).toEqual('Refreshing now');
el = vm.$el;
});
it('should have correct elements', (done) => {
expect(el.classList.contains('mr-widget-body')).toBeTruthy();
expect(el.innerText).toContain('Merge error happened.');
expect(el.innerText).toContain('Refreshing in 10 seconds');
expect(el.innerText).not.toContain('Merge failed.');
expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy();
expect(el.querySelector('button').innerText).toContain('Merge');
expect(el.querySelector('.js-refresh-button').innerText).toContain('Refresh now');
expect(el.querySelector('.js-refresh-label')).toEqual(null);
expect(el.innerText).not.toContain('Refreshing now');
setTimeout(() => {
expect(el.innerText).toContain('Refreshing in 9 seconds');
done(); done();
}, 1010); });
});
});
describe('while it is not regresing', () => {
it('renders warning icon and disabled merge button', () => {
expect(vm.$el.querySelector('.js-ci-status-icon-warning')).not.toBeNull();
expect(vm.$el.querySelector('.js-disabled-merge-button').getAttribute('disabled')).toEqual('disabled');
});
it('renders given error', () => {
expect(vm.$el.querySelector('.has-error-message').textContent.trim()).toEqual('Merge error happened..');
});
it('renders refresh button', () => {
expect(vm.$el.querySelector('.js-refresh-button').textContent.trim()).toEqual('Refresh now');
});
it('renders remaining time', () => {
expect(
vm.$el.querySelector('.has-custom-error').textContent.trim(),
).toEqual('Refreshing in 10 seconds to show the updated status...');
});
}); });
it('should just generic merge failed message if merge_error is not available', (done) => { it('should just generic merge failed message if merge_error is not available', (done) => {
vm.mr.mergeError = null; vm.mr.mergeError = null;
Vue.nextTick(() => { Vue.nextTick(() => {
expect(el.innerText).toContain('Merge failed.'); expect(vm.$el.innerText).toContain('Merge failed.');
expect(el.innerText).not.toContain('Merge error happened.'); expect(vm.$el.innerText).not.toContain('Merge error happened.');
done(); done();
}); });
}); });
it('should show refresh label when refresh requested', () => { it('should show refresh label when refresh requested', (done) => {
vm.refresh(); vm.refresh();
Vue.nextTick(() => { Vue.nextTick(() => {
expect(el.innerText).not.toContain('Merge failed. Refreshing'); expect(vm.$el.innerText).not.toContain('Merge failed. Refreshing');
expect(el.innerText).toContain('Refreshing now'); expect(vm.$el.innerText).toContain('Refreshing now');
}); done();
}); });
}); });
}); });
spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js
View file @ 6b24028b
import Vue from 'vue'; import Vue from 'vue';
import mwpsComponent from '~/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds'; import mwpsComponent from '~/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue';
import eventHub from '~/vue_merge_request_widget/event_hub'; import eventHub from '~/vue_merge_request_widget/event_hub';
import mountComponent from '../../../helpers/vue_mount_component_helper';
const targetBranchPath = '/foo/bar'; describe('MRWidgetMergeWhenPipelineSucceeds', () => {
const targetBranch = 'foo'; let vm;
const sha = '1EA2EZ34'; const targetBranchPath = '/foo/bar';
const targetBranch = 'foo';
const sha = '1EA2EZ34';
const createComponent = () => { beforeEach(() => {
const Component = Vue.extend(mwpsComponent); const Component = Vue.extend(mwpsComponent);
const mr = { spyOn(eventHub, '$emit');
vm = mountComponent(Component, {
mr: {
shouldRemoveSourceBranch: false, shouldRemoveSourceBranch: false,
canRemoveSourceBranch: true, canRemoveSourceBranch: true,
canCancelAutomaticMerge: true, canCancelAutomaticMerge: true,
...@@ -18,60 +24,27 @@ const createComponent = () => { ...@@ -18,60 +24,27 @@ const createComponent = () => {
sha, sha,
targetBranchPath, targetBranchPath,
targetBranch, targetBranch,
}; },
service: {
const service = {
cancelAutomaticMerge() {}, cancelAutomaticMerge() {},
mergeResource: { mergeResource: {
save() {}, save() {},
}, },
}; },
return new Component({
el: document.createElement('div'),
propsData: { mr, service },
});
};
describe('MRWidgetMergeWhenPipelineSucceeds', () => {
describe('props', () => {
it('should have props', () => {
const { mr, service } = mwpsComponent.props;
expect(mr.type instanceof Object).toBeTruthy();
expect(mr.required).toBeTruthy();
expect(service.type instanceof Object).toBeTruthy();
expect(service.required).toBeTruthy();
});
});
describe('components', () => {
it('should have components added', () => {
expect(mwpsComponent.components['mr-widget-author']).toBeDefined();
}); });
}); });
describe('data', () => { afterEach(() => {
it('should have default data', () => { vm.$destroy();
const data = mwpsComponent.data();
expect(data.isCancellingAutoMerge).toBeFalsy();
expect(data.isRemovingSourceBranch).toBeFalsy();
});
}); });
describe('computed', () => { describe('computed', () => {
describe('canRemoveSourceBranch', () => { describe('canRemoveSourceBranch', () => {
it('should return true when user is able to remove source branch', () => { it('should return true when user is able to remove source branch', () => {
const vm = createComponent();
expect(vm.canRemoveSourceBranch).toBeTruthy(); expect(vm.canRemoveSourceBranch).toBeTruthy();
}); });
it('should return false when user id is not the same with who set the MWPS', () => { it('should return false when user id is not the same with who set the MWPS', () => {
const vm = createComponent();
vm.mr.mergeUserId = 2; vm.mr.mergeUserId = 2;
expect(vm.canRemoveSourceBranch).toBeFalsy(); expect(vm.canRemoveSourceBranch).toBeFalsy();
...@@ -83,15 +56,11 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => { ...@@ -83,15 +56,11 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
}); });
it('should return false when shouldRemoveSourceBranch set to false', () => { it('should return false when shouldRemoveSourceBranch set to false', () => {
const vm = createComponent();
vm.mr.shouldRemoveSourceBranch = true; vm.mr.shouldRemoveSourceBranch = true;
expect(vm.canRemoveSourceBranch).toBeFalsy(); expect(vm.canRemoveSourceBranch).toBeFalsy();
}); });
it('should return false if user is not able to remove the source branch', () => { it('should return false if user is not able to remove the source branch', () => {
const vm = createComponent();
vm.mr.canRemoveSourceBranch = false; vm.mr.canRemoveSourceBranch = false;
expect(vm.canRemoveSourceBranch).toBeFalsy(); expect(vm.canRemoveSourceBranch).toBeFalsy();
}); });
...@@ -101,11 +70,9 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => { ...@@ -101,11 +70,9 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
describe('methods', () => { describe('methods', () => {
describe('cancelAutomaticMerge', () => { describe('cancelAutomaticMerge', () => {
it('should set flag and call service then tell main component to update the widget with data', (done) => { it('should set flag and call service then tell main component to update the widget with data', (done) => {
const vm = createComponent();
const mrObj = { const mrObj = {
is_new_mr_data: true, is_new_mr_data: true,
}; };
spyOn(eventHub, '$emit');
spyOn(vm.service, 'cancelAutomaticMerge').and.returnValue(new Promise((resolve) => { spyOn(vm.service, 'cancelAutomaticMerge').and.returnValue(new Promise((resolve) => {
resolve({ resolve({
data: mrObj, data: mrObj,
...@@ -123,8 +90,6 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => { ...@@ -123,8 +90,6 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
describe('removeSourceBranch', () => { describe('removeSourceBranch', () => {
it('should set flag and call service then request main component to update the widget', (done) => { it('should set flag and call service then request main component to update the widget', (done) => {
const vm = createComponent();
spyOn(eventHub, '$emit');
spyOn(vm.service.mergeResource, 'save').and.returnValue(new Promise((resolve) => { spyOn(vm.service.mergeResource, 'save').and.returnValue(new Promise((resolve) => {
resolve({ resolve({
data: { data: {
...@@ -148,31 +113,23 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => { ...@@ -148,31 +113,23 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
}); });
describe('template', () => { describe('template', () => {
let vm;
let el;
beforeEach(() => {
vm = createComponent();
el = vm.$el;
});
it('should have correct elements', () => { it('should have correct elements', () => {
expect(el.classList.contains('mr-widget-body')).toBeTruthy(); expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
expect(el.innerText).toContain('to be merged automatically when the pipeline succeeds'); expect(vm.$el.innerText).toContain('to be merged automatically when the pipeline succeeds');
expect(el.innerText).toContain('The changes will be merged into'); expect(vm.$el.innerText).toContain('The changes will be merged into');
expect(el.innerText).toContain(targetBranch); expect(vm.$el.innerText).toContain(targetBranch);
expect(el.innerText).toContain('The source branch will not be removed'); expect(vm.$el.innerText).toContain('The source branch will not be removed');
expect(el.querySelector('.js-cancel-auto-merge').innerText).toContain('Cancel automatic merge'); expect(vm.$el.querySelector('.js-cancel-auto-merge').innerText).toContain('Cancel automatic merge');
expect(el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeFalsy(); expect(vm.$el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeFalsy();
expect(el.querySelector('.js-remove-source-branch').innerText).toContain('Remove source branch'); expect(vm.$el.querySelector('.js-remove-source-branch').innerText).toContain('Remove source branch');
expect(el.querySelector('.js-remove-source-branch').getAttribute('disabled')).toBeFalsy(); expect(vm.$el.querySelector('.js-remove-source-branch').getAttribute('disabled')).toBeFalsy();
}); });
it('should disable cancel auto merge button when the action is in progress', (done) => { it('should disable cancel auto merge button when the action is in progress', (done) => {
vm.isCancellingAutoMerge = true; vm.isCancellingAutoMerge = true;
Vue.nextTick(() => { Vue.nextTick(() => {
expect(el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeTruthy(); expect(vm.$el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeTruthy();
done(); done();
}); });
}); });
...@@ -181,7 +138,7 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => { ...@@ -181,7 +138,7 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
vm.mr.shouldRemoveSourceBranch = true; vm.mr.shouldRemoveSourceBranch = true;
Vue.nextTick(() => { Vue.nextTick(() => {
const normalizedText = el.innerText.replace(/\s+/g, ' '); const normalizedText = vm.$el.innerText.replace(/\s+/g, ' ');
expect(normalizedText).toContain('The source branch will be removed'); expect(normalizedText).toContain('The source branch will be removed');
expect(normalizedText).not.toContain('The source branch will not be removed'); expect(normalizedText).not.toContain('The source branch will not be removed');
done(); done();
...@@ -192,7 +149,7 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => { ...@@ -192,7 +149,7 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
vm.mr.currentUserId = 4; vm.mr.currentUserId = 4;
Vue.nextTick(() => { Vue.nextTick(() => {
expect(el.querySelector('.js-remove-source-branch')).toEqual(null); expect(vm.$el.querySelector('.js-remove-source-branch')).toEqual(null);
done(); done();
}); });
}); });
...@@ -201,7 +158,7 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => { ...@@ -201,7 +158,7 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
vm.isRemovingSourceBranch = true; vm.isRemovingSourceBranch = true;
Vue.nextTick(() => { Vue.nextTick(() => {
expect(el.querySelector('.js-remove-source-branch').getAttribute('disabled')).toBeTruthy(); expect(vm.$el.querySelector('.js-remove-source-branch').getAttribute('disabled')).toBeTruthy();
done(); 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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7