Commit bce50453 authored by Natalia Tepluhina's avatar Natalia Tepluhina Committed by Phil Hughes

Resolve "When merging an MR, the squash checkbox isn't always supported"

parent 8f8a223d
...@@ -12,7 +12,7 @@ export default { ...@@ -12,7 +12,7 @@ export default {
name: 'ReadyToMerge', name: 'ReadyToMerge',
components: { components: {
statusIcon, statusIcon,
'squash-before-merge': SquashBeforeMerge, SquashBeforeMerge,
}, },
props: { props: {
mr: { type: Object, required: true }, mr: { type: Object, required: true },
...@@ -28,6 +28,7 @@ export default { ...@@ -28,6 +28,7 @@ export default {
isMakingRequest: false, isMakingRequest: false,
isMergingImmediately: false, isMergingImmediately: false,
commitMessage: this.mr.commitMessage, commitMessage: this.mr.commitMessage,
squashBeforeMerge: this.mr.squash,
successSvg, successSvg,
warningSvg, warningSvg,
}; };
...@@ -110,12 +111,6 @@ export default { ...@@ -110,12 +111,6 @@ export default {
return enableSquashBeforeMerge && commitsCount > 1; return enableSquashBeforeMerge && commitsCount > 1;
}, },
}, },
created() {
eventHub.$on('MRWidgetUpdateSquash', this.handleUpdateSquash);
},
beforeDestroy() {
eventHub.$off('MRWidgetUpdateSquash', this.handleUpdateSquash);
},
methods: { methods: {
shouldShowMergeControls() { shouldShowMergeControls() {
return this.mr.isMergeAllowed || this.shouldShowMergeWhenPipelineSucceedsText; return this.mr.isMergeAllowed || this.shouldShowMergeWhenPipelineSucceedsText;
...@@ -143,7 +138,7 @@ export default { ...@@ -143,7 +138,7 @@ export default {
commit_message: this.commitMessage, commit_message: this.commitMessage,
merge_when_pipeline_succeeds: this.setToMergeWhenPipelineSucceeds, merge_when_pipeline_succeeds: this.setToMergeWhenPipelineSucceeds,
should_remove_source_branch: this.removeSourceBranch === true, should_remove_source_branch: this.removeSourceBranch === true,
squash: this.mr.squash, squash: this.squashBeforeMerge,
}; };
this.isMakingRequest = true; this.isMakingRequest = true;
...@@ -166,9 +161,6 @@ export default { ...@@ -166,9 +161,6 @@ export default {
new Flash('Something went wrong. Please try again.'); // eslint-disable-line new Flash('Something went wrong. Please try again.'); // eslint-disable-line
}); });
}, },
handleUpdateSquash(val) {
this.mr.squash = val;
},
initiateMergePolling() { initiateMergePolling() {
simplePoll((continuePolling, stopPolling) => { simplePoll((continuePolling, stopPolling) => {
this.handleMergePolling(continuePolling, stopPolling); this.handleMergePolling(continuePolling, stopPolling);
...@@ -311,8 +303,9 @@ export default { ...@@ -311,8 +303,9 @@ export default {
<!-- Placeholder for EE extension of this component --> <!-- Placeholder for EE extension of this component -->
<squash-before-merge <squash-before-merge
v-if="shouldShowSquashBeforeMerge" v-if="shouldShowSquashBeforeMerge"
:mr="mr" v-model="squashBeforeMerge"
:is-merge-button-disabled="isMergeButtonDisabled" :help-path="mr.squashBeforeMergeHelpPath"
:is-disabled="isMergeButtonDisabled"
/> />
<span v-if="mr.ffOnlyEnabled" class="js-fast-forward-message"> <span v-if="mr.ffOnlyEnabled" class="js-fast-forward-message">
......
<script> <script>
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import eventHub from '~/vue_merge_request_widget/event_hub';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
export default { export default {
...@@ -11,23 +10,19 @@ export default { ...@@ -11,23 +10,19 @@ export default {
tooltip, tooltip,
}, },
props: { props: {
mr: { value: {
type: Object,
required: true,
},
isMergeButtonDisabled: {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
}, helpPath: {
data() { type: String,
return { required: false,
squashBeforeMerge: this.mr.squash, default: '',
}; },
}, isDisabled: {
methods: { type: Boolean,
updateSquashModel() { required: false,
eventHub.$emit('MRWidgetUpdateSquash', this.squashBeforeMerge); default: false,
}, },
}, },
}; };
...@@ -37,18 +32,19 @@ export default { ...@@ -37,18 +32,19 @@ export default {
<div class="accept-control inline"> <div class="accept-control inline">
<label class="merge-param-checkbox"> <label class="merge-param-checkbox">
<input <input
v-model="squashBeforeMerge" :checked="value"
:disabled="isMergeButtonDisabled" :disabled="isDisabled"
type="checkbox" type="checkbox"
name="squash" name="squash"
class="qa-squash-checkbox" class="qa-squash-checkbox"
@change="updateSquashModel" @change="$emit('input', $event.target.checked);"
/> />
{{ __('Squash commits') }} {{ __('Squash commits') }}
</label> </label>
<a <a
v-if="helpPath"
v-tooltip v-tooltip
:href="mr.squashBeforeMergeHelpPath" :href="helpPath"
data-title="About this feature" data-title="About this feature"
data-placement="bottom" data-placement="bottom"
target="_blank" target="_blank"
......
...@@ -32,7 +32,6 @@ import MRWidgetStore from './stores/ee_switch_mr_widget_store'; ...@@ -32,7 +32,6 @@ import MRWidgetStore from './stores/ee_switch_mr_widget_store';
import MRWidgetService from './services/ee_switch_mr_widget_service'; import MRWidgetService from './services/ee_switch_mr_widget_service';
import eventHub from './event_hub'; import eventHub from './event_hub';
import stateMaps from './stores/ee_switch_state_maps'; import stateMaps from './stores/ee_switch_state_maps';
import SquashBeforeMerge from './components/states/squash_before_merge.vue';
import notify from '~/lib/utils/notify'; import notify from '~/lib/utils/notify';
import SourceBranchRemovalStatus from './components/source_branch_removal_status.vue'; import SourceBranchRemovalStatus from './components/source_branch_removal_status.vue';
import GroupedTestReportsApp from '../reports/components/grouped_test_reports_app.vue'; import GroupedTestReportsApp from '../reports/components/grouped_test_reports_app.vue';
...@@ -59,7 +58,6 @@ export default { ...@@ -59,7 +58,6 @@ export default {
'mr-widget-missing-branch': MissingBranchState, 'mr-widget-missing-branch': MissingBranchState,
'mr-widget-ready-to-merge': ReadyToMergeState, 'mr-widget-ready-to-merge': ReadyToMergeState,
'sha-mismatch': ShaMismatchState, 'sha-mismatch': ShaMismatchState,
'mr-widget-squash-before-merge': SquashBeforeMerge,
'mr-widget-checking': CheckingState, 'mr-widget-checking': CheckingState,
'mr-widget-unresolved-discussions': UnresolvedDiscussionsState, 'mr-widget-unresolved-discussions': UnresolvedDiscussionsState,
'mr-widget-pipeline-blocked': PipelineBlockedState, 'mr-widget-pipeline-blocked': PipelineBlockedState,
......
---
title: Resolve When merging an MR, the squash checkbox isnt always supported
merge_request: 24296
author:
type: fixed
import Vue from 'vue'; import Vue from 'vue';
import ReadyToMerge from '~/vue_merge_request_widget/components/states/ready_to_merge.vue'; import ReadyToMerge from '~/vue_merge_request_widget/components/states/ready_to_merge.vue';
import SquashBeforeMerge from '~/vue_merge_request_widget/components/states/squash_before_merge.vue';
import eventHub from '~/vue_merge_request_widget/event_hub'; import eventHub from '~/vue_merge_request_widget/event_hub';
import { createLocalVue, shallowMount } from '@vue/test-utils';
const commitMessage = 'This is the commit message'; const commitMessage = 'This is the commit message';
const commitMessageWithDescription = 'This is the commit message description'; const commitMessageWithDescription = 'This is the commit message description';
const createComponent = (customConfig = {}) => { const createTestMr = customConfig => {
const Component = Vue.extend(ReadyToMerge);
const mr = { const mr = {
isPipelineActive: false, isPipelineActive: false,
pipeline: null, pipeline: null,
...@@ -16,6 +17,7 @@ const createComponent = (customConfig = {}) => { ...@@ -16,6 +17,7 @@ const createComponent = (customConfig = {}) => {
hasCI: false, hasCI: false,
ciStatus: null, ciStatus: null,
sha: '12345678', sha: '12345678',
squash: false,
commitMessage, commitMessage,
commitMessageWithDescription, commitMessageWithDescription,
shouldRemoveSourceBranch: true, shouldRemoveSourceBranch: true,
...@@ -24,14 +26,23 @@ const createComponent = (customConfig = {}) => { ...@@ -24,14 +26,23 @@ const createComponent = (customConfig = {}) => {
Object.assign(mr, customConfig.mr); Object.assign(mr, customConfig.mr);
const service = { return mr;
merge() {}, };
poll() {},
}; const createTestService = () => ({
merge() {},
poll() {},
});
const createComponent = (customConfig = {}) => {
const Component = Vue.extend(ReadyToMerge);
return new Component({ return new Component({
el: document.createElement('div'), el: document.createElement('div'),
propsData: { mr, service }, propsData: {
mr: createTestMr(customConfig),
service: createTestService(),
},
}); });
}; };
...@@ -612,6 +623,47 @@ describe('ReadyToMerge', () => { ...@@ -612,6 +623,47 @@ describe('ReadyToMerge', () => {
}); });
}); });
describe('Squash checkbox component', () => {
let wrapper;
const localVue = createLocalVue();
const createLocalComponent = (customConfig = {}) => {
wrapper = shallowMount(localVue.extend(ReadyToMerge), {
localVue,
propsData: {
mr: createTestMr(customConfig),
service: createTestService(),
},
});
};
afterEach(() => {
wrapper.destroy();
});
const findCheckboxElement = () => wrapper.find(SquashBeforeMerge);
it('should be rendered when squash before merge is enabled and there is more than 1 commit', () => {
createLocalComponent({
mr: { commitsCount: 2, enableSquashBeforeMerge: true },
});
expect(findCheckboxElement().exists()).toBeTruthy();
});
it('should not be rendered when squash before merge is disabled', () => {
createLocalComponent({ mr: { commitsCount: 2, enableSquashBeforeMerge: false } });
expect(findCheckboxElement().exists()).toBeFalsy();
});
it('should not be rendered when there is only 1 commit', () => {
createLocalComponent({ mr: { commitsCount: 1, enableSquashBeforeMerge: true } });
expect(findCheckboxElement().exists()).toBeFalsy();
});
});
describe('Merge controls', () => { describe('Merge controls', () => {
describe('when allowed to merge', () => { describe('when allowed to merge', () => {
beforeEach(() => { beforeEach(() => {
......
import { createLocalVue, shallowMount } from '@vue/test-utils';
import SquashBeforeMerge from '~/vue_merge_request_widget/components/states/squash_before_merge.vue';
const localVue = createLocalVue();
describe('Squash before merge component', () => {
let wrapper;
const createComponent = props => {
wrapper = shallowMount(localVue.extend(SquashBeforeMerge), {
localVue,
sync: false,
propsData: {
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
});
describe('checkbox', () => {
const findCheckbox = () => wrapper.find('.qa-squash-checkbox');
it('is unchecked if passed value prop is false', () => {
createComponent({
value: false,
});
expect(findCheckbox().element.checked).toBeFalsy();
});
it('is checked if passed value prop is true', () => {
createComponent({
value: true,
});
expect(findCheckbox().element.checked).toBeTruthy();
});
it('changes value on click', done => {
createComponent({
value: false,
});
findCheckbox().element.checked = true;
findCheckbox().trigger('change');
wrapper.vm.$nextTick(() => {
expect(findCheckbox().element.checked).toBeTruthy();
done();
});
});
it('is disabled if isDisabled prop is true', () => {
createComponent({
value: false,
isDisabled: true,
});
expect(findCheckbox().attributes('disabled')).toBeTruthy();
});
});
describe('about link', () => {
it('is not rendered if no help path is passed', () => {
createComponent({
value: false,
});
const aboutLink = wrapper.find('a');
expect(aboutLink.exists()).toBeFalsy();
});
it('is rendered if help path is passed', () => {
createComponent({
value: false,
helpPath: 'test-path',
});
const aboutLink = wrapper.find('a');
expect(aboutLink.exists()).toBeTruthy();
});
it('should have a correct help path if passed', () => {
createComponent({
value: false,
helpPath: 'test-path',
});
const aboutLink = wrapper.find('a');
expect(aboutLink.attributes('href')).toEqual('test-path');
});
});
});
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