angular-docs-cn/modules/angular1_router/test/ng_link_spec.js

213 lines
7.3 KiB
JavaScript
Raw Normal View History

/**
* @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
*/
'use strict';
describe('ngLink', function () {
describe('html5Mode enabled', function () {
runHrefTestsAndExpectPrefix('/', true);
});
describe('html5Mode disabled', function () {
runHrefTestsAndExpectPrefix('', false, '');
});
describe('html5Mode disabled, with hash prefix', function () {
runHrefTestsAndExpectPrefix('', false, '!');
});
describe('html5Mode enabled', function () {
runHrefTestsAndExpectPrefix('/moo', true);
});
describe('html5Mode disabled', function () {
runHrefTestsAndExpectPrefix('/moo', false, '');
});
describe('html5Mode disabled, with hash prefix', function () {
runHrefTestsAndExpectPrefix('/moo', false, '!');
});
function runHrefTestsAndExpectPrefix(baseHref, html5Mode, hashPrefix) {
var prefix = html5Mode ? '.' : '#' + hashPrefix;
it('should allow linking from the parent to the child', function () {
setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
configureRouter([
{ path: '/a', component: 'oneCmp' },
{ path: '/b', component: 'twoCmp', name: 'Two' }
]);
var elt = compile('<a ng-link="[\'/Two\']">link</a> | outer { <div ng-outlet></div> }');
navigateTo('/a');
expect(elt.find('a').attr('href')).toBe(prefix + '/b');
});
it('should allow linking from the child and the parent', function () {
setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
configureRouter([
{ path: '/a', component: 'oneCmp' },
{ path: '/b', component: 'twoCmp', name: 'Two' }
]);
var elt = compile('outer { <div ng-outlet></div> }');
navigateTo('/b');
expect(elt.find('a').attr('href')).toBe(prefix + '/b');
});
it('should allow params in routerLink directive', function () {
setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
registerComponent('twoLinkCmp', '<div><a ng-link="[\'/Two\', {param: \'lol\'}]">{{twoLinkCmp.number}}</a></div>', function () {this.number = 'two'});
configureRouter([
{ path: '/a', component: 'twoLinkCmp' },
{ path: '/b/:param', component: 'twoCmp', name: 'Two' }
]);
var elt = compile('<div ng-outlet></div>');
navigateTo('/a');
expect(elt.find('a').attr('href')).toBe(prefix + '/b/lol');
});
it('should update the href of links with bound params', function () {
setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
registerComponent('twoLinkCmp', '<div><a ng-link="[\'/Two\', {param: $ctrl.number}]">{{$ctrl.number}}</a></div>', function () {this.number = 43});
configureRouter([
{ path: '/a', component: 'twoLinkCmp' },
{ path: '/b/:param', component: 'twoCmp', name: 'Two' }
]);
var elt = compile('<div ng-outlet></div>');
navigateTo('/a');
expect(elt.find('a').text()).toBe('43');
expect(elt.find('a').attr('href')).toBe(prefix + '/b/43');
});
it('should navigate on left-mouse click when a link url matches a route', function () {
setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
configureRouter([
{ path: '/', component: 'oneCmp' },
{ path: '/two', component: 'twoCmp', name: 'Two'}
]);
var elt = compile('<a ng-link="[\'/Two\']">link</a> | <div ng-outlet></div>');
expect(elt.text()).toBe('link | one');
expect(elt.find('a').attr('href')).toBe(prefix + '/two');
elt.find('a')[0].click();
inject(function($rootScope) { $rootScope.$digest(); });
expect(elt.text()).toBe('link | two');
});
it('should not navigate on non-left mouse click when a link url matches a route', function() {
setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
configureRouter([
{ path: '/', component: 'oneCmp' },
{ path: '/two', component: 'twoCmp', name: 'Two'}
]);
var elt = compile('<a ng-link="[\'/Two\']">link</a> | <div ng-outlet></div>');
expect(elt.text()).toBe('link | one');
elt.find('a').triggerHandler({ type: 'click', which: 3 });
inject(function($rootScope) { $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 () {
setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
configureRouter([
{ path: '/', component: 'oneCmp' },
{ path: '/two', component: 'twoCmp', name: 'Two'}
]);
expect(function () {
var elt = compile('<a>link</a>');
expect(elt.text()).toBe('link');
elt.find('a')[0].click();
inject(function($rootScope) { $rootScope.$digest(); });
}).not.toThrow();
});
it('should add an ng-link-active class on the current link', function() {
setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
configureRouter([
{ path: '/', component: 'oneCmp', name: 'One' }
]);
var elt = compile('<a ng-link="[\'/One\']">one</a> | <div ng-outlet></div>');
navigateTo('/');
expect(elt.find('a').attr('class')).toBe('ng-link-active');
});
it('should not add a href if link attributes are undefined', function () {
setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
configureRouter([
{ path: '/a', component: 'oneCmp' },
{ path: '/b', component: 'twoCmp', name: 'Two' }
]);
var elt = compile('<a ng-link="something.undefined">link</a> | outer { <div ng-outlet></div> }');
navigateTo('/a');
expect(elt.find('a').hasAttr('href')).toBeFalsy();
});
}
function registerComponent(name, template, controller) {
module(function($compileProvider) {
$compileProvider.component(name, {
template: template,
controller: controller
});
});
}
function setup(config) {
module(function($provide) {
$provide.decorator('$browser', function($delegate) {
$delegate.baseHref = function() { return config.baseHref; };
return $delegate;
});
});
module('ngComponentRouter');
module(function($locationProvider) {
$locationProvider.html5Mode(config.html5Mode);
$locationProvider.hashPrefix(config.hashPrefix);
});
registerComponent('userCmp', '<div>hello {{$ctrl.$routeParams.name}}</div>', function () {});
registerComponent('oneCmp', '<div>{{$ctrl.number}}</div>', function () {this.number = 'one'});
registerComponent('twoCmp', '<div><a ng-link="[\'/Two\']">{{$ctrl.number}}</a></div>', function () {this.number = 'two'});
}
function configureRouter(routeConfig) {
inject(function($rootRouter) {
$rootRouter.config(routeConfig);
});
}
function compile(template) {
var elt;
inject(function($compile, $rootScope) {
elt = $compile('<div>' + template + '</div>')($rootScope);
$rootScope.$digest();
});
return elt;
}
function navigateTo(url) {
inject(function($rootRouter, $rootScope) {
$rootRouter.navigateByUrl(url);
$rootScope.$digest();
});
}
});