From 64ffd9e99cbc98957cb17a7edc0e0cce0cdcb6f9 Mon Sep 17 00:00:00 2001
From: Brian Ford <btford@umich.edu>
Date: Thu, 20 Aug 2015 14:26:57 -0700
Subject: [PATCH] refactor(router): split 1.x tests into separate files

---
 modules/angular1_router/karma-router.conf.js  |   2 +-
 .../lifecycle_hook_spec.js}                   | 398 ------------------
 .../test/integration/ng_outlet_spec.js        | 295 +++++++++++++
 modules/angular1_router/test/ng_link_spec.js  | 189 +++++++++
 .../test/ng_outlet_animation_spec.js          |  82 ++++
 5 files changed, 567 insertions(+), 399 deletions(-)
 rename modules/angular1_router/test/{ng_outlet_spec.js => integration/lifecycle_hook_spec.js} (53%)
 create mode 100644 modules/angular1_router/test/integration/ng_outlet_spec.js
 create mode 100644 modules/angular1_router/test/ng_link_spec.js
 create mode 100644 modules/angular1_router/test/ng_outlet_animation_spec.js

diff --git a/modules/angular1_router/karma-router.conf.js b/modules/angular1_router/karma-router.conf.js
index d7d014f265..09fc1a408d 100644
--- a/modules/angular1_router/karma-router.conf.js
+++ b/modules/angular1_router/karma-router.conf.js
@@ -16,7 +16,7 @@ module.exports = function (config) {
       '../../dist/angular_1_router.js',
 
       'test/*.es5.js',
-      'test/*_spec.js'
+      'test/**/*_spec.js'
     ],
 
     customLaunchers: sauceConf.customLaunchers,
diff --git a/modules/angular1_router/test/ng_outlet_spec.js b/modules/angular1_router/test/integration/lifecycle_hook_spec.js
similarity index 53%
rename from modules/angular1_router/test/ng_outlet_spec.js
rename to modules/angular1_router/test/integration/lifecycle_hook_spec.js
index ac9c977683..a6eccaaa25 100644
--- a/modules/angular1_router/test/ng_outlet_spec.js
+++ b/modules/angular1_router/test/integration/lifecycle_hook_spec.js
@@ -40,177 +40,6 @@ describe('ngOutlet', function () {
   });
 
 
-  it('should work in a simple case', function () {
-    compile('<ng-outlet></ng-outlet>');
-
-    $router.config([
-      { path: '/', component: OneController }
-    ]);
-
-    $router.navigate('/');
-    $rootScope.$digest();
-
-    expect(elt.text()).toBe('one');
-  });
-
-
-  // See https://github.com/angular/router/issues/105
-  xit('should warn when instantiating a component with no controller', function () {
-    put('noController', '<div>{{ 2 + 2 }}</div>');
-    $router.config([
-      { path: '/', component: 'noController' }
-    ]);
-
-    spyOn(console, 'warn');
-    compile('<ng-outlet></ng-outlet>');
-    $router.navigate('/');
-
-    expect(console.warn).toHaveBeenCalledWith('Could not find controller for', 'NoControllerController');
-    expect(elt.text()).toBe('4');
-  });
-
-
-  it('should navigate between components with different parameters', function () {
-    $router.config([
-      { path: '/user/:name', component: UserController }
-    ]);
-    compile('<ng-outlet></ng-outlet>');
-
-    $router.navigate('/user/brian');
-    $rootScope.$digest();
-    expect(elt.text()).toBe('hello brian');
-
-    $router.navigate('/user/igor');
-    $rootScope.$digest();
-    expect(elt.text()).toBe('hello igor');
-  });
-
-
-  it('should not reactivate a parent when navigating between child components with different parameters', function () {
-    var spy = jasmine.createSpy('onActivate');
-    function ParentController() {}
-    ParentController.$routeConfig = [
-      { path: '/user/:name', component: UserController }
-    ];
-    ParentController.prototype.onActivate = spy;
-
-    registerComponent('parent', 'parent { <ng-outlet></ng-outlet> }', ParentController);
-
-    $router.config([
-      { path: '/parent/...', component: ParentController }
-    ]);
-    compile('<ng-outlet></ng-outlet>');
-
-    $router.navigate('/parent/user/brian');
-    $rootScope.$digest();
-    expect(spy).toHaveBeenCalled();
-    expect(elt.text()).toBe('parent { hello brian }');
-
-    spy.calls.reset();
-
-    $router.navigate('/parent/user/igor');
-    $rootScope.$digest();
-    expect(spy).not.toHaveBeenCalled();
-    expect(elt.text()).toBe('parent { hello igor }');
-  });
-
-
-  it('should work with nested outlets', function () {
-    var childComponent = registerComponent('childComponent', '<div>inner { <div ng-outlet></div> }</div>', [
-      { path: '/b', component: OneController }
-    ]);
-
-    $router.config([
-      { path: '/a/...', component: childComponent }
-    ]);
-    compile('<div>outer { <div ng-outlet></div> }</div>');
-
-    $router.navigate('/a/b');
-    $rootScope.$digest();
-
-    expect(elt.text()).toBe('outer { inner { one } }');
-  });
-
-
-  it('should work with recursive nested outlets', function () {
-    put('two', '<div>recur { <div ng-outlet></div> }</div>');
-    $router.config([
-      { path: '/recur', component: TwoController },
-      { path: '/', component: OneController }
-    ]);
-
-    compile('<div>root { <div ng-outlet></div> }</div>');
-    $router.navigate('/');
-    $rootScope.$digest();
-    expect(elt.text()).toBe('root { one }');
-  });
-
-
-  it('should allow linking from the parent to the child', function () {
-    put('one', '<div>{{number}}</div>');
-
-    $router.config([
-      { path: '/a', component: OneController },
-      { path: '/b', component: TwoController, as: 'two' }
-    ]);
-    compile('<a ng-link="[\'/two\']">link</a> | outer { <div ng-outlet></div> }');
-
-    $router.navigate('/a');
-    $rootScope.$digest();
-
-    expect(elt.find('a').attr('href')).toBe('./b');
-  });
-
-  it('should allow linking from the child and the parent', function () {
-    put('one', '<div><a ng-link="[\'/two\']">{{number}}</a></div>');
-
-    $router.config([
-      { path: '/a', component: OneController },
-      { path: '/b', component: TwoController, as: 'two' }
-    ]);
-    compile('outer { <div ng-outlet></div> }');
-
-    $router.navigate('/a');
-    $rootScope.$digest();
-
-    expect(elt.find('a').attr('href')).toBe('./b');
-  });
-
-
-  it('should allow params in routerLink directive', function () {
-    put('router', '<div>outer { <div ng-outlet></div> }</div>');
-    put('one', '<div><a ng-link="[\'/two\', {param: \'lol\'}]">{{number}}</a></div>');
-
-    $router.config([
-      { path: '/a', component: OneController },
-      { path: '/b/:param', component: TwoController, as: 'two' }
-    ]);
-    compile('<div ng-outlet></div>');
-
-    $router.navigate('/a');
-    $rootScope.$digest();
-
-    expect(elt.find('a').attr('href')).toBe('./b/lol');
-  });
-
-  // TODO: test dynamic links
-  it('should update the href of links with bound params', function () {
-    put('router', '<div>outer { <div ng-outlet></div> }</div>');
-    put('one', '<div><a ng-link="[\'/two\', {param: one.number}]">{{one.number}}</a></div>');
-
-    $router.config([
-      { path: '/a', component: OneController },
-      { path: '/b/:param', component: TwoController, as: 'two' }
-    ]);
-    compile('<div ng-outlet></div>');
-
-    $router.navigate('/a');
-    $rootScope.$digest();
-
-    expect(elt.find('a').attr('href')).toBe('./b/one');
-  });
-
-
   it('should run the activate hook of controllers', function () {
     var spy = jasmine.createSpy('activate');
     var activate = registerComponent('activate', '', {
@@ -267,7 +96,6 @@ describe('ngOutlet', function () {
                                      instructionFor(OneController));
   });
 
-
   it('should inject $scope into the controller constructor', function () {
 
     var injectedScope;
@@ -601,149 +429,6 @@ describe('ngOutlet', function () {
                                      instructionFor(deactivate));
   });
 
-
-  it('should change location path', inject(function ($location) {
-    $router.config([
-      { path: '/user', component: UserController }
-    ]);
-
-    compile('<div ng-outlet></div>');
-
-    $router.navigate('/user');
-    $rootScope.$digest();
-
-    expect($location.path()).toBe('/user');
-  }));
-
-  // TODO: test injecting $scope
-
-  it('should navigate on left-mouse click when a link url matches a route', function () {
-    $router.config([
-      { path: '/', component: OneController },
-      { path: '/two', component: TwoController }
-    ]);
-
-    compile('<a href="/two">link</a> | <div ng-outlet></div>');
-    $rootScope.$digest();
-    expect(elt.text()).toBe('link | one');
-    elt.find('a')[0].click();
-
-    $rootScope.$digest();
-    expect(elt.text()).toBe('link | two');
-  });
-
-
-  it('should not navigate on non-left mouse click when a link url matches a route', inject(function ($router) {
-    $router.config([
-      { path: '/', component: OneController },
-      { path: '/two', component: TwoController }
-    ]);
-
-    compile('<a href="./two">link</a> | <div ng-outlet></div>');
-    $rootScope.$digest();
-    expect(elt.text()).toBe('link | one');
-    elt.find('a').triggerHandler({ type: 'click', which: 3 });
-
-    $rootScope.$digest();
-    expect(elt.text()).toBe('link | one');
-  }));
-
-
-  // See https://github.com/angular/router/issues/206
-  it('should not navigate a link without an href', function () {
-    $router.config([
-      { path: '/', component: OneController },
-      { path: '/two', component: TwoController }
-    ]);
-    expect(function () {
-      compile('<a>link</a>');
-      $rootScope.$digest();
-      expect(elt.text()).toBe('link');
-      elt.find('a')[0].click();
-      $rootScope.$digest();
-    }).not.toThrow();
-  });
-
-
-  it('should change location to the canonical route', inject(function ($location) {
-    compile('<div ng-outlet></div>');
-
-    $router.config([
-      { path: '/',     redirectTo: '/user' },
-      { path: '/user', component:  UserController }
-    ]);
-
-    $router.navigate('/');
-    $rootScope.$digest();
-
-    expect($location.path()).toBe('/user');
-  }));
-
-
-  it('should change location to the canonical route with nested components', inject(function ($location) {
-    var childRouter = registerComponent('childRouter', '<div>inner { <div ng-outlet></div> }</div>', [
-      { path: '/old-child', redirectTo: '/new-child' },
-      { path: '/new-child', component: OneController},
-      { path: '/old-child-two', redirectTo: '/new-child-two' },
-      { path: '/new-child-two', component: TwoController}
-    ]);
-
-    $router.config([
-      { path: '/old-parent', redirectTo: '/new-parent' },
-      { path: '/new-parent/...', component:  childRouter }
-    ]);
-
-    compile('<div ng-outlet></div>');
-
-    $router.navigate('/old-parent/old-child');
-    $rootScope.$digest();
-
-    expect($location.path()).toBe('/new-parent/new-child');
-    expect(elt.text()).toBe('inner { one }');
-
-    $router.navigate('/old-parent/old-child-two');
-    $rootScope.$digest();
-
-    expect($location.path()).toBe('/new-parent/new-child-two');
-    expect(elt.text()).toBe('inner { two }');
-  }));
-
-
-  it('should navigate when the location path changes', inject(function ($location) {
-    $router.config([
-      { path: '/one', component: OneController }
-    ]);
-    compile('<div ng-outlet></div>');
-
-    $location.path('/one');
-    $rootScope.$digest();
-
-    expect(elt.text()).toBe('one');
-  }));
-
-
-  it('should expose a "navigating" property on $router', inject(function ($q) {
-    var defer;
-    var pendingActivate = registerComponent('pendingActivate', '', {
-      onActivate: function () {
-        defer = $q.defer();
-        return defer.promise;
-      }
-    });
-    $router.config([
-      { path: '/pendingActivate', component: pendingActivate }
-    ]);
-    compile('<div ng-outlet></div>');
-
-    $router.navigate('/pendingActivate');
-    $rootScope.$digest();
-    expect($router.navigating).toBe(true);
-    defer.resolve();
-    $rootScope.$digest();
-    expect($router.navigating).toBe(false);
-  }));
-
-
   function registerComponent(name, template, config) {
     var Ctrl;
     if (!template) {
@@ -785,86 +470,3 @@ describe('ngOutlet', function () {
     return elt;
   }
 });
-
-
-describe('ngOutlet animations', function () {
-
-  var elt,
-      $animate,
-      $compile,
-      $rootScope,
-      $router,
-      $templateCache,
-      $controllerProvider;
-
-  function UserController($routeParams) {
-    this.name = $routeParams.name;
-  }
-
-  beforeEach(function () {
-    module('ngAnimate');
-    module('ngAnimateMock');
-    module('ngComponentRouter');
-    module(function (_$controllerProvider_) {
-      $controllerProvider = _$controllerProvider_;
-    });
-
-    inject(function (_$animate_, _$compile_, _$rootScope_, _$router_, _$templateCache_) {
-      $animate = _$animate_;
-      $compile = _$compile_;
-      $rootScope = _$rootScope_;
-      $router = _$router_;
-      $templateCache = _$templateCache_;
-    });
-
-    put('user', '<div>hello {{user.name}}</div>');
-    $controllerProvider.register('UserController', UserController);
-  });
-
-  afterEach(function () {
-    expect($animate.queue).toEqual([]);
-  });
-
-  it('should work in a simple case', function () {
-    var item;
-
-    compile('<div ng-outlet></div>');
-
-    $router.config([
-      { path: '/user/:name', component: UserController }
-    ]);
-
-    $router.navigate('/user/brian');
-    $rootScope.$digest();
-    expect(elt.text()).toBe('hello brian');
-
-    // "user" component enters
-    item = $animate.queue.shift();
-    expect(item.event).toBe('enter');
-
-    // navigate to pete
-    $router.navigate('/user/pete');
-    $rootScope.$digest();
-    expect(elt.text()).toBe('hello pete');
-
-    // "user pete" component enters
-    item = $animate.queue.shift();
-    expect(item.event).toBe('enter');
-    expect(item.element.text()).toBe('hello pete');
-
-    // "user brian" component leaves
-    item = $animate.queue.shift();
-    expect(item.event).toBe('leave');
-    expect(item.element.text()).toBe('hello brian');
-  });
-
-  function put(name, template) {
-    $templateCache.put(componentTemplatePath(name), [200, template, {}]);
-  }
-
-  function compile(template) {
-    elt = $compile('<div>' + template + '</div>')($rootScope);
-    $rootScope.$digest();
-    return elt;
-  }
-});
diff --git a/modules/angular1_router/test/integration/ng_outlet_spec.js b/modules/angular1_router/test/integration/ng_outlet_spec.js
new file mode 100644
index 0000000000..7000af54bf
--- /dev/null
+++ b/modules/angular1_router/test/integration/ng_outlet_spec.js
@@ -0,0 +1,295 @@
+'use strict';
+
+describe('ngOutlet', function () {
+
+  var elt,
+      $compile,
+      $rootScope,
+      $router,
+      $templateCache,
+      $controllerProvider,
+      $componentMapperProvider;
+
+  var OneController, TwoController, UserController;
+
+
+  beforeEach(function () {
+    module('ng');
+    module('ngComponentRouter');
+    module(function (_$controllerProvider_, _$componentMapperProvider_) {
+      $controllerProvider = _$controllerProvider_;
+      $componentMapperProvider = _$componentMapperProvider_;
+    });
+
+    inject(function (_$compile_, _$rootScope_, _$router_, _$templateCache_) {
+      $compile = _$compile_;
+      $rootScope = _$rootScope_;
+      $router = _$router_;
+      $templateCache = _$templateCache_;
+    });
+
+    UserController = registerComponent('user', '<div>hello {{user.name}}</div>', function ($routeParams) {
+      this.name = $routeParams.name;
+    });
+    OneController = registerComponent('one', '<div>{{one.number}}</div>', boringController('number', 'one'));
+    TwoController = registerComponent('two', '<div>{{two.number}}</div>', boringController('number', 'two'));
+  });
+
+
+  it('should work in a simple case', function () {
+    compile('<ng-outlet></ng-outlet>');
+
+    $router.config([
+      { path: '/', component: OneController }
+    ]);
+
+    $router.navigate('/');
+    $rootScope.$digest();
+
+    expect(elt.text()).toBe('one');
+  });
+
+
+  // See https://github.com/angular/router/issues/105
+  xit('should warn when instantiating a component with no controller', function () {
+    put('noController', '<div>{{ 2 + 2 }}</div>');
+    $router.config([
+      { path: '/', component: 'noController' }
+    ]);
+
+    spyOn(console, 'warn');
+    compile('<ng-outlet></ng-outlet>');
+    $router.navigate('/');
+
+    expect(console.warn).toHaveBeenCalledWith('Could not find controller for', 'NoControllerController');
+    expect(elt.text()).toBe('4');
+  });
+
+
+  it('should navigate between components with different parameters', function () {
+    $router.config([
+      { path: '/user/:name', component: UserController }
+    ]);
+    compile('<ng-outlet></ng-outlet>');
+
+    $router.navigate('/user/brian');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('hello brian');
+
+    $router.navigate('/user/igor');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('hello igor');
+  });
+
+
+  it('should not reactivate a parent when navigating between child components with different parameters', function () {
+    var spy = jasmine.createSpy('onActivate');
+    function ParentController() {}
+    ParentController.$routeConfig = [
+      { path: '/user/:name', component: UserController }
+    ];
+    ParentController.prototype.onActivate = spy;
+
+    registerComponent('parent', 'parent { <ng-outlet></ng-outlet> }', ParentController);
+
+    $router.config([
+      { path: '/parent/...', component: ParentController }
+    ]);
+    compile('<ng-outlet></ng-outlet>');
+
+    $router.navigate('/parent/user/brian');
+    $rootScope.$digest();
+    expect(spy).toHaveBeenCalled();
+    expect(elt.text()).toBe('parent { hello brian }');
+
+    spy.calls.reset();
+
+    $router.navigate('/parent/user/igor');
+    $rootScope.$digest();
+    expect(spy).not.toHaveBeenCalled();
+    expect(elt.text()).toBe('parent { hello igor }');
+  });
+
+
+  it('should work with nested outlets', function () {
+    var childComponent = registerComponent('childComponent', '<div>inner { <div ng-outlet></div> }</div>', [
+      { path: '/b', component: OneController }
+    ]);
+
+    $router.config([
+      { path: '/a/...', component: childComponent }
+    ]);
+    compile('<div>outer { <div ng-outlet></div> }</div>');
+
+    $router.navigate('/a/b');
+    $rootScope.$digest();
+
+    expect(elt.text()).toBe('outer { inner { one } }');
+  });
+
+
+  it('should work with recursive nested outlets', function () {
+    put('two', '<div>recur { <div ng-outlet></div> }</div>');
+    $router.config([
+      { path: '/recur', component: TwoController },
+      { path: '/', component: OneController }
+    ]);
+
+    compile('<div>root { <div ng-outlet></div> }</div>');
+    $router.navigate('/');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('root { one }');
+  });
+
+  it('should inject $scope into the controller constructor', function () {
+    var injectedScope;
+    var UserController = registerComponent('user', '', function ($scope) {
+      injectedScope = $scope;
+    });
+
+    $router.config([
+      { path: '/user', component: UserController }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $router.navigate('/user');
+    $rootScope.$digest();
+
+    expect(injectedScope).toBeDefined();
+  });
+
+
+  it('should change location path', inject(function ($location) {
+    $router.config([
+      { path: '/user', component: UserController }
+    ]);
+
+    compile('<div ng-outlet></div>');
+
+    $router.navigate('/user');
+    $rootScope.$digest();
+
+    expect($location.path()).toBe('/user');
+  }));
+
+
+  it('should change location to the canonical route', inject(function ($location) {
+    compile('<div ng-outlet></div>');
+
+    $router.config([
+      { path: '/',     redirectTo: '/user' },
+      { path: '/user', component:  UserController }
+    ]);
+
+    $router.navigate('/');
+    $rootScope.$digest();
+
+    expect($location.path()).toBe('/user');
+  }));
+
+
+  it('should change location to the canonical route with nested components', inject(function ($location) {
+    var childRouter = registerComponent('childRouter', '<div>inner { <div ng-outlet></div> }</div>', [
+      { path: '/old-child', redirectTo: '/new-child' },
+      { path: '/new-child', component: OneController},
+      { path: '/old-child-two', redirectTo: '/new-child-two' },
+      { path: '/new-child-two', component: TwoController}
+    ]);
+
+    $router.config([
+      { path: '/old-parent', redirectTo: '/new-parent' },
+      { path: '/new-parent/...', component:  childRouter }
+    ]);
+
+    compile('<div ng-outlet></div>');
+
+    $router.navigate('/old-parent/old-child');
+    $rootScope.$digest();
+
+    expect($location.path()).toBe('/new-parent/new-child');
+    expect(elt.text()).toBe('inner { one }');
+
+    $router.navigate('/old-parent/old-child-two');
+    $rootScope.$digest();
+
+    expect($location.path()).toBe('/new-parent/new-child-two');
+    expect(elt.text()).toBe('inner { two }');
+  }));
+
+
+  it('should navigate when the location path changes', inject(function ($location) {
+    $router.config([
+      { path: '/one', component: OneController }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $location.path('/one');
+    $rootScope.$digest();
+
+    expect(elt.text()).toBe('one');
+  }));
+
+
+  it('should expose a "navigating" property on $router', inject(function ($q) {
+    var defer;
+    var pendingActivate = registerComponent('pendingActivate', '', {
+      onActivate: function () {
+        defer = $q.defer();
+        return defer.promise;
+      }
+    });
+    $router.config([
+      { path: '/pendingActivate', component: pendingActivate }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $router.navigate('/pendingActivate');
+    $rootScope.$digest();
+    expect($router.navigating).toBe(true);
+    defer.resolve();
+    $rootScope.$digest();
+    expect($router.navigating).toBe(false);
+  }));
+
+
+  function registerComponent(name, template, config) {
+    var Ctrl;
+    if (!template) {
+      template = '';
+    }
+    if (!config) {
+      Ctrl = function () {};
+    } else if (angular.isArray(config)) {
+      Ctrl = function () {};
+      Ctrl.annotations = [new angular.annotations.RouteConfig(config)];
+    } else if (typeof config === 'function') {
+      Ctrl = config;
+    } else {
+      Ctrl = function () {};
+      if (config.canActivate) {
+        Ctrl.$canActivate = config.canActivate;
+        delete config.canActivate;
+      }
+      Ctrl.prototype = config;
+    }
+    $controllerProvider.register(componentControllerName(name), Ctrl);
+    put(name, template);
+    return Ctrl;
+  }
+
+  function boringController(model, value) {
+    return function () {
+      this[model] = value;
+    };
+  }
+
+  function put(name, template) {
+    $templateCache.put(componentTemplatePath(name), [200, template, {}]);
+  }
+
+  function compile(template) {
+    elt = $compile('<div>' + template + '</div>')($rootScope);
+    $rootScope.$digest();
+    return elt;
+  }
+});
diff --git a/modules/angular1_router/test/ng_link_spec.js b/modules/angular1_router/test/ng_link_spec.js
new file mode 100644
index 0000000000..a900a4dba5
--- /dev/null
+++ b/modules/angular1_router/test/ng_link_spec.js
@@ -0,0 +1,189 @@
+'use strict';
+
+describe('ngOutlet', function () {
+
+  var elt,
+      $compile,
+      $rootScope,
+      $router,
+      $templateCache,
+      $controllerProvider;
+
+  var OneController, TwoController, UserController;
+
+  beforeEach(function () {
+    module('ng');
+    module('ngComponentRouter');
+    module(function (_$controllerProvider_) {
+      $controllerProvider = _$controllerProvider_;
+    });
+
+    inject(function (_$compile_, _$rootScope_, _$router_, _$templateCache_) {
+      $compile = _$compile_;
+      $rootScope = _$rootScope_;
+      $router = _$router_;
+      $templateCache = _$templateCache_;
+    });
+
+    UserController = registerComponent('user', '<div>hello {{user.name}}</div>', function ($routeParams) {
+      this.name = $routeParams.name;
+    });
+    OneController = registerComponent('one', '<div>{{one.number}}</div>', boringController('number', 'one'));
+    TwoController = registerComponent('two', '<div>{{two.number}}</div>', boringController('number', 'two'));
+  });
+
+
+  it('should allow linking from the parent to the child', function () {
+    put('one', '<div>{{number}}</div>');
+
+    $router.config([
+      { path: '/a', component: OneController },
+      { path: '/b', component: TwoController, as: 'two' }
+    ]);
+    compile('<a ng-link="[\'/two\']">link</a> | outer { <div ng-outlet></div> }');
+
+    $router.navigate('/a');
+    $rootScope.$digest();
+
+    expect(elt.find('a').attr('href')).toBe('./b');
+  });
+
+  it('should allow linking from the child and the parent', function () {
+    put('one', '<div><a ng-link="[\'/two\']">{{number}}</a></div>');
+
+    $router.config([
+      { path: '/a', component: OneController },
+      { path: '/b', component: TwoController, as: 'two' }
+    ]);
+    compile('outer { <div ng-outlet></div> }');
+
+    $router.navigate('/a');
+    $rootScope.$digest();
+
+    expect(elt.find('a').attr('href')).toBe('./b');
+  });
+
+
+  it('should allow params in routerLink directive', function () {
+    put('router', '<div>outer { <div ng-outlet></div> }</div>');
+    put('one', '<div><a ng-link="[\'/two\', {param: \'lol\'}]">{{number}}</a></div>');
+
+    $router.config([
+      { path: '/a', component: OneController },
+      { path: '/b/:param', component: TwoController, as: 'two' }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $router.navigate('/a');
+    $rootScope.$digest();
+
+    expect(elt.find('a').attr('href')).toBe('./b/lol');
+  });
+
+  // TODO: test dynamic links
+  it('should update the href of links with bound params', function () {
+    put('router', '<div>outer { <div ng-outlet></div> }</div>');
+    put('one', '<div><a ng-link="[\'/two\', {param: one.number}]">{{one.number}}</a></div>');
+
+    $router.config([
+      { path: '/a', component: OneController },
+      { path: '/b/:param', component: TwoController, as: 'two' }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $router.navigate('/a');
+    $rootScope.$digest();
+
+    expect(elt.find('a').attr('href')).toBe('./b/one');
+  });
+
+
+  it('should navigate on left-mouse click when a link url matches a route', function () {
+    $router.config([
+      { path: '/', component: OneController },
+      { path: '/two', component: TwoController }
+    ]);
+
+    compile('<a href="/two">link</a> | <div ng-outlet></div>');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('link | one');
+    elt.find('a')[0].click();
+
+    $rootScope.$digest();
+    expect(elt.text()).toBe('link | two');
+  });
+
+
+  it('should not navigate on non-left mouse click when a link url matches a route', inject(function ($router) {
+    $router.config([
+      { path: '/', component: OneController },
+      { path: '/two', component: TwoController }
+    ]);
+
+    compile('<a href="./two">link</a> | <div ng-outlet></div>');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('link | one');
+    elt.find('a').triggerHandler({ type: 'click', which: 3 });
+
+    $rootScope.$digest();
+    expect(elt.text()).toBe('link | one');
+  }));
+
+
+  // See https://github.com/angular/router/issues/206
+  it('should not navigate a link without an href', function () {
+    $router.config([
+      { path: '/', component: OneController },
+      { path: '/two', component: TwoController }
+    ]);
+    expect(function () {
+      compile('<a>link</a>');
+      $rootScope.$digest();
+      expect(elt.text()).toBe('link');
+      elt.find('a')[0].click();
+      $rootScope.$digest();
+    }).not.toThrow();
+  });
+
+
+  function registerComponent(name, template, config) {
+    var Ctrl;
+    if (!template) {
+      template = '';
+    }
+    if (!config) {
+      Ctrl = function () {};
+    } else if (angular.isArray(config)) {
+      Ctrl = function () {};
+      Ctrl.annotations = [new angular.annotations.RouteConfig(config)];
+    } else if (typeof config === 'function') {
+      Ctrl = config;
+    } else {
+      Ctrl = function () {};
+      if (config.canActivate) {
+        Ctrl.$canActivate = config.canActivate;
+        delete config.canActivate;
+      }
+      Ctrl.prototype = config;
+    }
+    $controllerProvider.register(componentControllerName(name), Ctrl);
+    put(name, template);
+    return Ctrl;
+  }
+
+  function boringController(model, value) {
+    return function () {
+      this[model] = value;
+    };
+  }
+
+  function put(name, template) {
+    $templateCache.put(componentTemplatePath(name), [200, template, {}]);
+  }
+
+  function compile(template) {
+    elt = $compile('<div>' + template + '</div>')($rootScope);
+    $rootScope.$digest();
+    return elt;
+  }
+});
diff --git a/modules/angular1_router/test/ng_outlet_animation_spec.js b/modules/angular1_router/test/ng_outlet_animation_spec.js
new file mode 100644
index 0000000000..dffd6581c3
--- /dev/null
+++ b/modules/angular1_router/test/ng_outlet_animation_spec.js
@@ -0,0 +1,82 @@
+'use strict';
+
+describe('ngOutlet animations', function () {
+  var elt,
+      $animate,
+      $compile,
+      $rootScope,
+      $router,
+      $templateCache,
+      $controllerProvider;
+
+  function UserController($routeParams) {
+    this.name = $routeParams.name;
+  }
+
+  beforeEach(function () {
+    module('ngAnimate');
+    module('ngAnimateMock');
+    module('ngComponentRouter');
+    module(function (_$controllerProvider_) {
+      $controllerProvider = _$controllerProvider_;
+    });
+
+    inject(function (_$animate_, _$compile_, _$rootScope_, _$router_, _$templateCache_) {
+      $animate = _$animate_;
+      $compile = _$compile_;
+      $rootScope = _$rootScope_;
+      $router = _$router_;
+      $templateCache = _$templateCache_;
+    });
+
+    put('user', '<div>hello {{user.name}}</div>');
+    $controllerProvider.register('UserController', UserController);
+  });
+
+  afterEach(function () {
+    expect($animate.queue).toEqual([]);
+  });
+
+  it('should work in a simple case', function () {
+    var item;
+
+    compile('<div ng-outlet></div>');
+
+    $router.config([
+      { path: '/user/:name', component: UserController }
+    ]);
+
+    $router.navigate('/user/brian');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('hello brian');
+
+    // "user" component enters
+    item = $animate.queue.shift();
+    expect(item.event).toBe('enter');
+
+    // navigate to pete
+    $router.navigate('/user/pete');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('hello pete');
+
+    // "user pete" component enters
+    item = $animate.queue.shift();
+    expect(item.event).toBe('enter');
+    expect(item.element.text()).toBe('hello pete');
+
+    // "user brian" component leaves
+    item = $animate.queue.shift();
+    expect(item.event).toBe('leave');
+    expect(item.element.text()).toBe('hello brian');
+  });
+
+  function put(name, template) {
+    $templateCache.put(componentTemplatePath(name), [200, template, {}]);
+  }
+
+  function compile(template) {
+    elt = $compile('<div>' + template + '</div>')($rootScope);
+    $rootScope.$digest();
+    return elt;
+  }
+});