Renamed provide to provider and added some tests

Author: wbuchwalter

examples/counter/index.js

@@ -3,13 +3,13 @@ import {bind} from 'angular2/di';
 import {createStore, applyMiddleware} from 'redux';
 import thunk from 'redux-thunk';
 import {App} from './containers/App';
-import {provide} from  'ng2-redux';
+import {provider} from  'ng2-redux';
 import {rootReducer} from './reducers';
 
 const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
 const store = createStoreWithMiddleware(rootReducer);
 
 bootstrap(
   App,
-  [provide(store)]
+  [provider(store)]
   );

examples/counter/package.json

@@ -28,7 +28,7 @@
   "homepage": "https://github.com/gaearon/redux#readme",
   "dependencies": {
     "angular2": "2.0.0-alpha.30",
-    "ng2-redux": "0.0.1",
+    "ng2-redux": "2.0.0-alpha",
     "react": "^0.13.3",
     "redux": "^1.0.0-rc",
     "reflect-metadata": "^0.1.0",

package.json

@@ -27,6 +27,7 @@
     "babel-loader": "^5.3.2",
     "expect": "^1.8.0",
     "mocha": "^2.2.5",
+    "sinon": "^1.16.1",
     "webpack": "^1.10.5"
   },
   "peerDependencies": {

src/connector.js src/components/connector.jssrc/connector.js renamed to src/components/connector.js

@@ -1,5 +1,5 @@
-import shallowEqual from './utils/shallowEqual';
-import wrapActionCreators from './utils/wrapActionCreators';
+import shallowEqual from '../utils/shallowEqual';
+import wrapActionCreators from '../utils/wrapActionCreators';
 import invariant from 'invariant';
 import _ from 'lodash';
 

src/components/provider.js

@@ -0,0 +1,32 @@
+import Connector from './connector';
+import {bind, Injector} from 'angular2/di';
+let redux = require('redux');
+
+export function provider(store) {
+  const _connector = new Connector(store);
+
+  return bind('ngRedux').toFactory(() => {
+    return { connect: _connector.connect, ...store};
+  });
+}
+
+
+/*
+ const createStoreWithMiddleware = applyInjectableMiddleware(thunk, 'promise')(createStore);
+*/
+/*
+export function applyInjectableMiddleware(middlewares) {
+    const injector = new Injector();
+    let resolvedMiddlewares = [];
+    _.forEach(middlewares, middleware => {
+        _.isString(middleware)
+            ? resolvedMiddlewares.push(Injector.resolve(middleware))
+            : resolvedMiddlewares.push(middleware)
+    });
+
+    return redux.applyMiddleware(...resolvedMiddlewares);
+}
+*/
+
+
+

src/index.js

@@ -1,32 +1 @@
-import Connector from './connector';
-import {bind, Injector} from 'angular2/di';
-let redux = require('redux');
-
-export function provide(store) {
-  const _connector = new Connector(store);
-
-  return bind('ngRedux').toFactory(() => {
-    return { connect: _connector.connect, ...store};
-  });
-}
-
-
-/*
- const createStoreWithMiddleware = applyInjectableMiddleware(thunk, 'promise')(createStore);
-*/
-/*
-export function applyInjectableMiddleware(middlewares) {
-    const injector = new Injector();
-    let resolvedMiddlewares = [];
-    _.forEach(middlewares, middleware => {
-        _.isString(middleware)
-            ? resolvedMiddlewares.push(Injector.resolve(middleware))
-            : resolvedMiddlewares.push(middleware)
-    });
-
-    return redux.applyMiddleware(...resolvedMiddlewares);
-}
-*/
-
-
-
+export {provider} from './components/provider';

test/components/connector.spec.js

@@ -0,0 +1,97 @@
+import expect from 'expect';
+let sinon = require('sinon');
+import { createStore } from 'redux';
+import Connector from '../../src/components/connector';
+import _ from 'lodash';
+
+describe('Connector', () => {
+  let store;
+  let connector;
+  let targetObj;
+  let defaultState;
+
+  beforeEach(() => {
+    defaultState = {
+      foo: 'bar',
+      baz: -1
+    };
+    store = createStore((state = defaultState, action) => {
+      return {...state, baz: action.payload};
+    });
+    targetObj = {};
+    connector = new Connector(store);
+  });
+
+	it('Should throw when target is not a Function or a plain object', () => {
+	  expect(connector.connect(() => ({})).bind(connector, 15)).toThrow();
+    expect(connector.connect(() => ({})).bind(connector, undefined)).toThrow();
+    expect(connector.connect(() => ({})).bind(connector, 'test')).toThrow();
+
+    expect(connector.connect(() => ({})).bind(connector, {})).toNotThrow();
+    expect(connector.connect(() => ({})).bind(connector, () => {})).toNotThrow();
+
+	});
+
+  it('Should throw when selector does not return a plain object', () => {
+    expect(connector.connect.bind(connector, state => state.foo)).toThrow();
+  });
+
+  it('Should extend target (Object) with selected state once directly after creation', () => {
+     connector.connect(
+      () => ({
+        vm: { test: 1 }
+      }))(targetObj);
+
+    expect(targetObj.vm).toEqual({ test: 1 });
+  });
+
+  it('Should update the target (Object) passed to connect when the store updates', () => {
+    connector.connect(state => state)(targetObj);
+    store.dispatch({ type: 'ACTION', payload: 0 });
+    expect(targetObj.baz).toBe(0);
+    store.dispatch({ type: 'ACTION', payload: 7 });
+    expect(targetObj.baz).toBe(7);
+  });
+
+  it('Should prevent unnecessary updates when state does not change (shallowly)', () => {
+    connector.connect(state => state)(targetObj);
+    store.dispatch({ type: 'ACTION', payload: 5 });
+
+    expect(targetObj.baz).toBe(5);
+
+    targetObj.baz = 0;
+
+    //this should not replace our mutation, since the state didn't change 
+    store.dispatch({ type: 'ACTION', payload: 5 });
+
+    expect(targetObj.baz).toBe(0);
+
+  });
+
+  it('Should extend target (object) with actionCreators', () => {
+    connector.connect(() => ({}), { ac1: () => { }, ac2: () => { } })(targetObj);
+    expect(_.isFunction(targetObj.ac1)).toBe(true);
+    expect(_.isFunction(targetObj.ac2)).toBe(true);
+  });
+
+   it('Should return an unsubscribing function', () => {
+    const unsubscribe = connector.connect(state => state)(targetObj);
+    store.dispatch({ type: 'ACTION', payload: 5 });
+
+    expect(targetObj.baz).toBe(5);
+
+    unsubscribe();
+
+    store.dispatch({ type: 'ACTION', payload: 7 });
+
+    expect(targetObj.baz).toBe(5);
+
+  });
+
+  it('Should provide dispatch to mapDispatchToTarget when receiving a Function', () => {
+    let receivedDispatch;
+    connector.connect(() => ({}), dispatch => { receivedDispatch = dispatch })(targetObj);
+    expect(receivedDispatch).toBe(store.dispatch);
+  });
+
+});

test/utils/shallowEqual.spec.js

@@ -0,0 +1,57 @@
+import expect from 'expect';
+import shallowEqual from '../../src/utils/shallowEqual';
+
+describe('Utils', () => {
+  describe('shallowEqual', () => {
+    it('should return true if arguments fields are equal', () => {
+      expect(
+        shallowEqual(
+          { a: 1, b: 2, c: undefined },
+          { a: 1, b: 2, c: undefined }
+        )
+      ).toBe(true);
+
+      expect(
+        shallowEqual(
+          { a: 1, b: 2, c: 3 },
+          { a: 1, b: 2, c: 3 }
+        )
+      ).toBe(true);
+
+      const o = {};
+      expect(
+        shallowEqual(
+          { a: 1, b: 2, c: o },
+          { a: 1, b: 2, c: o }
+        )
+      ).toBe(true);
+    });
+
+    it('should return false if first argument has too many keys', () => {
+      expect(
+        shallowEqual(
+          { a: 1, b: 2, c: 3 },
+          { a: 1, b: 2 }
+        )
+      ).toBe(false);
+    });
+
+    it('should return false if second argument has too many keys', () => {
+      expect(
+        shallowEqual(
+          { a: 1, b: 2 },
+          { a: 1, b: 2, c: 3 }
+        )
+      ).toBe(false);
+    });
+
+    it('should return false if arguments have different keys', () => {
+      expect(
+        shallowEqual(
+          { a: 1, b: 2, c: undefined },
+          { a: 1, bb: 2, c: undefined }
+        )
+      ).toBe(false);
+    });
+  });
+});

test/utils/wrapActionCreators.spec.js

@@ -0,0 +1,31 @@
+import expect from 'expect';
+import wrapActionCreators from '../../src/utils/wrapActionCreators';
+
+describe('Utils', () => {
+  describe('wrapActionCreators', () => {
+    it('should return a function that wraps argument in a call to bindActionCreators', () => {
+
+      function dispatch(action) {
+        return {
+          dispatched: action
+        };
+      }
+
+      const actionResult = {an: 'action'};
+
+      const actionCreators = {
+        action: () => actionResult
+      };
+
+      const wrapped = wrapActionCreators(actionCreators);
+      expect(wrapped).toBeA(Function);
+      expect(() => wrapped(dispatch)).toNotThrow();
+      expect(() => wrapped().action()).toThrow();
+
+      const bound = wrapped(dispatch);
+      expect(bound.action).toNotThrow();
+      expect(bound.action().dispatched).toBe(actionResult);
+
+    });
+  });
+});