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 {
name: 'ReadyToMerge',
components: {
statusIcon,
'squash-before-merge': SquashBeforeMerge,
SquashBeforeMerge,
},
props: {
mr: { type: Object, required: true },
......@@ -28,6 +28,7 @@ export default {
isMakingRequest: false,
isMergingImmediately: false,
commitMessage: this.mr.commitMessage,
squashBeforeMerge: this.mr.squash,
successSvg,
warningSvg,
};
......@@ -110,12 +111,6 @@ export default {
return enableSquashBeforeMerge && commitsCount > 1;
},
},
created() {
eventHub.$on('MRWidgetUpdateSquash', this.handleUpdateSquash);
},
beforeDestroy() {
eventHub.$off('MRWidgetUpdateSquash', this.handleUpdateSquash);
},
methods: {
shouldShowMergeControls() {
return this.mr.isMergeAllowed || this.shouldShowMergeWhenPipelineSucceedsText;
......@@ -143,7 +138,7 @@ export default {
commit_message: this.commitMessage,
merge_when_pipeline_succeeds: this.setToMergeWhenPipelineSucceeds,
should_remove_source_branch: this.removeSourceBranch === true,
squash: this.mr.squash,
squash: this.squashBeforeMerge,
};
this.isMakingRequest = true;
......@@ -166,9 +161,6 @@ export default {
new Flash('Something went wrong. Please try again.'); // eslint-disable-line
});
},
handleUpdateSquash(val) {
this.mr.squash = val;
},
initiateMergePolling() {
simplePoll((continuePolling, stopPolling) => {
this.handleMergePolling(continuePolling, stopPolling);
......@@ -311,8 +303,9 @@ export default {
<!-- Placeholder for EE extension of this component -->
<squash-before-merge
v-if="shouldShowSquashBeforeMerge"
:mr="mr"
:is-merge-button-disabled="isMergeButtonDisabled"
v-model="squashBeforeMerge"
:help-path="mr.squashBeforeMergeHelpPath"
:is-disabled="isMergeButtonDisabled"
/>
<span v-if="mr.ffOnlyEnabled" class="js-fast-forward-message">
......
<script>
import Icon from '~/vue_shared/components/icon.vue';
import eventHub from '~/vue_merge_request_widget/event_hub';
import tooltip from '~/vue_shared/directives/tooltip';
export default {
......@@ -11,23 +10,19 @@ export default {
tooltip,
},
props: {
mr: {
type: Object,
required: true,
},
isMergeButtonDisabled: {
value: {
type: Boolean,
required: true,
},
helpPath: {
type: String,
required: false,
default: '',
},
data() {
return {
squashBeforeMerge: this.mr.squash,
};
},
methods: {
updateSquashModel() {
eventHub.$emit('MRWidgetUpdateSquash', this.squashBeforeMerge);
isDisabled: {
type: Boolean,
required: false,
default: false,
},
},
};
......@@ -37,18 +32,19 @@ export default {
<div class="accept-control inline">
<label class="merge-param-checkbox">
<input
v-model="squashBeforeMerge"
:disabled="isMergeButtonDisabled"
:checked="value"
:disabled="isDisabled"
type="checkbox"
name="squash"
class="qa-squash-checkbox"
@change="updateSquashModel"
@change="$emit('input', $event.target.checked);"
/>
{{ __('Squash commits') }}
</label>
<a
v-if="helpPath"
v-tooltip
:href="mr.squashBeforeMergeHelpPath"
:href="helpPath"
data-title="About this feature"
data-placement="bottom"
target="_blank"
......
......@@ -32,7 +32,6 @@ import MRWidgetStore from './stores/ee_switch_mr_widget_store';
import MRWidgetService from './services/ee_switch_mr_widget_service';
import eventHub from './event_hub';
import stateMaps from './stores/ee_switch_state_maps';
import SquashBeforeMerge from './components/states/squash_before_merge.vue';
import notify from '~/lib/utils/notify';
import SourceBranchRemovalStatus from './components/source_branch_removal_status.vue';
import GroupedTestReportsApp from '../reports/components/grouped_test_reports_app.vue';
......@@ -59,7 +58,6 @@ export default {
'mr-widget-missing-branch': MissingBranchState,
'mr-widget-ready-to-merge': ReadyToMergeState,
'sha-mismatch': ShaMismatchState,
'mr-widget-squash-before-merge': SquashBeforeMerge,
'mr-widget-checking': CheckingState,
'mr-widget-unresolved-discussions': UnresolvedDiscussionsState,
'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 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 { createLocalVue, shallowMount } from '@vue/test-utils';
const commitMessage = 'This is the commit message';
const commitMessageWithDescription = 'This is the commit message description';
const createComponent = (customConfig = {}) => {
const Component = Vue.extend(ReadyToMerge);
const createTestMr = customConfig => {
const mr = {
isPipelineActive: false,
pipeline: null,
......@@ -16,6 +17,7 @@ const createComponent = (customConfig = {}) => {
hasCI: false,
ciStatus: null,
sha: '12345678',
squash: false,
commitMessage,
commitMessageWithDescription,
shouldRemoveSourceBranch: true,
......@@ -24,14 +26,23 @@ const createComponent = (customConfig = {}) => {
Object.assign(mr, customConfig.mr);
const service = {
return mr;
};
const createTestService = () => ({
merge() {},
poll() {},
};
});
const createComponent = (customConfig = {}) => {
const Component = Vue.extend(ReadyToMerge);
return new Component({
el: document.createElement('div'),
propsData: { mr, service },
propsData: {
mr: createTestMr(customConfig),
service: createTestService(),
},
});
};
......@@ -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('when allowed to merge', () => {
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