Move to src/utils and fix tests

dist/alt-with-addons.js

@@ -2314,11 +2314,6 @@ module.exports = chromeDebug;
 },{}],28:[function(require,module,exports){
 (function (global){
 "use strict";
-
-var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
-
-var React = _interopRequire((typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null));
-
 /**
  * 'Higher Order Component' that controls the props of a wrapped
  * component via stores.
@@ -2363,17 +2358,13 @@ var React = _interopRequire((typeof window !== "undefined" ? window.React : type
  * A great explanation of the merits of higher order components can be found at
  * http://bit.ly/1abPkrP
  */
-var connectToStores = (function (_connectToStores) {
-  var _connectToStoresWrapper = function connectToStores(_x) {
-    return _connectToStores.apply(this, arguments);
-  };
 
-  _connectToStoresWrapper.toString = function () {
-    return _connectToStores.toString();
-  };
+var React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
+var assign = require("object-assign");
+
+var createClass = React.createClass;
 
-  return _connectToStoresWrapper;
-})(function (Component) {
+function connectToStores(Component) {
 
   // Check for required static methods.
   if (typeof Component.getStores !== "function") {
@@ -2387,50 +2378,44 @@ var connectToStores = (function (_connectToStores) {
   var stores = Component.getStores();
 
   // Wrapper Component.
-  var StoreConnection = connectToStores.createClass({
-
+  var StoreConnection = createClass({
     getInitialState: function getInitialState() {
       return Component.getPropsFromStores(this.props);
     },
 
     componentDidMount: function componentDidMount() {
-      var _this = this;
-
       stores.forEach(function (store) {
-        return store.listen(_this.onChange);
-      });
+        store.listen(this.onChange);
+      }, this);
     },
 
     componentWillUnmount: function componentWillUnmount() {
-      var _this = this;
-
       stores.forEach(function (store) {
-        return store.unlisten(_this.onChange);
-      });
+        store.unlisten(this.onChange);
+      }, this);
     },
 
     onChange: function onChange() {
       this.setState(Component.getPropsFromStores(this.props));
     },
 
     render: function render() {
-      return React.createElement(Component, Object.assign({}, this.props, this.state));
+      return React.createElement(Component, assign({}, this.props, this.state));
     }
-
   });
 
   return StoreConnection;
-});
+}
 
 /**
  * Expose createClass to facilitate testing.
  */
-connectToStores.createClass = React.createClass;
+connectToStores.createClass = createClass;
 
 module.exports = connectToStores;
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}],29:[function(require,module,exports){
+},{"object-assign":10}],29:[function(require,module,exports){
 "use strict";
 /**
  * makeFinalStore(alt: AltInstance): AltStore

src/utils/AltTestingUtils.js

@@ -21,7 +21,11 @@ const AltTestingUtils = {
 
   makeStoreTestable(alt, UnwrappedStore) {
     const StorePrototype = AltTestingUtils.createStoreSpy(alt)
-    class DerivedStore extends UnwrappedStore { }
+    class DerivedStore extends UnwrappedStore {
+      constructor() {
+        super()
+      }
+    }
     assign(DerivedStore.prototype, StorePrototype)
     return new DerivedStore()
   },

test/connect-to-stores-test.js

@@ -0,0 +1,138 @@
+import { jsdom } from 'jsdom'
+import Alt from '../dist/alt-with-runtime'
+import React from 'react/addons'
+import connectToStores from '../utils/connectToStores'
+import { assert } from 'chai'
+
+const { TestUtils } = React.addons
+
+const alt = new Alt()
+
+const testActions = alt.generateActions('updateFoo')
+
+const testStore = alt.createStore(
+  class TestStore {
+    constructor() {
+      this.bindAction(testActions.updateFoo, this.onChangeFoo)
+      this.foo = 'Bar'
+    }
+    onChangeFoo(newValue) {
+      this.foo = newValue
+    }
+  }
+)
+
+export default {
+  'connectToStores wrapper': {
+    beforeEach() {
+      global.document = jsdom('<!doctype html><html><body></body></html>')
+      global.window = global.document.parentWindow
+      global.navigator = global.window.navigator
+      require('react/lib/ExecutionEnvironment').canUseDOM = true
+
+      alt.recycle()
+    },
+
+    afterEach() {
+      delete global.document
+      delete global.window
+      delete global.navigator
+    },
+
+    'missing the static getStores() method should throw'() {
+      const BadComponentOne = React.createClass({
+        render() {
+          return React.createElement('div', null, 'Bad')
+        }
+      })
+
+      assert.throws(() => connectToStores(BadComponentOne), 'expects the wrapped component to have a static getStores() method')
+    },
+
+    'element mounts and unmounts'() {
+      const div = document.createElement('div')
+
+      const LegacyComponent = connectToStores(React.createClass({
+        statics: {
+          getStores() {
+            return [testStore]
+          },
+          getPropsFromStores(props) {
+            return testStore.getState()
+          }
+        },
+        render() {
+          return React.createElement('div', null, `Foo${this.props.delim}${this.props.foo}`)
+        }
+      }))
+
+      React.render(
+        <LegacyComponent />
+      , div)
+
+      React.unmountComponentAtNode(div)
+    },
+
+    'missing the static getPropsFromStores() method should throw'() {
+      const BadComponentTwo = React.createClass({
+        statics: {
+          getStores() {
+            return [testStore]
+          }
+        },
+        render() {
+          return React.createElement('div', null, 'Bad')
+        }
+      })
+
+      assert.throws(() => connectToStores(BadComponentTwo), 'expects the wrapped component to have a static getPropsFromStores() method')
+    },
+
+    'createClass() component can get props from stores'() {
+      const LegacyComponent = React.createClass({
+        statics: {
+          getStores() {
+            return [testStore]
+          },
+          getPropsFromStores(props) {
+            return testStore.getState()
+          }
+        },
+        render() {
+          return React.createElement('div', null, `Foo${this.props.delim}${this.props.foo}`)
+        }
+      })
+
+      const WrappedComponent = connectToStores(LegacyComponent)
+      const element = React.createElement(WrappedComponent, {delim: ': '})
+      const output = React.renderToStaticMarkup(element)
+      assert.include(output, 'Foo: Bar')
+    },
+
+    'ES6 class component responds to store events'() {
+      class ClassComponent extends React.Component {
+        static getStores() {
+          return [testStore]
+        }
+        static getPropsFromStores(props) {
+          return testStore.getState()
+        }
+        render() {
+          return <span foo={this.props.foo} />
+        }
+      }
+
+      const WrappedComponent = connectToStores(ClassComponent)
+
+      const node = TestUtils.renderIntoDocument(
+        <WrappedComponent />
+      )
+
+      testActions.updateFoo('Baz')
+
+      const span = TestUtils.findRenderedDOMComponentWithTag(node, 'span')
+
+      assert(span.props.foo === 'Baz')
+    }
+  }
+}

test/store-listener-component-test.js

@@ -1,9 +1,9 @@
+import { jsdom } from 'jsdom'
 import Alt from '../dist/alt-with-runtime'
 import React from 'react/addons'
 import AltContainer from '../components/AltContainer'
 import withAltContext from '../utils/withAltContext'
 import { assert } from 'chai'
-import { jsdom } from 'jsdom'
 import sinon from 'sinon'
 
 const { TestUtils } = React.addons