Commit d2fb555c authored by Vitaly Slobodin's avatar Vitaly Slobodin

Merge branch '225275-add-glcheckbox-to-squah-commits' into 'master'

Resolve "Improve "squash_before_merge" to utilize GlFormCheckbox"

See merge request gitlab-org/gitlab!48338
parents e8468b40 10441c65
<script>
import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
import { GlIcon, GlTooltipDirective, GlFormCheckbox } from '@gitlab/ui';
import { SQUASH_BEFORE_MERGE } from '../../i18n';
export default {
components: {
GlIcon,
GlFormCheckbox,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -32,32 +33,23 @@ export default {
tooltipTitle() {
return this.isDisabled ? this.$options.i18n.tooltipTitle : null;
},
tooltipFocusable() {
return this.isDisabled ? '0' : null;
},
},
};
</script>
<template>
<div class="inline">
<label
<div class="gl-display-flex gl-align-items-center">
<gl-form-checkbox
v-gl-tooltip
:class="{ 'gl-text-gray-400': isDisabled }"
:tabindex="tooltipFocusable"
data-testid="squashLabel"
:checked="value"
:disabled="isDisabled"
name="squash"
class="qa-squash-checkbox js-squash-checkbox gl-mb-0 gl-mr-2"
:title="tooltipTitle"
@change="checked => $emit('input', checked)"
>
<input
:checked="value"
:disabled="isDisabled"
type="checkbox"
name="squash"
class="qa-squash-checkbox js-squash-checkbox"
@change="$emit('input', $event.target.checked)"
/>
{{ $options.i18n.checkboxLabel }}
</label>
</gl-form-checkbox>
<a
v-if="helpPath"
v-gl-tooltip
......
---
title: Add GlFormCheckbox to squash commits
merge_request: 48338
author:
type: changed
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlFormCheckbox } from '@gitlab/ui';
import SquashBeforeMerge from '~/vue_merge_request_widget/components/states/squash_before_merge.vue';
import { SQUASH_BEFORE_MERGE } from '~/vue_merge_request_widget/i18n';
......@@ -20,17 +21,15 @@ describe('Squash before merge component', () => {
wrapper.destroy();
});
const findLabel = () => wrapper.find('[data-testid="squashLabel"]');
const findCheckbox = () => wrapper.find(GlFormCheckbox);
describe('checkbox', () => {
const findCheckbox = () => wrapper.find('.js-squash-checkbox');
it('is unchecked if passed value prop is false', () => {
createComponent({
value: false,
});
expect(findCheckbox().element.checked).toBeFalsy();
expect(findCheckbox().vm.$attrs.checked).toBe(false);
});
it('is checked if passed value prop is true', () => {
......@@ -38,22 +37,7 @@ describe('Squash before merge component', () => {
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();
});
expect(findCheckbox().vm.$attrs.checked).toBe(true);
});
it('is disabled if isDisabled prop is true', () => {
......@@ -62,31 +46,12 @@ describe('Squash before merge component', () => {
isDisabled: true,
});
expect(findCheckbox().attributes('disabled')).toBeTruthy();
});
});
describe('label', () => {
describe.each`
isDisabled | expectation
${true} | ${'grays out text if it is true'}
${false} | ${'does not gray out text if it is false'}
`('isDisabled prop', ({ isDisabled, expectation }) => {
beforeEach(() => {
createComponent({
value: false,
isDisabled,
});
});
it(expectation, () => {
expect(findLabel().classes('gl-text-gray-400')).toBe(isDisabled);
});
expect(findCheckbox().vm.$attrs.disabled).toBe(true);
});
});
describe('tooltip', () => {
const tooltipTitle = () => findLabel().attributes('title');
const tooltipTitle = () => findCheckbox().attributes('title');
it('does not render when isDisabled is false', () => {
createComponent({
......@@ -114,7 +79,7 @@ describe('Squash before merge component', () => {
const aboutLink = wrapper.find('a');
expect(aboutLink.exists()).toBeFalsy();
expect(aboutLink.exists()).toBe(false);
});
it('is rendered if help path is passed', () => {
......@@ -125,7 +90,7 @@ describe('Squash before merge component', () => {
const aboutLink = wrapper.find('a');
expect(aboutLink.exists()).toBeTruthy();
expect(aboutLink.exists()).toBe(true);
});
it('should have a correct help path if passed', () => {
......
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