refactor(router): split 1.x tests into separate files
This commit is contained in:
Brian Ford
parent
944ccc9a94
commit
64ffd9e99c
@ -16,7 +16,7 @@ module.exports = function (config) {
|
|||||||
'../../dist/angular_1_router.js',
|
'../../dist/angular_1_router.js',
|
||||||
|
|
||||||
'test/*.es5.js',
|
'test/*.es5.js',
|
||||||
'test/*_spec.js'
|
'test/**/*_spec.js'
|
||||||
],
|
],
|
||||||
|
|
||||||
customLaunchers: sauceConf.customLaunchers,
|
customLaunchers: sauceConf.customLaunchers,
|
||||||
|
|||||||
@ -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 () {
|
it('should run the activate hook of controllers', function () {
|
||||||
var spy = jasmine.createSpy('activate');
|
var spy = jasmine.createSpy('activate');
|
||||||
var activate = registerComponent('activate', '', {
|
var activate = registerComponent('activate', '', {
|
||||||
@ -267,7 +96,6 @@ describe('ngOutlet', function () {
|
|||||||
instructionFor(OneController));
|
instructionFor(OneController));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
it('should inject $scope into the controller constructor', function () {
|
it('should inject $scope into the controller constructor', function () {
|
||||||
|
|
||||||
var injectedScope;
|
var injectedScope;
|
||||||
@ -601,149 +429,6 @@ describe('ngOutlet', function () {
|
|||||||
instructionFor(deactivate));
|
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) {
|
function registerComponent(name, template, config) {
|
||||||
var Ctrl;
|
var Ctrl;
|
||||||
if (!template) {
|
if (!template) {
|
||||||
@ -785,86 +470,3 @@ describe('ngOutlet', function () {
|
|||||||
return elt;
|
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;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
295
modules/angular1_router/test/integration/ng_outlet_spec.js
vendored
Normal file
295
modules/angular1_router/test/integration/ng_outlet_spec.js
vendored
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
});
|
||||||
189
modules/angular1_router/test/ng_link_spec.js
vendored
Normal file
189
modules/angular1_router/test/ng_link_spec.js
vendored
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
});
|
||||||
82
modules/angular1_router/test/ng_outlet_animation_spec.js
vendored
Normal file
82
modules/angular1_router/test/ng_outlet_animation_spec.js
vendored
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user