diff --git a/js/src/ui/Form/Select/select.js b/js/src/ui/Form/Select/select.js index c6dae8b61..f79cae58c 100644 --- a/js/src/ui/Form/Select/select.js +++ b/js/src/ui/Form/Select/select.js @@ -46,26 +46,26 @@ export default class Select extends Component { } render () { - const { disabled, error, label, hint, value, children, className, onBlur, onChange, onKeyDown } = this.props; + const { children, className, disabled, error, hint, label, onBlur, onChange, onKeyDown, value } = this.props; return ( + onKeyDown={ onKeyDown } + underlineDisabledStyle={ UNDERLINE_DISABLED } + underlineStyle={ UNDERLINE_NORMAL } + value={ value }> { children } ); diff --git a/js/src/ui/Form/TypedInput/typedInput.js b/js/src/ui/Form/TypedInput/typedInput.js index 6383e62bc..3d21dd6d7 100644 --- a/js/src/ui/Form/TypedInput/typedInput.js +++ b/js/src/ui/Form/TypedInput/typedInput.js @@ -289,9 +289,8 @@ export default class TypedInput extends Component { return ( + value={ bool }> { bool } ); @@ -299,19 +298,23 @@ export default class TypedInput extends Component { return ( ); } onChangeBool = (event, _index, value) => { - this.props.onChange(value === 'true'); + // NOTE: event.target.value added for enzyme simulated event testing + this.props.onChange((value || event.target.value) === 'true'); } onEthTypeChange = () => { diff --git a/js/src/ui/Form/TypedInput/typedInput.spec.js b/js/src/ui/Form/TypedInput/typedInput.spec.js index c86c94237..151c88104 100644 --- a/js/src/ui/Form/TypedInput/typedInput.spec.js +++ b/js/src/ui/Form/TypedInput/typedInput.spec.js @@ -36,12 +36,35 @@ function render (props) { ); - console.log(component.debug()); return component; } describe.only('ui/Form/TypedInput', () => { - it('renders defaults', () => { - expect(render({ param: { type: ABI_TYPES.BOOL } })).to.be.ok; + describe('bool selection', () => { + beforeEach(() => { + render({ param: { type: ABI_TYPES.BOOL } }); + }); + + it('renders', () => { + expect(component).to.be.ok; + }); + + it('calls onChange when value changes', () => { + component.find('DropDownMenu').simulate('change', { target: { value: 'true' } }); + + expect(onChange).to.have.been.called; + }); + + it("calls onChange(true) when value changes to 'true'", () => { + component.find('DropDownMenu').simulate('change', { target: { value: 'true' } }); + + expect(onChange).to.have.been.calledWith(true); + }); + + it("calls onChange(false) when value changes to 'false'", () => { + component.find('DropDownMenu').simulate('change', { target: { value: 'false' } }); + + expect(onChange).to.have.been.calledWith(false); + }); }); });