[added] onActiveStateChange, onCancelledTransition, onTransitionError Routes props

modules/components/Routes.js

@@ -30,6 +30,36 @@ var NAMED_LOCATIONS = {
   disabled: RefreshLocation // TODO: Remove
 };
 
+/**
+ * The default handler for aborted transitions. Redirects replace
+ * the current URL and all others roll it back.
+ */
+function defaultAbortedTransitionHandler(transition) {
+  var reason = transition.abortReason;
+
+  if (reason instanceof Redirect) {
+    replaceWith(reason.to, reason.params, reason.query);
+  } else {
+    goBack();
+  }
+}
+
+/**
+ * The default handler for active state updates.
+ */
+function defaultActiveStateChangeHandler(state) {
+  ActiveStore.updateState(state);
+}
+
+/**
+ * The default handler for errors that were thrown asynchronously
+ * while transitioning. The default behavior is to re-throw the
+ * error so that it isn't silently swallowed.
+ */
+function defaultTransitionErrorHandler(error) {
+  throw error; // This error probably originated in a transition hook.
+}
+
 /**
  * The <Routes> component configures the route hierarchy and renders the
  * route matching the current location when rendered into a document.
@@ -39,33 +69,10 @@ var NAMED_LOCATIONS = {
 var Routes = React.createClass({
   displayName: 'Routes',
 
-  statics: {
-
-    /**
-     * Handles errors that were thrown asynchronously. By default, the
-     * error is re-thrown so we don't swallow them silently.
-     */
-    handleAsyncError: function (error, route) {
-      throw error; // This error probably originated in a transition hook.
-    },
-
-    /**
-     * Handles aborted transitions. By default, redirects replace the
-     * current URL and all others roll it back.
-     */
-    handleAbortedTransition: function (transition, routes) {
-      var reason = transition.abortReason;
-
-      if (reason instanceof Redirect) {
-        replaceWith(reason.to, reason.params, reason.query);
-      } else {
-        goBack();
-      }
-    }
-
-  },
-
   propTypes: {
+    onAbortedTransition: React.PropTypes.func.isRequired,
+    onActiveStateChange: React.PropTypes.func.isRequired,
+    onTransitionError: React.PropTypes.func.isRequired,
     preserveScrollPosition: React.PropTypes.bool,
     location: function (props, propName, componentName) {
       var location = props[propName];
@@ -77,6 +84,9 @@ var Routes = React.createClass({
 
   getDefaultProps: function () {
     return {
+      onAbortedTransition: defaultAbortedTransitionHandler,
+      onActiveStateChange: defaultActiveStateChangeHandler,
+      onTransitionError: defaultTransitionErrorHandler,
       preserveScrollPosition: false,
       location: HashLocation
     };
@@ -176,9 +186,9 @@ var Routes = React.createClass({
 
     var promise = syncWithTransition(routes, transition).then(function (newState) {
       if (transition.isAborted) {
-        Routes.handleAbortedTransition(transition, routes);
+        routes.props.onAbortedTransition(transition);
       } else if (newState) {
-        ActiveStore.updateState(newState);
+        routes.props.onActiveStateChange(newState);
       }
 
       return transition;
@@ -188,7 +198,7 @@ var Routes = React.createClass({
       promise = promise.then(undefined, function (error) {
         // Use setTimeout to break the promise chain.
         setTimeout(function () {
-          Routes.handleAsyncError(error, routes);
+          routes.props.onTransitionError(error);
         });
       });
     }

specs/Route.spec.js

@@ -1,6 +1,7 @@
 require('./helper');
 var Route = require('../modules/components/Route');
 var Routes = require('../modules/components/Routes');
+var URLStore = require('../modules/stores/URLStore');
 
 var App = React.createClass({
   displayName: 'App',
@@ -9,113 +10,122 @@ var App = React.createClass({
   }
 });
 
-describe('a Route that matches a URL', function () {
-  it('returns an array', function () {
-    var routes = renderComponent(
-      Routes(null,
-        Route({ handler: App },
-          Route({ path: '/a/b/c', handler: App })
-        )
-      )
-    );
-
-    var matches = routes.match('/a/b/c');
-    assert(matches);
-    expect(matches.length).toEqual(2);
-
-    var rootMatch = getRootMatch(matches);
-    expect(rootMatch.params).toEqual({});
+describe('Route', function() {
 
-    removeComponent(routes);
+  afterEach(function() {
+    URLStore.teardown();
+    window.location.hash = '';
   });
 
-  describe('that contains dynamic segments', function () {
-    it('returns an array with the correct params', function () {
+  describe('a Route that matches a URL', function () {
+    it('returns an array', function () {
       var routes = renderComponent(
         Routes(null,
           Route({ handler: App },
-            Route({ path: '/posts/:id/edit', handler: App })
+            Route({ path: '/a/b/c', handler: App })
           )
         )
       );
 
-      var matches = routes.match('/posts/abc/edit');
+      var matches = routes.match('/a/b/c');
       assert(matches);
       expect(matches.length).toEqual(2);
 
       var rootMatch = getRootMatch(matches);
-      expect(rootMatch.params).toEqual({ id: 'abc' });
+      expect(rootMatch.params).toEqual({});
+
+      // this causes tests to fail, no clue why ...
+      //removeComponent(routes);
+    });
+
+    describe('that contains dynamic segments', function () {
+      it('returns an array with the correct params', function () {
+        var routes = renderComponent(
+          Routes(null,
+            Route({ handler: App },
+              Route({ path: '/posts/:id/edit', handler: App })
+            )
+          )
+        );
+
+        var matches = routes.match('/posts/abc/edit');
+        assert(matches);
+        expect(matches.length).toEqual(2);
+
+        var rootMatch = getRootMatch(matches);
+        expect(rootMatch.params).toEqual({ id: 'abc' });
 
-      removeComponent(routes);
+        //removeComponent(routes);
+      });
     });
   });
-});
 
-describe('a Route that does not match the URL', function () {
-  it('returns null', function () {
-    var routes = renderComponent(
-      Routes(null,
-        Route({ handler: App },
-          Route({ path: '/a/b/c', handler: App })
+  describe('a Route that does not match the URL', function () {
+    it('returns null', function () {
+      var routes = renderComponent(
+        Routes(null,
+          Route({ handler: App },
+            Route({ path: '/a/b/c', handler: App })
+          )
         )
-      )
-    );
+      );
 
-    expect(routes.match('/not-found')).toBe(null);
+      expect(routes.match('/not-found')).toBe(null);
 
-    removeComponent(routes);
+      //removeComponent(routes);
+    });
   });
-});
 
-describe('a nested Route that matches the URL', function () {
-  it('returns the appropriate params for each match', function () {
-    var routes = renderComponent(
-      Routes(null,
-        Route({ handler: App },
-          Route({ name: 'posts', path: '/posts/:id', handler: App },
-            Route({ name: 'comment', path: '/posts/:id/comments/:commentId', handler: App })
+  describe('a nested Route that matches the URL', function () {
+    it('returns the appropriate params for each match', function () {
+      var routes = renderComponent(
+        Routes(null,
+          Route({ handler: App },
+            Route({ name: 'posts', path: '/posts/:id', handler: App },
+              Route({ name: 'comment', path: '/posts/:id/comments/:commentId', handler: App })
+            )
           )
         )
-      )
-    );
+      );
 
-    var matches = routes.match('/posts/abc/comments/123');
-    assert(matches);
-    expect(matches.length).toEqual(3);
+      var matches = routes.match('/posts/abc/comments/123');
+      assert(matches);
+      expect(matches.length).toEqual(3);
 
-    var rootMatch = getRootMatch(matches);
-    expect(rootMatch.route.props.name).toEqual('comment');
-    expect(rootMatch.params).toEqual({ id: 'abc', commentId: '123' });
+      var rootMatch = getRootMatch(matches);
+      expect(rootMatch.route.props.name).toEqual('comment');
+      expect(rootMatch.params).toEqual({ id: 'abc', commentId: '123' });
 
-    var postsMatch = matches[1];
-    expect(postsMatch.route.props.name).toEqual('posts');
-    expect(postsMatch.params).toEqual({ id: 'abc' });
+      var postsMatch = matches[1];
+      expect(postsMatch.route.props.name).toEqual('posts');
+      expect(postsMatch.params).toEqual({ id: 'abc' });
 
-    removeComponent(routes);
+      //removeComponent(routes);
+    });
   });
-});
 
-describe('multiple nested Router that match the URL', function () {
-  it('returns the first one in the subtree, depth-first', function () {
-    var routes = renderComponent(
-      Routes(null,
-        Route({ handler: App },
-          Route({ path: '/a', handler: App },
-            Route({ path: '/a/b', name: 'expected', handler: App })
-          ),
-          Route({ path: '/a/b', handler: App })
+  describe('multiple nested Router that match the URL', function () {
+    it('returns the first one in the subtree, depth-first', function () {
+      var routes = renderComponent(
+        Routes(null,
+          Route({ handler: App },
+            Route({ path: '/a', handler: App },
+              Route({ path: '/a/b', name: 'expected', handler: App })
+            ),
+            Route({ path: '/a/b', handler: App })
+          )
         )
-      )
-    );
+      );
 
-    var matches = routes.match('/a/b');
-    assert(matches);
-    expect(matches.length).toEqual(3);
+      var matches = routes.match('/a/b');
+      assert(matches);
+      expect(matches.length).toEqual(3);
 
-    var rootMatch = getRootMatch(matches);
-    expect(rootMatch.route.props.name).toEqual('expected');
+      var rootMatch = getRootMatch(matches);
+      expect(rootMatch.route.props.name).toEqual('expected');
 
-    removeComponent(routes);
+      //removeComponent(routes);
+    });
   });
 });
 

specs/Routes.spec.js

@@ -0,0 +1,90 @@
+require('./helper');
+var URLStore = require('../modules/stores/URLStore');
+var Route = require('../modules/components/Route');
+var Routes = require('../modules/components/Routes');
+
+describe('Routes', function() {
+
+  afterEach(function() {
+    URLStore.teardown();
+    window.location.hash = '';
+  });
+
+  describe('a change in active state', function () {
+    it('triggers onActiveStateChange', function (done) {
+      var App = React.createClass({
+        render: function () {
+          return React.DOM.div();
+        }
+      });
+
+      function handleActiveStateChange(state) {
+        assert(state);
+        removeComponent(routes);
+        done();
+      }
+
+      var routes = renderComponent(
+        Routes({ onActiveStateChange: handleActiveStateChange },
+          Route({ handler: App })
+        )
+      );
+    });
+  });
+
+  describe('a cancelled transition', function () {
+    it('triggers onCancelledTransition', function (done) {
+      var App = React.createClass({
+        statics: {
+          willTransitionTo: function (transition) {
+            transition.abort();
+          }
+        },
+        render: function () {
+          return React.DOM.div();
+        }
+      });
+
+      function handleCancelledTransition(transition) {
+        assert(transition);
+        removeComponent(routes);
+        done();
+      }
+
+      var routes = renderComponent(
+        Routes({ onCancelledTransition: handleCancelledTransition },
+          Route({ handler: App })
+        )
+      );
+    });
+  });
+
+  describe('an error in a transition hook', function () {
+    it('triggers onTransitionError', function (done) {
+      var App = React.createClass({
+        statics: {
+          willTransitionTo: function (transition) {
+            throw new Error('boom!');
+          }
+        },
+        render: function () {
+          return React.DOM.div();
+        }
+      });
+
+      function handleTransitionError(error) {
+        assert(error);
+        expect(error.message).toEqual('boom!');
+        removeComponent(routes);
+        done();
+      }
+
+      var routes = renderComponent(
+        Routes({ onTransitionError: handleTransitionError },
+          Route({ handler: App })
+        )
+      );
+    });
+  });
+
+});