Add test from reduxjs#293 and uncomment now-passing expect in 'should pass state consistently to mapState'

Author: jimbolla

test/components/Provider.spec.js

@@ -2,7 +2,7 @@ import expect from 'expect'
 import React, { PropTypes, Component } from 'react'
 import TestUtils from 'react-addons-test-utils'
 import { createStore } from 'redux'
-import { Provider } from '../../src/index'
+import { Provider, connect } from '../../src/index'
 
 describe('React', () => {
   describe('Provider', () => {
@@ -108,4 +108,67 @@ describe('React', () => {
       expect(spy.calls.length).toBe(0)
     })
   })
+
+  it('should pass state consistently to mapState', () => {
+    function stringBuilder(prev = '', action) {
+      return action.type === 'APPEND'
+        ? prev + action.body
+        : prev
+    }
+
+    const store = createStore(stringBuilder)
+
+    store.dispatch({ type: 'APPEND', body: 'a' })
+    let childMapStateInvokes = 0
+
+    @connect(state => ({ state }), null, null, { withRef: true })
+    class Container extends Component {
+      emitChange() {
+        store.dispatch({ type: 'APPEND', body: 'b' })
+      }
+
+      render() {
+        return (
+          <div>
+            <button ref="button" onClick={this.emitChange.bind(this)}>change</button>
+            <ChildContainer parentState={this.props.state} />
+          </div>
+        )
+      }
+    }
+
+    @connect((state, parentProps) => {
+      childMapStateInvokes++
+      // The state from parent props should always be consistent with the current state
+      expect(state).toEqual(parentProps.parentState)
+      return {}
+    })
+    class ChildContainer extends Component {
+      render() {
+        return <div {...this.props} />
+      }
+    }
+
+    const tree = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <Container />
+      </Provider>
+    )
+
+    expect(childMapStateInvokes).toBe(1)
+
+    // The store state stays consistent when setState calls are batched
+    store.dispatch({ type: 'APPEND', body: 'c' })
+    expect(childMapStateInvokes).toBe(2)
+
+    // setState calls DOM handlers are batched
+    const container = TestUtils.findRenderedComponentWithType(tree, Container)
+    const node = container.getWrappedInstance().refs.button
+    TestUtils.Simulate.click(node)
+    expect(childMapStateInvokes).toBe(3)
+
+    // Provider uses unstable_batchedUpdates() under the hood
+    store.dispatch({ type: 'APPEND', body: 'd' })
+    expect(childMapStateInvokes).toBe(4)
+  })
 })

test/components/connect.spec.js

@@ -1538,14 +1538,8 @@ describe('React', () => {
       TestUtils.Simulate.click(node)
       expect(childMapStateInvokes).toBe(3)
 
-      // In future all setState calls will be batched[1]. Uncomment when it
-      // happens. For now redux-batched-updates middleware can be used as
-      // workaround this.
-      //
-      // [1]: https://twitter.com/sebmarkbage/status/642366976824864768
-      //
-      // store.dispatch({ type: 'APPEND', body: 'd' })
-      // expect(childMapStateInvokes).toBe(4)
+      store.dispatch({ type: 'APPEND', body: 'd' })
+      expect(childMapStateInvokes).toBe(4)
     })
 
     it('should not render the wrapped component when mapState does not produce change', () => {