Merge pull request reduxjs#75 from gaearon/component-tests

WIP: Component tests

Author: acdlite

package.json

@@ -43,7 +43,9 @@
     "eslint-plugin-react": "^2.3.0",
     "expect": "^1.6.0",
     "istanbul": "^0.3.15",
+    "jsdom": "~5.4.3",
     "mocha": "^2.2.5",
+    "mocha-jsdom": "~0.4.0",
     "react": "^0.13.0",
     "react-hot-loader": "^1.2.7",
     "rimraf": "^2.3.4",

src/components/createConnectDecorator.js

@@ -2,8 +2,10 @@ import getDisplayName from '../utils/getDisplayName';
 import shallowEqualScalar from '../utils/shallowEqualScalar';
 
 export default function createConnectDecorator(React, Connector) {
+  const { Component } = React;
+
   return function connect(select) {
-    return DecoratedComponent => class ConnectorDecorator {
+    return DecoratedComponent => class ConnectorDecorator extends Component {
       static displayName = `Connector(${getDisplayName(DecoratedComponent)})`;
 
       shouldComponentUpdate(nextProps) {
@@ -13,14 +15,10 @@ export default function createConnectDecorator(React, Connector) {
       render() {
         return (
           <Connector select={state => select(state, this.props)}>
-            {this.renderChild}
+            {stuff => <DecoratedComponent {...stuff} {...this.props} />}
           </Connector>
         );
       }
-
-      renderChild(state) {
-        return <DecoratedComponent {...state} />;
-      }
     };
   };
 }

src/components/createConnector.js

@@ -71,7 +71,7 @@ export default function createConnector(React) {
       const { redux } = this.context;
 
       return children({
-        dispatch: ::redux.dispatch,
+        dispatch: redux.dispatch,
         ...slice
       });
     }

src/components/createProvideDecorator.js

@@ -1,14 +1,16 @@
 import getDisplayName from '../utils/getDisplayName';
 
 export default function createProvideDecorator(React, Provider) {
+  const { Component } = React;
+
   return function provide(redux) {
-    return DecoratedComponent => class ProviderDecorator {
+    return DecoratedComponent => class ProviderDecorator extends Component {
       static displayName = `Provider(${getDisplayName(DecoratedComponent)})`;
 
       render() {
         return (
           <Provider redux={redux}>
-            {props => <DecoratedComponent {...this.props} {...props} />}
+            {() => <DecoratedComponent {...this.props} />}
           </Provider>
         );
       }

src/react-native.js

@@ -1,6 +1,4 @@
 import React from 'react-native';
 import createAll from './components/createAll';
 
-const { Provider, Connector, provide, connect } = createAll(React);
-
-export { Provider, Connector, provide, connect };
+export const { Provider, Connector, provide, connect } = createAll(React);

src/react.js

@@ -1,6 +1,4 @@
 import React from 'react';
 import createAll from './components/createAll';
 
-const { Provider, Connector, provide, connect } = createAll(React);
-
-export { Provider, Connector, provide, connect };
+export const { Provider, Connector, provide, connect } = createAll(React);

test/components/Connector.spec.js

@@ -0,0 +1,148 @@
+import expect from 'expect';
+import jsdom from 'mocha-jsdom';
+import React, { PropTypes, Component } from 'react/addons';
+import { createRedux } from '../../src';
+import { Connector } from '../../src/react';
+
+const { TestUtils } = React.addons;
+
+describe('React', () => {
+  describe('Connector', () => {
+    jsdom();
+
+    // Mock minimal Provider interface
+    class Provider extends Component {
+      static childContextTypes = {
+        redux: PropTypes.object.isRequired
+      }
+
+      getChildContext() {
+        return { redux: this.props.redux };
+      }
+
+      render() {
+        return this.props.children();
+      }
+    }
+
+    const stringBuilder = (prev = '', action) => {
+      return action.type === 'APPEND'
+        ? prev + action.body
+        : prev;
+    };
+
+    it('gets Redux from context', () => {
+      const redux = createRedux({ test: () => 'test' });
+
+      const tree = TestUtils.renderIntoDocument(
+        <Provider redux={redux}>
+          {() => (
+            <Connector>
+              {() => <div />}
+            </Connector>
+          )}
+        </Provider>
+      );
+
+      const connector = TestUtils.findRenderedComponentWithType(tree, Connector);
+      expect(connector.context.redux).toBe(redux);
+    });
+
+    it('subscribes to Redux changes', () => {
+      const redux = createRedux({ string: stringBuilder });
+
+      const tree = TestUtils.renderIntoDocument(
+        <Provider redux={redux}>
+          {() => (
+            <Connector select={state => ({ string: state.string })}>
+              {({ string }) => <div string={string} />}
+            </Connector>
+          )}
+        </Provider>
+      );
+
+      const div = TestUtils.findRenderedDOMComponentWithTag(tree, 'div');
+      expect(div.props.string).toBe('');
+      redux.dispatch({ type: 'APPEND', body: 'a'});
+      expect(div.props.string).toBe('a');
+      redux.dispatch({ type: 'APPEND', body: 'b'});
+      expect(div.props.string).toBe('ab');
+    });
+
+    it('unsubscribes before unmounting', () => {
+      const redux = createRedux({ test: () => 'test' });
+      const subscribe = redux.subscribe;
+
+      // Keep track of unsubscribe by wrapping `subscribe()`
+      const spy = expect.createSpy(() => {});
+      redux.subscribe = (listener) => {
+        const unsubscribe = subscribe(listener);
+        return () => {
+          spy();
+          return unsubscribe();
+        };
+      };
+
+      const tree = TestUtils.renderIntoDocument(
+        <Provider redux={redux}>
+          {() => (
+            <Connector select={state => ({ string: state.string })}>
+              {({ string }) => <div string={string} />}
+            </Connector>
+          )}
+        </Provider>
+      );
+
+      const connector = TestUtils.findRenderedComponentWithType(tree, Connector);
+      expect(spy.calls.length).toBe(0);
+      connector.componentWillUnmount();
+      expect(spy.calls.length).toBe(1);
+    });
+
+    it('shallow compares selected state to prevent unnecessary updates', () =>{
+      const redux = createRedux({ string: stringBuilder });
+      const spy = expect.createSpy(() => {});
+      function render({ string }) {
+        spy();
+        return <div string={string}/>;
+      }
+
+      const tree = TestUtils.renderIntoDocument(
+        <Provider redux={redux}>
+          {() => (
+            <Connector select={state => ({ string: state.string })}>
+              {render}
+            </Connector>
+          )}
+        </Provider>
+      );
+
+      const div = TestUtils.findRenderedDOMComponentWithTag(tree, 'div');
+      expect(spy.calls.length).toBe(1);
+      expect(div.props.string).toBe('');
+      redux.dispatch({ type: 'APPEND', body: 'a'});
+      expect(spy.calls.length).toBe(2);
+      redux.dispatch({ type: 'APPEND', body: 'b'});
+      expect(spy.calls.length).toBe(3);
+      redux.dispatch({ type: 'APPEND', body: ''});
+      expect(spy.calls.length).toBe(3);
+    });
+
+    it('passes `dispatch()` to child function', () => {
+      const redux = createRedux({ test: () => 'test' });
+
+      const tree = TestUtils.renderIntoDocument(
+        <Provider redux={redux}>
+          {() => (
+            <Connector>
+              {({ dispatch }) => <div dispatch={dispatch} />}
+            </Connector>
+          )}
+        </Provider>
+      );
+
+      const div = TestUtils.findRenderedDOMComponentWithTag(tree, 'div');
+      expect(div.props.dispatch).toBe(redux.dispatch);
+    });
+  });
+});

test/components/Provider.spec.js

@@ -0,0 +1,66 @@
+import expect from 'expect';
+import jsdom from 'mocha-jsdom';
+import React, { PropTypes, Component } from 'react/addons';
+import { createRedux } from '../../src';
+import { Provider } from '../../src/react';
+
+const { TestUtils } = React.addons;
+
+describe('React', () => {
+  describe('Provider', () => {
+    jsdom();
+
+    class Child extends Component {
+      static contextTypes = {
+        redux: PropTypes.object.isRequired
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+
+    it('adds Redux to child context', () => {
+      const redux = createRedux({ test: () => 'test' });
+
+      const tree = TestUtils.renderIntoDocument(
+        <Provider redux={redux}>
+          {() => <Child />}
+        </Provider>
+      );
+
+      const child = TestUtils.findRenderedComponentWithType(tree, Child);
+      expect(child.context.redux).toBe(redux);
+    });
+
+    it('does not lose subscribers when receiving new props', () => {
+      const redux1 = createRedux({ test: () => 'test' });
+      const redux2 = createRedux({ test: () => 'test' });
+      const spy = expect.createSpy(() => {});
+
+      class ProviderContainer extends Component {
+        state = { redux: redux1 };
+
+        render() {
+          return (
+            <Provider redux={this.state.redux}>
+              {() => <Child />}
+            </Provider>
+          );
+        }
+      }
+
+      const container = TestUtils.renderIntoDocument(<ProviderContainer />);
+      const child = TestUtils.findRenderedComponentWithType(container, Child);
+
+      child.context.redux.subscribe(spy);
+      child.context.redux.dispatch({});
+      expect(spy.calls.length).toEqual(1);
+
+      container.setState({ redux: redux2 });
+      expect(spy.calls.length).toEqual(2);
+      child.context.redux.dispatch({});
+      expect(spy.calls.length).toEqual(3);
+    });
+  });
+});

test/components/connect.spec.js

@@ -0,0 +1,61 @@
+import expect from 'expect';
+import jsdom from 'mocha-jsdom';
+import React, { PropTypes, Component } from 'react/addons';
+import { createRedux } from '../../src';
+import { connect, Connector } from '../../src/react';
+
+const { TestUtils } = React.addons;
+
+describe('React', () => {
+  describe('provide', () => {
+    jsdom();
+
+    // Mock minimal Provider interface
+    class Provider extends Component {
+      static childContextTypes = {
+        redux: PropTypes.object.isRequired
+      }
+
+      getChildContext() {
+        return { redux: this.props.redux };
+      }
+
+      render() {
+        return this.props.children();
+      }
+    }
+
+    it('wraps component with Provider', () => {
+      const redux = createRedux({ test: () => 'test' });
+
+      @connect(state => state)
+      class Container extends Component {
+        render() {
+          return <div {...this.props} />;
+        }
+      }
+
+      const container = TestUtils.renderIntoDocument(
+        <Provider redux={redux}>
+          {() => <Container pass="through" />}
+        </Provider>
+      );
+      const div = TestUtils.findRenderedDOMComponentWithTag(container, 'div');
+      expect(div.props.pass).toEqual('through');
+      expect(div.props.test).toEqual('test');
+      expect(() => TestUtils.findRenderedComponentWithType(container, Connector))
+        .toNotThrow();
+    });
+
+    it('sets displayName correctly', () => {
+      @connect(state => state)
+      class Container extends Component {
+        render() {
+          return <div />;
+        }
+      }
+
+      expect(Container.displayName).toBe('Connector(Container)');
+    });
+  });
+});