Add tests for async transitions

remix-run · Nov 26, 2014 · d16d658 · d16d658
1 parent 91d4380
commit d16d658
Show file tree

Hide file tree

Showing 2 changed files with 173 additions and 4 deletions.
diff --git a/modules/__tests__/Router-test.js b/modules/__tests__/Router-test.js
@@ -12,21 +12,60 @@ var {
   Bar,
   EchoFooProp,
   Foo,
+  Async,
   Nested,
   EchoBarParam,
-  RedirectToFoo
+  RedirectToFoo,
+  RedirectToFooAsync,
+  Abort,
+  AbortAsync
 } = require('./TestHandlers');
 
 describe('Router', function () {
   describe('transitions', function () {
 
     var routes = [
       <Route path="/redirect" handler={RedirectToFoo}/>,
-      <Route path="/foo" handler={Foo}/>
+      <Route path="/redirect-async" handler={RedirectToFooAsync}/>,
+      <Route path="/abort" handler={Abort}/>,
+      <Route path="/abort-async" handler={AbortAsync}/>,
+      <Route path="/foo" handler={Foo}/>,
+      <Route path="/bar" handler={Bar}/>,
+      <Route path="/async" handler={Async}/>
     ];
 
+    describe('transition.wait', function () {
+      it('waits asynchronously in willTransitionTo', function (done) {
+        TestLocation.history = [ '/bar' ];
+
+        var div = document.createElement('div');
+        var steps = [];
+
+        steps.push(function () {
+          expect(div.innerHTML).toMatch(/Bar/);
+          TestLocation.push('/async');
+          expect(div.innerHTML).toMatch(/Bar/);
+
+          setTimeout(function () {
+            expect(div.innerHTML).toMatch(/Async/);
+            done();
+          }, Async.delay + 10);
+        });
+
+        steps.push(function () {
+          expect(div.innerHTML).toMatch(/Async/);
+        });
+
+        Router.run(routes, TestLocation, function (Handler) {
+          React.render(<Handler/>, div, function () {
+            steps.shift()();
+          });
+        });
+      });
+    });
+
     describe('transition.redirect', function () {
-      it('redirects in willTransitionTo', function (done) {
+      it('redirects synchronously in willTransitionTo', function (done) {
         TestLocation.history = [ '/redirect' ];
 
         var div = document.createElement('div');
@@ -38,10 +77,80 @@ describe('Router', function () {
           });
         });
       });
+
+      it('redirects asynchronously in willTransitionTo', function (done) {
+        TestLocation.history = [ '/bar' ];
+
+        var div = document.createElement('div');
+        var steps = [];
+
+        steps.push(function () {
+          expect(div.innerHTML).toMatch(/Bar/);
+          TestLocation.push('/redirect-async');
+          expect(div.innerHTML).toMatch(/Bar/);
+
+          setTimeout(function () {
+            expect(div.innerHTML).toMatch(/Foo/);
+            done();
+          }, RedirectToFooAsync.delay + 10);
+        });
+
+        steps.push(function () {
+          expect(div.innerHTML).toMatch(/Foo/);
+          done();
+        });
+
+        Router.run(routes, TestLocation, function (Handler) {
+          React.render(<Handler/>, div, function () {
+            steps.shift()();
+          });
+        });
+      });
     });
 
     describe('transition.abort', function () {
-      it('aborts in willTransitionTo');
+      it('aborts synchronously in willTransitionTo', function (done) {
+        TestLocation.history = [ '/foo' ];
+
+        var div = document.createElement('div');
+
+        Router.run(routes, TestLocation, function (Handler) {
+          React.render(<Handler/>, div, function () {
+            TestLocation.push('/abort');
+            expect(div.innerHTML).toMatch(/Foo/);
+            expect(TestLocation.getCurrentPath() === 'foo');
+            done();
+          });
+        });
+      });
+
+      it('aborts asynchronously in willTransitionTo', function (done) {
+        TestLocation.history = [ '/bar' ];
+
+        var div = document.createElement('div');
+        var steps = [];
+
+        steps.push(function () {
+          expect(div.innerHTML).toMatch(/Bar/);
+          TestLocation.push('/abort-async');
+          expect(div.innerHTML).toMatch(/Bar/);
+
+          setTimeout(function () {
+            expect(div.innerHTML).toMatch(/Bar/);
+            done();
+          }, AbortAsync.delay + 10);
+        });
+
+        steps.push(function () {
+          expect(div.innerHTML).toMatch(/Bar/);
+        });
+
+        Router.run(routes, TestLocation, function (Handler) {
+          React.render(<Handler/>, div, function () {
+            steps.shift()();
+          });
+        });
+      });
     });
   });
 

diff --git a/modules/__tests__/TestHandlers.js b/modules/__tests__/TestHandlers.js
@@ -1,6 +1,7 @@
 var React = require('react');
 var RouteHandler = require('../components/RouteHandler');
 var State = require('../mixins/State');
+var delay = require('when/delay');
 
 exports.Nested = React.createClass({
   render: function () {
@@ -19,6 +20,20 @@ exports.Foo = React.createClass({
   }
 });
 
+exports.Async = React.createClass({
+  statics: {
+    delay: 10,
+
+    willTransitionTo: function (transition) {
+      transition.wait(delay(this.delay));
+    }
+  },
+
+  render: function () {
+    return <div className="Async">Async</div>
+  }
+});
+
 exports.Bar = React.createClass({
   render: function () {
     return <div className="Bar">Bar</div>
@@ -37,6 +52,51 @@ exports.RedirectToFoo = React.createClass({
   }
 });
 
+exports.RedirectToFooAsync = React.createClass({
+  statics: {
+    delay: 10,
+
+    willTransitionTo: function (transition) {
+      transition.wait(delay(this.delay).then(function () {
+        transition.redirect('/foo');
+      }));
+    }
+  },
+
+  render: function () {
+    return null;
+  }
+});
+
+
+exports.Abort = React.createClass({
+  statics: {
+    willTransitionTo: function (transition) {
+      transition.abort();
+    }
+  },
+
+  render: function () {
+    return null;
+  }
+});
+
+exports.AbortAsync = React.createClass({
+  statics: {
+    delay: 10,
+
+    willTransitionTo: function (transition) {
+      transition.wait(delay(this.delay).then(function () {
+        transition.abort();
+      }));
+    }
+  },
+
+  render: function () {
+    return null;
+  }
+});
+
 exports.EchoFooProp = React.createClass({
   render: function () {
     return <div>{this.props.foo}</div>;