From 1987b1e241afaa07f3fb42f45947fe12dd088428 Mon Sep 17 00:00:00 2001 From: Ofir Shapira Date: Tue, 15 May 2018 12:00:37 +0300 Subject: [PATCH 1/2] fix(checkbox): applying disable attribute to input component if exists on Checkbox --- src/modules/Checkbox/Checkbox.js | 48 ++++++++++++-------------------- 1 file changed, 18 insertions(+), 30 deletions(-) diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js index 813081f1f8..9556b0efd1 100644 --- a/src/modules/Checkbox/Checkbox.js +++ b/src/modules/Checkbox/Checkbox.js @@ -47,10 +47,7 @@ export default class Checkbox extends Component { fitted: PropTypes.bool, /** A unique identifier. */ - id: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string, - ]), + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** Whether or not checkbox is indeterminate. */ indeterminate: PropTypes.bool, @@ -86,50 +83,32 @@ export default class Checkbox extends Component { onMouseDown: PropTypes.func, /** Format as a radio element. This means it is an exclusive option. */ - radio: customPropTypes.every([ - PropTypes.bool, - customPropTypes.disallow(['slider', 'toggle']), - ]), + radio: customPropTypes.every([PropTypes.bool, customPropTypes.disallow(['slider', 'toggle'])]), /** A checkbox can be read-only and unable to change states. */ readOnly: PropTypes.bool, /** Format to emphasize the current selection state. */ - slider: customPropTypes.every([ - PropTypes.bool, - customPropTypes.disallow(['radio', 'toggle']), - ]), + slider: customPropTypes.every([PropTypes.bool, customPropTypes.disallow(['radio', 'toggle'])]), /** A checkbox can receive focus. */ - tabIndex: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string, - ]), + tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** Format to show an on or off choice. */ - toggle: customPropTypes.every([ - PropTypes.bool, - customPropTypes.disallow(['radio', 'slider']), - ]), + toggle: customPropTypes.every([PropTypes.bool, customPropTypes.disallow(['radio', 'slider'])]), /** HTML input type, either checkbox or radio. */ type: PropTypes.oneOf(['checkbox', 'radio']), /** The HTML input value. */ - value: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, - ]), + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), } static defaultProps = { type: 'checkbox', } - static autoControlledProps = [ - 'checked', - 'indeterminate', - ] + static autoControlledProps = ['checked', 'indeterminate'] static _meta = { name: 'Checkbox', @@ -178,7 +157,11 @@ export default class Checkbox extends Component { if (!this.canToggle()) return - _.invoke(this.props, 'onClick', e, { ...this.props, checked: !checked, indeterminate: !!indeterminate }) + _.invoke(this.props, 'onClick', e, { + ...this.props, + checked: !checked, + indeterminate: !!indeterminate, + }) _.invoke(this.props, 'onChange', e, { ...this.props, checked: !checked, indeterminate: false }) this.trySetState({ checked: !checked, indeterminate: false }) @@ -188,7 +171,11 @@ export default class Checkbox extends Component { debug('handleMouseDown()') const { checked, indeterminate } = this.state - _.invoke(this.props, 'onMouseDown', e, { ...this.props, checked: !!checked, indeterminate: !!indeterminate }) + _.invoke(this.props, 'onMouseDown', e, { + ...this.props, + checked: !!checked, + indeterminate: !!indeterminate, + }) _.invoke(this.inputRef, 'focus') e.preventDefault() @@ -250,6 +237,7 @@ export default class Checkbox extends Component { {...htmlInputProps} checked={checked} className='hidden' + disabled={disabled} id={id} name={name} onClick={this.handleInputClick} From 94887133a62d4355342336473d6da1603a4d252e Mon Sep 17 00:00:00 2001 From: Ofir Shapira Date: Fri, 18 May 2018 11:12:06 +0300 Subject: [PATCH 2/2] test(checkbox): testing the underlying input have disabled attribute in case the Checkbox has truthy disabled property --- test/specs/modules/Checkbox/Checkbox-test.js | 109 +++++++++---------- 1 file changed, 51 insertions(+), 58 deletions(-) diff --git a/test/specs/modules/Checkbox/Checkbox-test.js b/test/specs/modules/Checkbox/Checkbox-test.js index 156401b6a5..0fc12b7e15 100644 --- a/test/specs/modules/Checkbox/Checkbox-test.js +++ b/test/specs/modules/Checkbox/Checkbox-test.js @@ -65,36 +65,24 @@ describe('Checkbox', () => { it('can be checked and unchecked', () => { wrapperShallow() - wrapper - .find('input') - .should.not.be.checked() + wrapper.find('input').should.not.be.checked() wrapper.simulate('click') - wrapper - .find('input') - .should.be.checked() + wrapper.find('input').should.be.checked() wrapper.simulate('click') - wrapper - .find('input') - .should.not.be.checked() + wrapper.find('input').should.not.be.checked() }) it('can be checked but not unchecked when radio', () => { wrapperShallow() - wrapper - .find('input') - .should.not.be.checked() + wrapper.find('input').should.not.be.checked() wrapper.simulate('click') - wrapper - .find('input') - .should.be.checked() + wrapper.find('input').should.be.checked() wrapper.simulate('click') - wrapper - .find('input') - .should.be.checked() + wrapper.find('input').should.be.checked() }) }) @@ -154,17 +142,24 @@ describe('Checkbox', () => { wrapperShallow() wrapper.simulate('click') - wrapper - .find('input') - .should.not.be.checked() + wrapper.find('input').should.not.be.checked() }) + it('cannot be unchecked', () => { wrapperShallow() wrapper.simulate('click') - wrapper + wrapper.find('input').should.be.checked() + }) + + it('is applied to the underlying html input element', () => { + wrapperShallow() .find('input') - .should.be.checked() + .should.have.prop('disabled', true) + + wrapperShallow() + .find('input') + .should.have.prop('disabled', false) }) }) @@ -203,21 +198,17 @@ describe('Checkbox', () => { describe('label', () => { it('adds the "fitted" class when not present', () => { - shallow() - .should.have.className('fitted') + shallow().should.have.className('fitted') }) it('adds the "fitted" class when is null', () => { - shallow() - .should.have.className('fitted') + shallow().should.have.className('fitted') }) it('does not add the "fitted" class when is not nil', () => { - shallow() - .should.not.have.className('fitted') + shallow().should.not.have.className('fitted') - shallow() - .should.not.have.className('fitted') + shallow().should.not.have.className('fitted') }) }) @@ -225,15 +216,17 @@ describe('Checkbox', () => { it('is called with (event { name, value, !checked }) on click', () => { const spy = sandbox.spy() const expectProps = { name: 'foo', value: 'bar', checked: false, indeterminate: true } - mount() - .simulate('click') + mount().simulate('click') spy.should.have.been.calledOnce() - spy.should.have.been.calledWithMatch({}, { - ...expectProps, - checked: !expectProps.checked, - indeterminate: false, - }) + spy.should.have.been.calledWithMatch( + {}, + { + ...expectProps, + checked: !expectProps.checked, + indeterminate: false, + }, + ) }) it('is called once on input click when "id" prop is passed', () => { const onChange = sandbox.spy() @@ -260,15 +253,17 @@ describe('Checkbox', () => { it('is called with (event { name, value, checked }) on label click', () => { const spy = sandbox.spy() const expectProps = { name: 'foo', value: 'bar', checked: false, indeterminate: true } - mount() - .simulate('click') + mount().simulate('click') spy.should.have.been.calledOnce() - spy.should.have.been.calledWithMatch({}, { - ...expectProps, - checked: !expectProps.checked, - indeterminate: expectProps.indeterminate, - }) + spy.should.have.been.calledWithMatch( + {}, + { + ...expectProps, + checked: !expectProps.checked, + indeterminate: expectProps.indeterminate, + }, + ) }) it('is called once on input click when "id" prop is passed', () => { const onClick = sandbox.spy() @@ -295,15 +290,17 @@ describe('Checkbox', () => { it('is called with (event { name, value, checked }) on label mouse down', () => { const onMousedDown = sandbox.spy() const expectProps = { name: 'foo', value: 'bar', checked: false, indeterminate: true } - mount() - .simulate('mousedown') + mount().simulate('mousedown') onMousedDown.should.have.been.calledOnce() - onMousedDown.should.have.been.calledWithMatch({}, { - ...expectProps, - checked: expectProps.checked, - indeterminate: expectProps.indeterminate, - }) + onMousedDown.should.have.been.calledWithMatch( + {}, + { + ...expectProps, + checked: expectProps.checked, + indeterminate: expectProps.indeterminate, + }, + ) }) it('prevents default event', () => { const preventDefault = sandbox.spy() @@ -326,17 +323,13 @@ describe('Checkbox', () => { wrapperShallow() wrapper.simulate('click') - wrapper - .find('input') - .should.not.be.checked() + wrapper.find('input').should.not.be.checked() }) it('cannot be unchecked', () => { wrapperShallow() wrapper.simulate('click') - wrapper - .find('input') - .should.be.checked() + wrapper.find('input').should.be.checked() }) })