refactor(*): debug failing router tests

package.json

@@ -28,7 +28,8 @@
     "webpack": "^1.12.14"
   },
   "scripts": {
-    "start": "rm -rf tmp && rm -rf dist && node scripts/copy_files.js && webpack"
+    "clean": "rm -rf tmp && rm -rf dist",
+    "start": "node scripts/copy_files.js && webpack"
   },
   "author": "Angular Core Team",
   "license": "MIT"

shims/angular2/src/facade/async.js

@@ -1,27 +1,44 @@
-exports.PromiseWrapper = {
-  // This is going to be monkey patched from inside
-  // the routerFactory closure, because the implementation
-  // will need access to $q
+var PromiseWrapper = {
+    resolve: function (reason) {
+      return PromiseWrapper.$q.when(reason);
+    },
+
+    reject: function (reason) {
+      return PromiseWrapper.$q.reject(reason);
+    },
+
+    catchError: function (promise, fn) {
+      return promise.then(null, fn);
+    },
+    all: function (promises) {
+      return PromiseWrapper.$q.all(promises);
+    }
 };
 
-exports.EventEmitter = function EventEmitter() {
+function EventEmitter() {
   //TODO: implement?
   // I think it's too heavy to ask 1.x users to bring in Rx for the router...
-};
+}
 
-exports.ObservableWrapper = {
+var ObservableWrapper = {
   callNext: function(ob, val) {
     ob.fn(val);
   },
   callEmit: function(ob, val) {
     ob.fn(val);
   },
   callError: function(ob, val) {
-    ob.errorFn && ob.errorFn(val);
+    if (ob.errorFn) ob.errorFn(val);
   },
 
   subscribe: function(ob, fn, errorFn) {
     ob.fn = fn;
     ob.errorFn = errorFn;
   }
+};
+
+module.exports = {
+  PromiseWrapper: PromiseWrapper,
+  EventEmitter: EventEmitter,
+  ObservableWrapper: ObservableWrapper
 };

shims/angular2/src/facade/collection.js

@@ -29,7 +29,8 @@ exports.StringMapWrapper = {
   },
 
   set: function (m, k, v) {
-    return m[k] = v;
+    m[k] = v;
+    return this;
   },
 
   get: function (m, k) {
@@ -82,13 +83,14 @@ exports.StringMapWrapper = {
   },
 
   merge: function(m1, m2) {
+    var attr;
     var m = {};
-    for (var attr in m1) {
+    for (attr in m1) {
       if (m1.hasOwnProperty(attr)) {
         m[attr] = m1[attr];
       }
     }
-    for (var attr in m2) {
+    for (attr in m2) {
       if (m2.hasOwnProperty(attr)) {
         m[attr] = m2[attr];
       }
@@ -155,7 +157,7 @@ exports.ListWrapper = {
   },
 
   maximum: function(list, predicate) {
-    if (list.length == 0) {
+    if (list.length === 0) {
       return null;
     }
     var solution = null;

src/ngComponentRouter.js

@@ -3,6 +3,7 @@ var ngLinkDirective = require('./ngLink');
 
 var exceptions = require('angular2/src/facade/exceptions');
 var BaseException = exceptions.BaseException;
+
 var lang = require('angular2/src/facade/lang');
 var isString = lang.isString;
 var isPresent = lang.isPresent;
@@ -39,45 +40,17 @@ function $locationHashPrefixProvider($locationProvider) {
       hashPrefix = prefix;
     }
     return hashPrefixFn(prefix);
-  }
+  };
 
   // Return the final hashPrefix as the value of this service
   this.$get = function() { return hashPrefix; };
 }
 
 function routerFactory($q, $location, $browser, $rootScope, $injector, $routerRootComponent, $locationHashPrefix) {
 
-  function getAnnotation(componentName, annotationName) {
-    var serviceName = componentName + 'Directive';
-    if ($injector.has(serviceName)) {
-      var definitions = $injector.get(serviceName);
-      if (definitions.length > 1) {
-        throw new BaseException('too many directives named "' + componentName + '"');
-      }
-      return definitions[0][annotationName];
-    } else {
-      throw new BaseException('directive "' + componentName + '" is not registered');
-    }
-  }
-
   // Monkey-patch promises to have access to the $q service
-  var async = require('angular2/src/facade/async');
-  async.PromiseWrapper = {
-    resolve: function (reason) {
-      return $q.when(reason);
-    },
-
-    reject: function (reason) {
-      return $q.reject(reason);
-    },
-
-    catchError: function (promise, fn) {
-      return promise.then(null, fn);
-    },
-    all: function (promises) {
-      return $q.all(promises);
-    }
-  };
+  var PromiseWrapper = require('angular2/src/facade/async').PromiseWrapper;
+  PromiseWrapper.$q = $q;
 
   // Monkey-patch assertions about the type of the "component" property in a route config
   var routeConfigNormalizer = require('./router/route_config/route_config_normalizer');
@@ -95,18 +68,33 @@ function routerFactory($q, $location, $browser, $rootScope, $injector, $routerRo
     };
   };
 
-  var Location = require('./router/location/location').Location;
-  var location = new Location($location, $rootScope);
-
+  // Create the top level router, and its associated registry of router rules
   var routeRegistryFactory = require('./router/route_registry_factory');
   var registry = routeRegistryFactory(getAnnotation, $routerRootComponent);
-
+  var Location = require('./router/location/location').Location;
   var RootRouter = require('./router/router').RootRouter;
-  var router = new RootRouter(registry, location, $routerRootComponent);
+  var router = new RootRouter(registry, new Location($location, $rootScope), $routerRootComponent);
 
-  router.subscribe(function () {
-    $rootScope.$broadcast('$routeChangeSuccess', {});
+  router.subscribe(function (change) {
+    console.log('xxx');
+    $rootScope.$broadcast('$routeChangeSuccess', change);
   });
 
   return router;
+
+
+
+  function getAnnotation(componentName, annotationName) {
+    var serviceName = componentName + 'Directive';
+    if ($injector.has(serviceName)) {
+      var definitions = $injector.get(serviceName);
+      if (definitions.length > 1) {
+        throw new BaseException('too many directives named "' + componentName + '"');
+      }
+      return definitions[0][annotationName];
+    } else {
+      throw new BaseException('directive "' + componentName + '" is not registered');
+    }
+  }
+
 }

src/ngLink.js

@@ -56,11 +56,13 @@ module.exports = function ngLinkDirective($rootRouter, $parse) {
       var params = routeParamsGetter();
       element.attr('href', getLink(params));
     } else {
-      scope.$watch(() => routeParamsGetter(scope), params => element.attr('href', getLink(params)),
-                   true);
+      scope.$watch(
+        function() { return routeParamsGetter(scope); },
+        function(params) { return element.attr('href', getLink(params)); },
+        true);
     }
 
-    element.on('click', event => {
+    element.on('click', function(event) {
       if (event.which !== 1 || !navigationInstruction) {
         return;
       }

src/ngOutlet.js

@@ -18,7 +18,7 @@ function createOutlet($q, $animate) {
     }
     if (this.currentElement) {
       this.previousLeaveAnimation = $animate.leave(this.currentElement);
-      this.previousLeaveAnimation.then(function () { return _this.previousLeaveAnimation = null; });
+      this.previousLeaveAnimation.then(function () { _this.previousLeaveAnimation = null; });
       this.currentElement = null;
     }
   };
@@ -120,7 +120,8 @@ exports.ngOutletDirective = function($animate, $q, $rootRouter) {
     controller: function() {},
     controllerAs: '$$ngOutlet'
   };
-}
+};
+
 /**
  * This directive is responsible for compiling the contents of ng-outlet
  */

src/router/lifecycle/route_lifecycle_reflector.js

@@ -11,5 +11,6 @@ function getCanActivateHook(directiveName) {
   // This is going to be monkey patched from inside
   // the routerFactory closure, because the implementation
   // will need access to $injector
-};
+}
+
 exports.getCanActivateHook = getCanActivateHook;

src/router/location/location.js

@@ -21,8 +21,9 @@ function Location($location, $rootScope){
     return $location.url(path + query);
   };
 
-  $rootScope.$watch(function () { return $location.url(); }, function (url) {
-    onNextHandlers.forEach(function(handler) { handler({'url': url }); });
+  $rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl, newState, oldState) {
+    console.log('$location.url changing', newUrl, oldUrl, $location.url());
+    onNextHandlers.forEach(function(handler) { handler({url: $location.url()}); });
   });
 }
 

test/integration/router_spec.js

@@ -2,60 +2,72 @@
 
 fdescribe('router', function () {
 
-  var elt, testMod;
-  beforeEach(function () {
-    testMod = angular.module('testMod', ['ngComponentRouter'])
+  function createTestModule() {
+    var mod = angular.module('testMod', ['ngComponentRouter'])
       .value('$routerRootComponent', 'app');
-  });
+    module('testMod');
+    return mod;
+  }
 
-  it('should work with a provided root component', function() {
+  fit('should work with a provided root component', function() {
+    console.log(1);
+    createTestModule()
+      .component('homeCmp', {template: 'Home'})
+      .component('otherCmp', {template: 'Other'})
+      .component('app', {
+        template: '<div ng-outlet></div>',
+        $routeConfig: [
+          { path: '/home', component: 'homeCmp' },
+          { path: '/other', component: 'otherCmp' }
+        ]
+      });
+
+    var elt = compileApp();
 
-    registerComponent('homeCmp', {
-      template: 'Home'
-    });
+    inject(function($location, $rootScope) {
+      $location.path('/home');
+      $rootScope.$digest();
+      expect(elt.text()).toBe('Home');
 
-    registerComponent('app', {
-      template: '<div ng-outlet></div>',
-      $routeConfig: [
-        { path: '/', component: 'homeCmp' }
-      ]
-    });
+      $location.path('/');
+      $rootScope.$digest();
 
-    module('testMod');
-    compileApp();
+      $location.path('/other');
+      $rootScope.$digest();
+      expect(elt.text()).toBe('Other');
 
-    inject(function($location, $rootScope) {
-      $location.path('/');
+      $location.path('/home');
       $rootScope.$digest();
       expect(elt.text()).toBe('Home');
     });
   });
 
-  it('should bind the component to the current router', function() {
+  fit('should bind the component to the current router', function() {
+    console.log(2);
     var router;
-    registerComponent('homeCmp', {
-      bindings: { $router: '=' },
-      controller: function($scope, $element) {
-        this.$routerOnActivate = function() {
-          router = this.$router;
-        };
-      },
-      template: 'Home'
-    });
-
-    registerComponent('app', {
-      template: '<div ng-outlet></div>',
-      $routeConfig: [
-        { path: '/', component: 'homeCmp' }
-      ]
-    });
-
-    module('testMod');
-    compileApp();
+    createTestModule()
+      .component('homeCmp', {
+        bindings: { $router: '=' },
+        controller: function($scope, $element) {
+          this.$routerOnActivate = function() {
+            router = this.$router;
+          };
+        },
+        template: 'Home'
+      })
+      .component('app', {
+        template: '<div ng-outlet></div>',
+        $routeConfig: [
+          { path: '/home', component: 'homeCmp' }
+        ]
+      });
+
+    var elt = compileApp();
 
     inject(function($location, $rootScope) {
-      $location.path('/');
+      $location.path('/home');
       $rootScope.$digest();
+      console.log(elt);
       var homeElement = elt.find('home-cmp');
       expect(homeElement.text()).toBe('Home');
       expect(homeElement.isolateScope().$ctrl.$router).toBeDefined();
@@ -173,6 +185,7 @@ fdescribe('router', function () {
   });
 
   function compileApp() {
+    var elt;
     inject(function($compile, $rootScope) {
       elt = $compile('<div><app></app</div>')($rootScope);
       $rootScope.$digest();