Add tests, remove examples

Author: andreypopp

.jshintrc

@@ -13,7 +13,6 @@
     "exports": false,
     "console": false,
     "document": false,
-    "setTimeout": false,
-    "__callback": false
+    "setTimeout": false
   }
 }

.zuul.yml

@@ -0,0 +1,14 @@
+ui: mocha-bdd
+browsers:
+  - name: chrome
+    version: 27..latest
+  - name: ie
+    version: 10..latest
+  - name: safari
+    version: latest
+  - name: firefox
+    version: 24..latest
+  - name: iphone
+    version: 6..latest
+  - name: ipad
+    version: 6..latest

Makefile

@@ -6,10 +6,13 @@ install link:
 	@npm $@
 
 lint:
-	@$(BIN)/jshint *.js
+	@$(BIN)/jshint index.js
 
 test:
-	@$(BIN)/mocha -b -R spec specs/*.js
+	@echo 'nothing' > /dev/null
+
+test-cloud:
+	@$(BIN)/zuul -- tests.js
 
 release-patch: test lint
 	@$(call release,patch)

examples/example.js

@@ -5,6 +5,12 @@ var pattern   = require('url-pattern');
 
 function createRouter(component) {
   return React.createClass({
+
+    navigate: function(path, cb) {
+      window.history.pushState({}, '', path);
+      this.setState({path: window.location.pathname}, cb);
+    },
+
     getInitialState: function() {
       return {
         path: this.props.path || window.location.pathname
@@ -20,16 +26,21 @@ function createRouter(component) {
     },
 
     onPopState: function(e) {
-      e.preventDefault();
-      this.setState({location: window.location.pathname});
+      var path = window.location.pathname;
+
+      if (this.state.path !== path) {
+        this.setState({path: path});
+      }
     },
 
     render: function() {
       var match, page, notFound;
       var len, i;
 
-      for (i = 0, len = this.props.children.length; i < len; i++) {
-        var current = this.props.children[i];
+      this.children = this.children || this.props.children;
+
+      for (i = 0, len = this.children.length; i < len; i++) {
+        var current = this.children[i];
 
         if (process.env.NODE_ENV !== "production") {
           invariant(
@@ -55,7 +66,7 @@ function createRouter(component) {
                      notFound ? notFound.children :
                      [];
 
-      return component(this.props, children(this.state, match));
+      return this.transferPropsTo(component(null, children(match)));
     }
   });
 }

examples/example.jsx

@@ -10,7 +10,8 @@
     "react": "~0.8.0",
     "semver": "~2.2.1",
     "mocha": "~1.17.1",
-    "jshint": "~2.4.3"
+    "jshint": "~2.4.3",
+    "zuul": "~1.5.2"
   },
   "scripts": {
     "test": "make test"

index.js

@@ -0,0 +1,62 @@
+var assert = require('assert');
+var React  = require('react');
+var Router = require('./index');
+
+var App = React.createClass({
+
+  render: function() {
+    return Router.Locations({ref: 'router'},
+      Router.Location({path: '/__zuul'}, function(props) { return 'mainpage' }),
+      Router.Location({path: '/__zuul/:slug'}, function(props) { return props.slug })
+    );
+  }
+});
+
+function getText(node) {
+  return node.textContent || node.innerText;
+}
+
+describe('react-router-component', function() {
+
+  var host, app, router;
+
+  beforeEach(function() {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    app = React.renderComponent(App(), host);
+    router = app.refs.router;
+  });
+
+  afterEach(function() {
+    React.unmountComponentAtNode(host);
+    document.body.removeChild(host);
+    host = null;
+    app = null;
+    router = null
+  });
+
+  it('renders', function() {
+    assert.equal(getText(host), 'mainpage');
+  });
+
+  it('navigates to a different route', function(done) {
+    assert.equal(getText(host), 'mainpage');
+    router.navigate('/__zuul/hello', function() {
+      assert.equal(getText(host), 'hello');
+      history.back();
+      setTimeout(done, 200);
+    });
+  });
+
+  it('handles "popstate" event', function(done) {
+    assert.equal(getText(host), 'mainpage');
+    router.navigate('/__zuul/hello', function() {
+      assert.equal(getText(host), 'hello');
+      history.back();
+      setTimeout(function() {
+        assert.equal(getText(host), 'mainpage');
+        done();
+      }, 200);
+    });
+  });
+});