Merge pull request #908 from maludwig/master

Resolve Issue 905, defaultChecked bug on Control.checkbox

Author: davidkpiano

.gitignore

@@ -46,3 +46,4 @@ examples/sandbox
 
 # Other
 .vscode/
+.idea/

src/actions/model-actions.js

@@ -96,7 +96,10 @@ export function createModelActions(s = defaultStrategies) {
       return change(model, multiValue);
     }
 
-    return change(model, !currentValue);
+    if (typeof value === 'undefined') {
+      return change(model, !currentValue);
+    }
+    return change(model, value);
   };
 
   const check = (model, value) => (dispatch, getState) => {

src/components/control-component.js

@@ -662,23 +662,24 @@ function createControlClass(s = defaultStrategy) {
     const modelString = getModel(model, state);
     const fieldValue = s.getFieldFromState(state, modelString)
       || initialFieldState;
+    const modelValue = s.get(state, modelString);
 
     return {
       model: modelString,
-      modelValue: s.get(state, modelString),
+      modelValue,
       fieldValue,
       controlProps: finalControlProps,
     };
   }
 
   const ConnectedControl = resolveModel(connect(mapStateToProps, null, null, {
-    areOwnPropsEqual(ownProps, nextOwnProps) {
-      return shallowEqual(ownProps, nextOwnProps, {
+    areOwnPropsEqual(nextOwnProps, ownProps) {
+      return shallowEqual(nextOwnProps, ownProps, {
         omitKeys: ['mapProps'],
       });
     },
-    areStatePropsEqual(stateProps, nextStateProps) {
-      return shallowEqual(stateProps, nextStateProps, {
+    areStatePropsEqual(nextStateProps, stateProps) {
+      return shallowEqual(nextStateProps, stateProps, {
         deepKeys: ['controlProps'],
       });
     },

src/constants/control-props-map.js

@@ -57,9 +57,7 @@ const controlPropsMap = {
   },
   checkbox: {
     ...standardPropsMap,
-    checked: (props) => (props.defaultChecked
-      ? props.checked
-      : isChecked(props)),
+    checked: isChecked,
   },
   radio: {
     ...standardPropsMap,

test/control-component-spec.js

@@ -325,12 +325,14 @@ Object.keys(testContexts).forEach((testKey) => {
         assert.equal(
           get(store.getState().test, 'single'),
           false, 'false');
+        assert.equal(checkbox.checked, false);
 
         TestUtils.Simulate.change(checkbox);
 
         assert.equal(
           get(store.getState().test, 'single'),
           true, 'true');
+        assert.equal(checkbox.checked, true);
       });
 
       it('should check/uncheck the checkbox when model is externally changed', () => {
@@ -350,6 +352,114 @@ Object.keys(testContexts).forEach((testKey) => {
       });
     });
 
+    describe('with <Control.checkbox /> (single toggle, dynamic form, defaultChecked)', () => {
+      const initialState = getInitialState({ single: true });
+      const store = testCreateStore({
+        testForm: formReducer('test'),
+        test: modelReducer('test', initialState),
+      });
+
+      const field = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Control.checkbox model="test.other" defaultChecked />
+        </Provider>
+      );
+
+      const checkbox = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+
+      it('should initially set the checkbox to checked when defaultChecked is true', () => {
+        assert.equal(checkbox.checked, true);
+      });
+
+      it('should give each radio input a name attribute of the model', () => {
+        assert.equal(checkbox.name, 'test.other');
+      });
+
+      it('should dispatch a change event when changed', () => {
+        TestUtils.Simulate.change(checkbox);
+
+        assert.equal(
+          get(store.getState().test, 'other'),
+          false, 'false');
+        assert.equal(checkbox.checked, false);
+
+        TestUtils.Simulate.change(checkbox);
+
+        assert.equal(
+          get(store.getState().test, 'other'),
+          true, 'true');
+        assert.equal(checkbox.checked, true);
+      });
+
+      it('should check/uncheck the checkbox when model is externally changed', () => {
+        store.dispatch(actions.change('test.other', true));
+        assert.equal(checkbox.checked, true);
+
+        store.dispatch(actions.change('test.other', false));
+        assert.equal(checkbox.checked, false);
+      });
+
+      it('should uncheck the checkbox for any falsey value', () => {
+        store.dispatch(actions.change('test.other', ''));
+
+        assert.equal(checkbox.checked, false);
+      });
+    });
+
+    describe('with <Control.checkbox /> (single toggle, dynamic form, !defaultChecked)', () => {
+      const initialState = getInitialState({ single: true });
+      const store = testCreateStore({
+        testForm: formReducer('test'),
+        test: modelReducer('test', initialState),
+      });
+
+      const field = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Control.checkbox model="test.other" defaultChecked={false} />
+        </Provider>
+      );
+
+      const checkbox = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+
+      it('should initially set the checkbox to unchecked when defaultChecked is false', () => {
+        assert.equal(checkbox.checked, false);
+      });
+
+      it('should give each radio input a name attribute of the model', () => {
+        assert.equal(checkbox.name, 'test.other');
+      });
+
+      it('should dispatch a change event when changed', () => {
+        TestUtils.Simulate.change(checkbox);
+
+        assert.equal(
+          get(store.getState().test, 'other'),
+          true, 'true');
+
+        TestUtils.Simulate.change(checkbox);
+
+        assert.equal(
+          get(store.getState().test, 'other'),
+          false, 'false');
+      });
+
+      it('should check/uncheck the checkbox when model is externally changed', () => {
+        store.dispatch(actions.change('test.other', false));
+
+        assert.equal(checkbox.checked, false);
+
+        store.dispatch(actions.change('test.other', true));
+
+        assert.equal(checkbox.checked, true);
+      });
+
+      it('should uncheck the checkbox for any falsey value', () => {
+        store.dispatch(actions.change('test.other', ''));
+
+        assert.equal(checkbox.checked, false);
+      });
+    });
+
     describe('with <Control.checkbox /> (multi toggle)', () => {
       const initialState = getInitialState({ foo: [1] });
       const store = testCreateStore({