| 
									
										
										
										
											2016-10-04 20:39:20 -07:00
										 |  |  | /** | 
					
						
							|  |  |  |  * @license | 
					
						
							|  |  |  |  * Copyright Google Inc. All Rights Reserved. | 
					
						
							|  |  |  |  * | 
					
						
							|  |  |  |  * Use of this source code is governed by an MIT-style license that can be | 
					
						
							|  |  |  |  * found in the LICENSE file at https://angular.io/license
 | 
					
						
							|  |  |  |  */ | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2015-09-18 15:54:35 -07:00
										 |  |  | 'use strict'; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | describe('ngRoute shim', function () { | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   var elt, | 
					
						
							|  |  |  |     $compile, | 
					
						
							|  |  |  |     $rootScope, | 
					
						
							| 
									
										
										
										
											2016-02-17 07:47:49 +00:00
										 |  |  |     $rootRouter, | 
					
						
							| 
									
										
										
										
											2015-09-18 15:54:35 -07:00
										 |  |  |     $compileProvider, | 
					
						
							|  |  |  |     $routeProvider; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   beforeEach(function () { | 
					
						
							|  |  |  |     module('ng'); | 
					
						
							|  |  |  |     module('ngComponentRouter'); | 
					
						
							|  |  |  |     module('ngRouteShim'); | 
					
						
							|  |  |  |     module(function (_$compileProvider_, _$routeProvider_) { | 
					
						
							|  |  |  |       $compileProvider = _$compileProvider_; | 
					
						
							|  |  |  |       $routeProvider = _$routeProvider_; | 
					
						
							|  |  |  |     }); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-02-17 07:47:49 +00:00
										 |  |  |     inject(function (_$compile_, _$rootScope_, _$rootRouter_) { | 
					
						
							| 
									
										
										
										
											2015-09-18 15:54:35 -07:00
										 |  |  |       $compile = _$compile_; | 
					
						
							|  |  |  |       $rootScope = _$rootScope_; | 
					
						
							| 
									
										
										
										
											2016-02-17 07:47:49 +00:00
										 |  |  |       $rootRouter = _$rootRouter_; | 
					
						
							| 
									
										
										
										
											2015-09-18 15:54:35 -07:00
										 |  |  |     }); | 
					
						
							|  |  |  |   }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   it('should work in a simple case', function () { | 
					
						
							|  |  |  |     $routeProvider.when('/', { | 
					
						
							|  |  |  |       controller: function OneController() { | 
					
						
							|  |  |  |         this.number = 'one'; | 
					
						
							|  |  |  |       }, | 
					
						
							|  |  |  |       controllerAs: 'oneCmp', | 
					
						
							|  |  |  |       template: '{{oneCmp.number}}' | 
					
						
							|  |  |  |     }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     compile('<ng-outlet></ng-outlet>'); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-02-17 07:47:49 +00:00
										 |  |  |     $rootRouter.navigateByUrl('/'); | 
					
						
							| 
									
										
										
										
											2015-09-18 15:54:35 -07:00
										 |  |  |     $rootScope.$digest(); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     expect(elt.text()).toBe('one'); | 
					
						
							|  |  |  |   }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   it('should adapt routes with templateUrl', inject(function ($templateCache) { | 
					
						
							|  |  |  |     $routeProvider.when('/', { | 
					
						
							|  |  |  |       controller: function OneController() { | 
					
						
							|  |  |  |         this.number = 'one'; | 
					
						
							|  |  |  |       }, | 
					
						
							|  |  |  |       controllerAs: 'oneCmp', | 
					
						
							|  |  |  |       templateUrl: '/foo' | 
					
						
							|  |  |  |     }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     $templateCache.put('/foo', [200, '{{oneCmp.number}}', {}]); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     compile('root {<ng-outlet></ng-outlet>}'); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-02-17 07:47:49 +00:00
										 |  |  |     $rootRouter.navigateByUrl('/'); | 
					
						
							| 
									
										
										
										
											2015-09-18 15:54:35 -07:00
										 |  |  |     $rootScope.$digest(); | 
					
						
							|  |  |  |     expect(elt.text()).toBe('root {one}'); | 
					
						
							|  |  |  |   })); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   it('should adapt routes using the "resolve" option', inject(function ($q) { | 
					
						
							|  |  |  |     $routeProvider.when('/', { | 
					
						
							|  |  |  |       controller: function TestController(resolvedService) { | 
					
						
							|  |  |  |         this.resolvedValue = resolvedService; | 
					
						
							|  |  |  |       }, | 
					
						
							|  |  |  |       controllerAs: 'testCmp', | 
					
						
							|  |  |  |       resolve: { | 
					
						
							|  |  |  |         resolvedService: function () { | 
					
						
							|  |  |  |           return $q.when(42); | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  |       }, | 
					
						
							|  |  |  |       template: 'value: {{testCmp.resolvedValue}}' | 
					
						
							|  |  |  |     }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     compile('<ng-outlet></ng-outlet>'); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-02-17 07:47:49 +00:00
										 |  |  |     $rootRouter.navigateByUrl('/'); | 
					
						
							| 
									
										
										
										
											2015-09-18 15:54:35 -07:00
										 |  |  |     $rootScope.$digest(); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     expect(elt.text()).toBe('value: 42'); | 
					
						
							|  |  |  |   })); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   it('should adapt routes with params', function () { | 
					
						
							|  |  |  |     $routeProvider.when('/user/:name', { | 
					
						
							|  |  |  |       controller: function UserController($routeParams) { | 
					
						
							|  |  |  |         this.$routeParams = $routeParams; | 
					
						
							|  |  |  |       }, | 
					
						
							|  |  |  |       controllerAs: 'userCmp', | 
					
						
							|  |  |  |       template: 'hello {{userCmp.$routeParams.name}}' | 
					
						
							|  |  |  |     }); | 
					
						
							|  |  |  |     $rootScope.$digest(); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     compile('<ng-outlet></ng-outlet>'); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-02-17 07:47:49 +00:00
										 |  |  |     $rootRouter.navigateByUrl('/user/brian'); | 
					
						
							| 
									
										
										
										
											2015-09-18 15:54:35 -07:00
										 |  |  |     $rootScope.$digest(); | 
					
						
							|  |  |  |     expect(elt.text()).toBe('hello brian'); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-02-17 07:47:49 +00:00
										 |  |  |     $rootRouter.navigateByUrl('/user/igor'); | 
					
						
							| 
									
										
										
										
											2015-09-18 15:54:35 -07:00
										 |  |  |     $rootScope.$digest(); | 
					
						
							|  |  |  |     expect(elt.text()).toBe('hello igor'); | 
					
						
							|  |  |  |   }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   it('should adapt routes with wildcard params', function () { | 
					
						
							|  |  |  |     $routeProvider.when('/home/:params*', { | 
					
						
							|  |  |  |       controller: function UserController($routeParams) { | 
					
						
							|  |  |  |         this.$routeParams = $routeParams; | 
					
						
							|  |  |  |       }, | 
					
						
							|  |  |  |       controllerAs: 'homeCmp', | 
					
						
							|  |  |  |       template: 'rest: {{homeCmp.$routeParams.params}}' | 
					
						
							|  |  |  |     }); | 
					
						
							|  |  |  |     $rootScope.$digest(); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     compile('<ng-outlet></ng-outlet>'); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-02-17 07:47:49 +00:00
										 |  |  |     $rootRouter.navigateByUrl('/home/foo/bar/123'); | 
					
						
							| 
									
										
										
										
											2015-09-18 15:54:35 -07:00
										 |  |  |     $rootScope.$digest(); | 
					
						
							|  |  |  |     expect(elt.text()).toBe('rest: foo/bar/123'); | 
					
						
							|  |  |  |   }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   it('should warn about and ignore routes with optional params', function () { | 
					
						
							|  |  |  |     spyOn(console, 'warn'); | 
					
						
							|  |  |  |     $routeProvider.when('/home/:params?', { | 
					
						
							|  |  |  |       template: 'home' | 
					
						
							|  |  |  |     }); | 
					
						
							|  |  |  |     $rootScope.$digest(); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     compile('root {<ng-outlet></ng-outlet>}'); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-02-17 07:47:49 +00:00
										 |  |  |     $rootRouter.navigateByUrl('/home/test'); | 
					
						
							| 
									
										
										
										
											2015-09-18 15:54:35 -07:00
										 |  |  |     $rootScope.$digest(); | 
					
						
							|  |  |  |     expect(elt.text()).toBe('root {}'); | 
					
						
							|  |  |  |     expect(console.warn) | 
					
						
							|  |  |  |         .toHaveBeenCalledWith('Route for "/home/:params?" ignored because it has optional parameters. Skipping.', | 
					
						
							|  |  |  |                               '(1 skipped / 0 success / 1 total)'); | 
					
						
							|  |  |  |   }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   it('should adapt routes with redirects', inject(function ($location) { | 
					
						
							|  |  |  |     $routeProvider | 
					
						
							| 
									
										
											  
											
												refactor(router): improve recognition and generation pipeline
This is a big change. @matsko also deserves much of the credit for the implementation.
Previously, `ComponentInstruction`s held all the state for async components.
Now, we introduce several subclasses for `Instruction` to describe each type of navigation.
BREAKING CHANGE:
Redirects now use the Link DSL syntax. Before:
```
@RouteConfig([
	{ path: '/foo', redirectTo: '/bar' },
	{ path: '/bar', component: BarCmp }
])
```
After:
```
@RouteConfig([
	{ path: '/foo', redirectTo: ['Bar'] },
	{ path: '/bar', component: BarCmp, name: 'Bar' }
])
```
BREAKING CHANGE:
This also introduces `useAsDefault` in the RouteConfig, which makes cases like lazy-loading
and encapsulating large routes with sub-routes easier.
Previously, you could use `redirectTo` like this to expand a URL like `/tab` to `/tab/posts`:
@RouteConfig([
	{ path: '/tab', redirectTo: '/tab/users' }
	{ path: '/tab', component: TabsCmp, name: 'Tab' }
])
AppCmp { ... }
Now the recommended way to handle this is case is to use `useAsDefault` like so:
```
@RouteConfig([
	{ path: '/tab', component: TabsCmp, name: 'Tab' }
])
AppCmp { ... }
@RouteConfig([
	{ path: '/posts', component: PostsCmp, useAsDefault: true, name: 'Posts' },
	{ path: '/users', component: UsersCmp, name: 'Users' }
])
TabsCmp { ... }
```
In the above example, you can write just `['/Tab']` and the route `Users` is automatically selected as a child route.
Closes #4728
Closes #4228
Closes #4170
Closes #4490
Closes #4694
Closes #5200
Closes #5475
											
										 
											2015-11-23 18:07:37 -08:00
										 |  |  |         .when('/home', { | 
					
						
							|  |  |  |           template: 'welcome home!', | 
					
						
							|  |  |  |           name: 'Home' | 
					
						
							|  |  |  |         }) | 
					
						
							| 
									
										
										
										
											2015-09-18 15:54:35 -07:00
										 |  |  |         .when('/', { | 
					
						
							|  |  |  |           redirectTo: '/home' | 
					
						
							|  |  |  |         }); | 
					
						
							|  |  |  |     $rootScope.$digest(); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     compile('root {<ng-outlet></ng-outlet>}'); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-02-17 07:47:49 +00:00
										 |  |  |     $rootRouter.navigateByUrl('/'); | 
					
						
							| 
									
										
										
										
											2015-09-18 15:54:35 -07:00
										 |  |  |     $rootScope.$digest(); | 
					
						
							|  |  |  |     expect(elt.text()).toBe('root {welcome home!}'); | 
					
						
							|  |  |  |     expect($location.path()).toBe('/home'); | 
					
						
							|  |  |  |   })); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   //TODO: this is broken in recognition. un-xit this when https://github.com/angular/angular/issues/4133 is fixed
 | 
					
						
							|  |  |  |   xit('should adapt "otherwise" routes', inject(function ($location) { | 
					
						
							|  |  |  |     $routeProvider | 
					
						
							|  |  |  |       .when('/home', { | 
					
						
							|  |  |  |         template: 'welcome home!' | 
					
						
							|  |  |  |       }) | 
					
						
							|  |  |  |       .otherwise({ | 
					
						
							|  |  |  |         redirectTo: '/home' | 
					
						
							|  |  |  |       }); | 
					
						
							|  |  |  |     $rootScope.$digest(); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     compile('root {<ng-outlet></ng-outlet>}'); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-02-17 07:47:49 +00:00
										 |  |  |     $rootRouter.navigateByUrl('/somewhere'); | 
					
						
							| 
									
										
										
										
											2015-09-18 15:54:35 -07:00
										 |  |  |     $rootScope.$digest(); | 
					
						
							|  |  |  |     expect(elt.text()).toBe('root {welcome home!}'); | 
					
						
							|  |  |  |     expect($location.path()).toBe('/home'); | 
					
						
							|  |  |  |   })); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   function compile(template) { | 
					
						
							|  |  |  |     elt = $compile('<div>' + template + '</div>')($rootScope); | 
					
						
							|  |  |  |     $rootScope.$digest(); | 
					
						
							|  |  |  |     return elt; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | }); |