breaking(AutoControlledProps): Ignore undefined

Author: jeffcarbs

src/lib/AutoControlledComponent.js

@@ -121,8 +121,13 @@ export default class AutoControlledComponent extends Component {
   componentWillReceiveProps(nextProps) {
     if (super.componentWillReceiveProps) super.componentWillReceiveProps(nextProps)
 
-    // props always win, update state with all auto controlled prop
-    const newState = _.pick(nextProps, this.constructor.autoControlledProps)
+    // Props always win, update state with all auto controlled prop that were
+    // defined by the parent.
+    const newState = _.pick(
+      _.omitBy(nextProps, _.isUndefined),
+      this.constructor.autoControlledProps
+    )
+
     if (!_.isEmpty(newState)) this.setState(newState)
   }
 
@@ -147,9 +152,10 @@ export default class AutoControlledComponent extends Component {
       }
     }
 
-    // pick auto controlled props
-    // omit props from parent
-    let newState = _.omit(_.pick(maybeState, autoControlledProps), _.keys(this.props))
+    const parentDefinedProps = _.omitBy(this.props, _.isUndefined)
+
+    // Pick auto controlled props, omitting props defined by the parent.
+    let newState = _.omit(_.pick(maybeState, autoControlledProps), _.keys(parentDefinedProps))
 
     if (state) newState = { ...newState, ...state }
 

test/specs/lib/AutoControlledComponent-test.js

@@ -95,6 +95,56 @@ describe('extending AutoControlledComponent', () => {
       wrapper
         .should.have.state(randomProp, props[randomProp])
     })
+
+    it('sets state for props passed as undefined by the parent', () => {
+      consoleUtil.disableOnce()
+
+      const props = makeProps()
+      const autoControlledProps = _.keys(props)
+
+      const randomProp = _.sample(autoControlledProps)
+      const randomValue = faker.hacker.phrase()
+
+      props[randomProp] = undefined
+
+      TestClass = createTestClass({ autoControlledProps, state: {} })
+      const wrapper = shallow(<TestClass {...props } />)
+
+      wrapper
+        .instance()
+        .trySetState({ [randomProp]: randomValue })
+
+      // not updated
+      wrapper
+        .should.have.state(randomProp, randomValue)
+    })
+
+    it('does not set state for props passed as null by the parent', () => {
+      consoleUtil.disableOnce()
+
+      const props = makeProps()
+      const autoControlledProps = _.keys(props)
+
+      const randomProp = _.sample(autoControlledProps)
+      const randomValue = faker.hacker.phrase()
+
+      props[randomProp] = null
+
+      TestClass = createTestClass({ autoControlledProps, state: {} })
+      const wrapper = shallow(<TestClass {...props } />)
+
+      wrapper
+        .instance()
+        .trySetState({ [randomProp]: randomValue })
+
+      // not updated
+      wrapper
+        .should.not.have.state(randomProp, randomValue)
+
+      // is original value
+      wrapper
+        .should.have.state(randomProp, props[randomProp])
+    })
   })
 
   describe('initial state', () => {
@@ -244,5 +294,41 @@ describe('extending AutoControlledComponent', () => {
       wrapper
         .should.not.have.state(randomDefaultProp, randomValue)
     })
+
+    it('sets state for props passed as undefined by the parent', () => {
+      consoleUtil.disableOnce()
+
+      const props = makeProps()
+      const autoControlledProps = _.keys(props)
+
+      const randomProp = _.sample(autoControlledProps)
+
+      TestClass = createTestClass({ autoControlledProps, state: {} })
+      const wrapper = shallow(<TestClass {...props} />)
+
+      wrapper
+        .setProps({ [randomProp]: undefined })
+
+      wrapper
+        .should.have.state(randomProp, props[randomProp])
+    })
+
+    it('does not set state for props passed as null by the parent', () => {
+      consoleUtil.disableOnce()
+
+      const props = makeProps()
+      const autoControlledProps = _.keys(props)
+
+      const randomProp = _.sample(autoControlledProps)
+
+      TestClass = createTestClass({ autoControlledProps, state: {} })
+      const wrapper = shallow(<TestClass {...props} />)
+
+      wrapper
+        .setProps({ [randomProp]: null })
+
+      wrapper
+        .should.have.state(randomProp, null)
+    })
   })
 })