Merge pull request #112 from gthomas-appfolio/removeMobxFromSelect

ap - fix clear button on Selects
appfolio · Jan 23, 2017 · 9fa2651 · 9fa2651
2 parents c89a228 + 67432cc
commit 9fa2651
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/src/components/Select.js b/src/components/Select.js
@@ -22,7 +22,7 @@ class Select2 extends Component {
     }
   }
 
-  updateValue = ({ value }) => { this.setState({ value })}
+  updateValue = value => { this.setState({ value }); }
 
   render() {
     const { value, ...props } = this.props;

diff --git a/test/components/Select.spec.js b/test/components/Select.spec.js
@@ -3,7 +3,7 @@
 import 'jsdom-global/register';
 import React from 'react';
 import assert from 'assert';
-import { mount, shallow } from 'enzyme';
+import { shallow } from 'enzyme';
 
 import Select from 'react-select';
 import Select2 from '../../src/components/Select.js';
@@ -21,9 +21,14 @@ describe('<Select />', () => {
       const component = shallow(<Select2 options={OPTIONS} />);
 
       it('should have a blank default', () => {
-        assert.equal(component.find(Select).length, 1);
+        assert.equal(component.type(), Select);
         assert.equal(component.prop('value'), '');
       });
+
+      it('should clear input', () => {
+        component.simulate('change', null);
+        assert.equal(component.prop('value'), null);
+      });
     });
 
     describe('with defaultValue', () => {
@@ -34,22 +39,22 @@ describe('<Select />', () => {
       });
 
       it('should update the value when changed', () => {
-        component.simulate('change', { value: 4 });
-        assert.equal(component.prop('value'), 4);
+        component.simulate('change', 'stuff');
+        assert.equal(component.prop('value'), 'stuff');
       });
     });
+  });
 
-    describe('controlled', () => {
-      const component = shallow(<Select2 options={OPTIONS} value={3} defaultValue={2} />);
+  describe('controlled', () => {
+    const component = shallow(<Select2 options={OPTIONS} value={3} defaultValue={2} />);
 
-      it('should render with the given value', () => {
-        assert.equal(component.prop('value'), 3);
-      });
+    it('should render with the given value', () => {
+      assert.equal(component.prop('value'), 3);
+    });
 
-      it('should not update the value when changed', () => {
-        component.simulate('change', { value: 4 });
-        assert.equal(component.prop('value'), 3);
-      });
+    it('should not update the value when changed', () => {
+      component.simulate('change', OPTIONS[3]);
+      assert.equal(component.prop('value'), 3);
     });
   });
 
@@ -63,7 +68,8 @@ describe('<Select />', () => {
         complete: true
       });
     };
-    const component = mount(<Select2 loadOptions={getOptions} />);
-    assert(component); // TODO test async options are rendered
+
+    const component = shallow(<Select2 loadOptions={getOptions} />);
+    assert.equal(component.type(), Select.Async);
   });
 });