Use mock location to test Backbone.history.

Author: braddunbar

backbone.js

@@ -954,9 +954,10 @@
 
   // Handles cross-browser history management, based on URL fragments. If the
   // browser does not support `onhashchange`, falls back to polling.
-  var History = Backbone.History = function() {
+  var History = Backbone.History = function(options) {
     this.handlers = [];
     _.bindAll(this, 'checkUrl');
+    this.location = options && options.location || root.location;
   };
 
   // Cached regex for cleaning leading hashes and slashes .
@@ -977,9 +978,8 @@
 
     // Gets the true hash value. Cannot use location.hash directly due to bug
     // in Firefox where location.hash will always be decoded.
-    getHash: function(windowOverride) {
-      var loc = windowOverride ? windowOverride.location : window.location;
-      var match = loc.href.match(/#(.*)$/);
+    getHash: function(window) {
+      var match = (window || this).location.href.match(/#(.*)$/);
       return match ? match[1] : '';
     },
 
@@ -988,7 +988,7 @@
     getFragment: function(fragment, forcePushState) {
       if (fragment == null) {
         if (this._hasPushState || !this._wantsHashChange || forcePushState) {
-          fragment = window.location.pathname;
+          fragment = this.location.pathname;
         } else {
           fragment = this.getHash();
         }
@@ -1031,14 +1031,14 @@
       // Determine if we need to change the base url, for a pushState link
       // opened by a non-pushState browser.
       this.fragment = fragment;
-      var loc = window.location;
+      var loc = this.location;
       var atRoot  = (loc.pathname == this.options.root) && !loc.search;
 
       // If we've started off with a route from a `pushState`-enabled browser,
       // but we're currently in a browser that doesn't support it...
       if (this._wantsHashChange && this._wantsPushState && !this._hasPushState && !atRoot) {
         this.fragment = this.getFragment(null, true);
-        window.location.replace(this.options.root + window.location.search + '#' + this.fragment);
+        this.location.replace(this.options.root + this.location.search + '#' + this.fragment);
         // Return immediately as browser will do redirect to new url
         return true;
 
@@ -1072,7 +1072,9 @@
     // calls `loadUrl`, normalizing across the hidden iframe.
     checkUrl: function(e) {
       var current = this.getFragment();
-      if (current == this.fragment && this.iframe) current = this.getFragment(this.getHash(this.iframe));
+      if (current == this.fragment && this.iframe) {
+        current = this.getFragment(this.getHash(this.iframe));
+      }
       if (current == this.fragment) return false;
       if (this.iframe) this.navigate(current);
       this.loadUrl() || this.loadUrl(this.getHash());
@@ -1115,7 +1117,7 @@
       // fragment to store history.
       } else if (this._wantsHashChange) {
         this.fragment = frag;
-        this._updateHash(window.location, frag, options.replace);
+        this._updateHash(this.location, frag, options.replace);
         if (this.iframe && (frag != this.getFragment(this.getHash(this.iframe)))) {
           // Opening and closing the iframe tricks IE7 and earlier to push a history entry on hash-tag change.
           // When replace is true, we don't want this.
@@ -1126,7 +1128,7 @@
       // If you've told us that you explicitly don't want fallback hashchange-
       // based history, then `navigate` becomes a page refresh.
       } else {
-        return window.location.assign(fullFrag);
+        return this.location.assign(fullFrag);
       }
       if (options.trigger) this.loadUrl(fragment);
     },
@@ -1135,7 +1137,7 @@
     // a new one to the browser history.
     _updateHash: function(location, fragment, replace) {
       if (replace) {
-        location.replace(location.toString().replace(/(javascript:|#).*$/, '') + '#' + fragment);
+        location.replace(location.href.replace(/(javascript:|#).*$/, '') + '#' + fragment);
       } else {
         location.hash = fragment;
       }

index.html

@@ -3805,7 +3805,7 @@ <h2 id="changelog">Change Log</h2>
 
   </div>
 
-  <script src="test/vendor/underscore-1.3.1.js"></script>
+  <script src="test/vendor/underscore.js"></script>
   <script src="test/vendor/jquery-1.7.1.js"></script>
   <script src="test/vendor/json2.js"></script>
   <script src="backbone.js"></script>

test/router.js

@@ -1,6 +1,7 @@
 $(document).ready(function() {
 
   var router = null;
+  var location = null;
   var lastRoute = null;
   var lastArgs = [];
 
@@ -9,10 +10,33 @@ $(document).ready(function() {
     lastArgs = args;
   }
 
+  var Location = function(href) {
+    this.replace(href);
+  };
+
+  _.extend(Location.prototype, {
+
+    replace: function(href) {
+      _.extend(this, _.pick($('<a></a>', {href: href})[0],
+        'href',
+        'hash',
+        'search',
+        'fragment',
+        'pathname'
+      ));
+    },
+
+    toString: function() {
+      return this.href;
+    }
+
+  });
+
   module("Backbone.Router", {
 
     setup: function() {
-      Backbone.history = null;
+      location = new Location('http://example.com');
+      Backbone.history = new Backbone.History({location: location});
       router = new Router({testing: 101});
       Backbone.history.interval = 9;
       Backbone.history.start({pushState: false});
@@ -101,24 +125,20 @@ $(document).ready(function() {
     equal(router.testing, 101);
   });
 
-  asyncTest("Router: routes (simple)", 4, function() {
-    window.location.hash = 'search/news';
-    setTimeout(function() {
-      equal(router.query, 'news');
-      equal(router.page, undefined);
-      equal(lastRoute, 'search');
-      equal(lastArgs[0], 'news');
-      start();
-    }, 10);
+  test("Router: routes (simple)", 4, function() {
+    location.replace('http://example.com#search/news');
+    Backbone.history.checkUrl();
+    equal(router.query, 'news');
+    equal(router.page, undefined);
+    equal(lastRoute, 'search');
+    equal(lastArgs[0], 'news');
   });
 
-  asyncTest("Router: routes (two part)", 2, function() {
-    window.location.hash = 'search/nyc/p10';
-    setTimeout(function() {
-      equal(router.query, 'nyc');
-      equal(router.page, '10');
-      start();
-    }, 10);
+  test("Router: routes (two part)", 2, function() {
+    location.replace('http://example.com#search/nyc/p10');
+    Backbone.history.checkUrl();
+    equal(router.query, 'nyc');
+    equal(router.page, '10');
   });
 
   test("Router: routes via navigate", 2, function() {
@@ -145,22 +165,12 @@ $(document).ready(function() {
     });
   });
 
-  test("Router: doesn't fire routes to the same place twice", 6, function() {
-    equal(router.count, 0);
-    router.navigate('counter', {trigger: true});
-    equal(router.count, 1);
-    router.navigate('/counter', {trigger: true});
-    router.navigate('/counter', {trigger: true});
-    equal(router.count, 1);
-    router.navigate('search/counter', {trigger: true});
-    router.navigate('counter', {trigger: true});
-    equal(router.count, 2);
-    Backbone.history.stop();
-    router.navigate('search/counter', {trigger: true});
-    router.navigate('counter', {trigger: true});
-    equal(router.count, 2);
-    Backbone.history.start();
-    equal(router.count, 3);
+  test("loadUrl is not called for identical routes.", 0, function() {
+    Backbone.history.loadUrl = function(){ ok(false); };
+    location.replace('http://example.com#route');
+    Backbone.history.navigate('route');
+    Backbone.history.navigate('/route');
+    Backbone.history.navigate('/route');
   });
 
   test("Router: use implicit callback if none provided", 1, function() {
@@ -169,73 +179,49 @@ $(document).ready(function() {
     equal(router.count, 1);
   });
 
-  asyncTest("Router: routes via navigate with {replace: true}", 2, function() {
-    var historyLength = window.history.length;
-    router.navigate('search/manhattan/start_here');
-    router.navigate('search/manhattan/then_here');
-    router.navigate('search/manhattan/finally_here', {replace: true});
-
-    equal(window.location.hash, "#search/manhattan/finally_here");
-    window.history.go(-1);
-    setTimeout(function() {
-      equal(window.location.hash, "#search/manhattan/start_here");
-      start();
-    }, 500);
+  test("Router: routes via navigate with {replace: true}", 1, function() {
+    location.replace('http://example.com#start_here');
+    Backbone.history.checkUrl();
+    location.replace = function(href) {
+      strictEqual(href, new Location('http://example.com#end_here').href);
+    };
+    Backbone.history.navigate('end_here', {replace: true});
   });
 
-  asyncTest("Router: routes (splats)", 1, function() {
-    window.location.hash = 'splat/long-list/of/splatted_99args/end';
-    setTimeout(function() {
-      equal(router.args, 'long-list/of/splatted_99args');
-      start();
-    }, 10);
+  test("Router: routes (splats)", 1, function() {
+    location.replace('http://example.com#splat/long-list/of/splatted_99args/end');
+    Backbone.history.checkUrl();
+    equal(router.args, 'long-list/of/splatted_99args');
   });
 
-  asyncTest("Router: routes (complex)", 3, function() {
-    window.location.hash = 'one/two/three/complex-part/four/five/six/seven';
-    setTimeout(function() {
-      equal(router.first, 'one/two/three');
-      equal(router.part, 'part');
-      equal(router.rest, 'four/five/six/seven');
-      start();
-    }, 10);
+  test("Router: routes (complex)", 3, function() {
+    location.replace('http://example.com#one/two/three/complex-part/four/five/six/seven');
+    Backbone.history.checkUrl();
+    equal(router.first, 'one/two/three');
+    equal(router.part, 'part');
+    equal(router.rest, 'four/five/six/seven');
   });
 
-  asyncTest("Router: routes (query)", 5, function() {
-    window.location.hash = 'mandel?a=b&c=d';
-    setTimeout(function() {
-      equal(router.entity, 'mandel');
-      equal(router.queryArgs, 'a=b&c=d');
-      equal(lastRoute, 'query');
-      equal(lastArgs[0], 'mandel');
-      equal(lastArgs[1], 'a=b&c=d');
-      start();
-    }, 10);
+  test("Router: routes (query)", 5, function() {
+    location.replace('http://example.com#mandel?a=b&c=d');
+    Backbone.history.checkUrl();
+    equal(router.entity, 'mandel');
+    equal(router.queryArgs, 'a=b&c=d');
+    equal(lastRoute, 'query');
+    equal(lastArgs[0], 'mandel');
+    equal(lastArgs[1], 'a=b&c=d');
   });
 
-  asyncTest("Router: routes (anything)", 1, function() {
-    window.location.hash = 'doesnt-match-a-route';
-    setTimeout(function() {
-      equal(router.anything, 'doesnt-match-a-route');
-      start();
-      window.location.hash = '';
-    }, 10);
+  test("Router: routes (anything)", 1, function() {
+    location.replace('http://example.com#doesnt-match-a-route');
+    Backbone.history.checkUrl();
+    equal(router.anything, 'doesnt-match-a-route');
   });
 
-  asyncTest("Router: fires event when router doesn't have callback on it", 1, function() {
-    try{
-      var callbackFired = false;
-      var myCallback = function(){ callbackFired = true; };
-      router.on("route:noCallback", myCallback);
-      window.location.hash = "noCallback";
-      setTimeout(function(){
-        equal(callbackFired, true);
-        start();
-        window.location.hash = '';
-      }, 10);
-    } catch (err) {
-      ok(false, "an exception was thrown trying to fire the router event with no router handler callback");
-    }
+  test("Router: fires event when router doesn't have callback on it", 1, function() {
+    router.on("route:noCallback", function(){ ok(true); });
+    location.replace('http://example.com#noCallback');
+    Backbone.history.checkUrl();
   });
 
   test("#933, #908 - leading slash", 2, function() {
@@ -265,17 +251,14 @@ $(document).ready(function() {
     equal(router.rest, 'has%20space');
   });
 
-  asyncTest("Router: correctly handles URLs with % (#868)", 3, function() {
-    window.location.hash = 'search/fat%3A1.5%25';
-    setTimeout(function() {
-      window.location.hash = 'search/fat';
-      setTimeout(function() {
-          equal(router.query, 'fat');
-          equal(router.page, undefined);
-          equal(lastRoute, 'search');
-          start();
-        }, 50);
-    }, 50);
+  test("Router: correctly handles URLs with % (#868)", 3, function() {
+    location.replace('http://example.com#search/fat%3A1.5%25');
+    Backbone.history.checkUrl();
+    location.replace('http://example.com#search/fat');
+    Backbone.history.checkUrl();
+    equal(router.query, 'fat');
+    equal(router.page, undefined);
+    equal(lastRoute, 'search');
   });
 
 });

test/test-ender.html

@@ -7,7 +7,7 @@
   <script type="text/javascript" src="vendor/ender-jeesh.js"></script>
   <script type="text/javascript" src="vendor/qunit.js"></script>
   <script type="text/javascript" src="vendor/jslitmus.js"></script>
-  <script type="text/javascript" src="vendor/underscore-1.3.1.js"></script>
+  <script type="text/javascript" src="vendor/underscore.js"></script>
   <script type="text/javascript" src="../backbone.js"></script>
 
   <script type="text/javascript" src="events.js"></script>

test/test-zepto.html

@@ -7,7 +7,7 @@
   <script type="text/javascript" src="vendor/zepto-0.6.js"></script>
   <script type="text/javascript" src="vendor/qunit.js"></script>
   <script type="text/javascript" src="vendor/jslitmus.js"></script>
-  <script type="text/javascript" src="vendor/underscore-1.3.1.js"></script>
+  <script type="text/javascript" src="vendor/underscore.js"></script>
   <script type="text/javascript" src="../backbone.js"></script>
 
   <script type="text/javascript" src="events.js"></script>

test/test.html

@@ -8,7 +8,7 @@
   <script src="vendor/jquery-1.7.1.js"></script>
   <script src="vendor/qunit.js"></script>
   <script src="vendor/jslitmus.js"></script>
-  <script src="vendor/underscore-1.3.1.js"></script>
+  <script src="vendor/underscore.js"></script>
   <script src="../backbone.js"></script>
 
   <script src="noconflict.js"></script>