From 28be8d6f6c799fb5b756f1d362562ff488714d1d Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Mon, 12 Dec 2016 10:55:20 +0100
Subject: [PATCH] Test for bool TypedInput

---
 js/src/ui/Form/Select/select.js              | 14 +++++-----
 js/src/ui/Form/TypedInput/typedInput.js      | 17 +++++++-----
 js/src/ui/Form/TypedInput/typedInput.spec.js | 29 ++++++++++++++++++--
 3 files changed, 43 insertions(+), 17 deletions(-)

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 (
       <SelectField
-        className={ className }
         autoComplete='off'
+        className={ className }
         disabled={ disabled }
         errorText={ error }
         floatingLabelFixed
         floatingLabelText={ label }
         fullWidth
         hintText={ hint }
-        name={ NAME_ID }
         id={ NAME_ID }
-        underlineDisabledStyle={ UNDERLINE_DISABLED }
-        underlineStyle={ UNDERLINE_NORMAL }
-        value={ value }
+        name={ NAME_ID }
         onBlur={ onBlur }
         onChange={ onChange }
-        onKeyDown={ onKeyDown }>
+        onKeyDown={ onKeyDown }
+        underlineDisabledStyle={ UNDERLINE_DISABLED }
+        underlineStyle={ UNDERLINE_NORMAL }
+        value={ value }>
         { children }
       </SelectField>
     );
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 (
         <MenuItem
           key={ bool }
-          value={ bool }
           label={ bool }
-        >
+          value={ bool }>
           { bool }
         </MenuItem>
       );
@@ -299,19 +298,23 @@ export default class TypedInput extends Component {
 
     return (
       <Select
-        label={ label }
-        hint={ hint }
-        value={ value ? 'true' : 'false' }
         error={ error }
+        hint={ hint }
+        label={ label }
         onChange={ this.onChangeBool }
-      >
+        value={
+          value
+            ? 'true'
+            : 'false'
+        }>
         { boolitems }
       </Select>
     );
   }
 
   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) {
     </ContextProvider>
   );
 
-  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);
+    });
   });
 });