add tests and some improvements

Description:
- add tests based on 'mocha', 'enzyme' and 'expect' packages
- functionality improvements: allow action dispatchers to
handle more than one argument. also, raise meaningful errors
when something was not done right

Author: akuzko

package.json

@@ -7,7 +7,8 @@
     "build": "babel src --out-dir lib",
     "clear": "rimraf lib",
     "rebuild": "npm run clear && npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "mocha --compilers js:babel-register --recursive --require ./test/setup.js",
+    "test:watch": "npm test -- --watch"
   },
   "repository": {
     "type": "git",
@@ -32,7 +33,14 @@
     "babel-preset-es2015": "^6.16.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-1": "^6.16.0",
+    "enzyme": "^2.4.1",
+    "expect": "^1.20.2",
+    "jsdom": "^9.5.0",
+    "mocha": "^3.1.0",
     "react": "^15.3.2",
+    "react-addons-pure-render-mixin": "^15.3.2",
+    "react-addons-test-utils": "^15.3.2",
+    "react-dom": "^15.3.2",
     "redux": "^3.6.0",
     "rimraf": "^2.5.4"
   },

src/components/Connector.jsx

@@ -1,19 +1,35 @@
 import React, { PropTypes, Component } from 'react';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import get from 'lodash/get';
+import isPlainObject from 'lodash/isPlainObject';
 import storeShape from '../utils/storeShape';
 
 const ownProps = Object.getOwnPropertyNames;
 const proto = Object.getPrototypeOf;
 
+function generateDispatchers(actionNames) {
+  actionNames.forEach(name => {
+    const type = this.action(name);
+    if (typeof this.prototype[`$${name}`] !== 'function') {
+      this.prototype[`$${name}`] = function() {
+        this.dispatch(type, ...arguments);
+      };
+    }
+  });
+}
+
 export default class Connector extends Component {
   static reduce(namespace, stateToHandlers) {
     this.$namespace = namespace;
     const initialState = this.$state;
     const actionNames = ownProps(stateToHandlers());
-    this.__generateDispatchers(actionNames);
+    generateDispatchers.call(this, actionNames);
 
     return function(state = initialState, action) {
+      if (!action.type) {
+        return state;
+      }
+
       if (action.type === `${namespace}/$reset`) {
         return initialState;
       }
@@ -23,24 +39,13 @@ export default class Connector extends Component {
       if (actionNamespace === namespace) {
         const handler = stateToHandlers(state)[actionType];
         if (handler) {
-          return handler(action.data);
+          return handler(...action.args);
         }
       }
       return state;
     };
   }
 
-  static __generateDispatchers(actionNames) {
-    actionNames.forEach(name => {
-      const type = this.action(name);
-      if (typeof this.prototype[`$${name}`] !== 'function') {
-        this.prototype[`$${name}`] = function(data) {
-          this.dispatch(type, data);
-        };
-      }
-    });
-  }
-
   static $namespace = 'global';
 
   static action(name) {
@@ -62,6 +67,11 @@ export default class Connector extends Component {
   constructor(props, context) {
     super(props, context);
     this.store = props.store || context.store;
+
+    if (!this.store) {
+      throw new Error(`${this.constructor.name} instance expects store object in props or in context`);
+    }
+
     this.state = this.getExposedState();
 
     this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
@@ -101,11 +111,17 @@ export default class Connector extends Component {
 
   getExposedState() {
     const state = this.store.getState();
-    return this.$expose(get(state, this.constructor.$namespace) || this.constructor.$state, state);
+    const result = this.$expose(get(state, this.constructor.$namespace) || this.constructor.$state, state);
+    if (!isPlainObject(result)) {
+      throw new Error(`${this.constructor.name}.$state should be a plain object` +
+        'or there should be a $expose instance method defined that returns a plain object'
+      );
+    }
+    return result;
   }
 
-  dispatch(type, data) {
-    return this.store.dispatch({ type, data });
+  dispatch(type, ...args) {
+    return this.store.dispatch({ type, args });
   }
 
   $expose($state) {
@@ -126,6 +142,12 @@ export default class Connector extends Component {
   }
 
   render() {
-    return React.createElement(this.getConnection(), { ...this.props, ...this.state });
+    const connectionType = this.getConnection();
+
+    if (!connectionType) {
+      throw new Error(`${this.constructor.name} should define a $connection class property`);
+    }
+
+    return React.createElement(connectionType, { ...this.props, ...this.state });
   }
 }

src/components/Reductor.jsx

@@ -10,7 +10,12 @@ import storeShape from '../utils/storeShape';
 export default class Reductor extends Component {
   static propTypes = {
     createStore: PropTypes.func.isRequired,
-    children: PropTypes.element.isRequired
+    connectorProp: PropTypes.string,
+    children: PropTypes.node.isRequired
+  };
+
+  static defaultProps = {
+    connectorProp: 'component'
   };
 
   static childContextTypes = {
@@ -30,8 +35,8 @@ export default class Reductor extends Component {
   getConnectors(childrenToProcess = this.props.children) {
     const tmp = Children.map(childrenToProcess, (child) => {
       const connectors = [];
-      const { component, children } = child.props;
-      if (component && component.$namespace) {
+      const { [this.props.connectorProp]: component, children } = (child.props || {});
+      if (component && component.$reducer) {
         connectors.push(component);
       }
       if (children) {
@@ -45,7 +50,7 @@ export default class Reductor extends Component {
   }
 
   getReducer() {
-    const connectors = groupBy(this.getConnectors().filter(c => c.$reducer), '$namespace');
+    const connectors = groupBy(this.getConnectors(), '$namespace');
 
     return function(state = {}, action) {
       const newState = {};
@@ -61,6 +66,6 @@ export default class Reductor extends Component {
   }
 
   render() {
-    return this.props.children;
+    return <div>{ this.props.children }</div>;
   }
 }

test/components/Connection.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { createStore } from 'redux';
+import { Connector, Connection } from '../../src';
+import { mount } from 'enzyme';
+import expect from 'expect';
+
+describe('<Connection />', function() {
+  class TestConnection extends Connection {
+    load() {
+      return this.$load([1, 2, 3])
+    }
+    render() {
+      return <div className="connection" onClick={() => this.load()} />
+    }
+  }
+
+  class TestConnector extends Connector {
+    static $connection = TestConnection;
+    static $state = []
+    static $reducer = TestConnector.reduce('foo', (state) => ({
+      $receive: (items) => items
+    }));
+    $expose($state) { return { items: $state } }
+    $load(items) { return this.$$receive(items) }
+  }
+
+  it('has event-handler methods (that start with $) provided by Connector', function() {
+    const store = createStore(TestConnector.$reducer);
+    const wrapper = mount(<TestConnector store={store} />);
+    wrapper.find('.connection').simulate('click');
+    expect(store.getState()).toEqual([1, 2, 3]);
+  });
+});