问题描述
我需要测试指令，做一些注射服务几个电话。
下面code的一块就是一个例子指令，监听活动，如果输入重定向浏览器指定的元素里面pssed $ P $。
编辑：我得到我可以在E2E测试陆地上涉水的感觉的
？ angular.module（'fooApp'）
.directive（'gotoOnEnter'，['$位置'，函数（$位置）{ VAR _linkFn =功能链接（范围，元素，ATTRS）{ element.off（键preSS'）。在（'键preSS'功能（E）{
如果（e.key code === 13）
{
$ location.path（scope.redirectUrl）;
}
}）;
} 返回{
限制：'A'，
链接：_linkFn
};
}]）;
问题是，我还没有想出如何注入服务的指令，对他们的间谍。
我提出的解决方案是这样的：
的它不起作用，如预期，因为我还没有设法成功地注入 $ locacion 服务窥探。的
描述（'指令：gotoOnEnter'，函数（）{
beforeEach（模块（'fooApp'））; VAR元素; 它（'应该访问的链接进入scope.url时，pssed $ P $，注入（函数（$ rootScope，$编译，$位置）{ 元素= angular.element（'＆LT;输入类型=文本后藤上输入＆GT;'）;
元素= $编译（元）（$ rootScope）; $ rootScope.redirectUrl ='http://www.google.com';
$ rootScope $摘要（）。 变种E = jQuery.Event（键preSS'）;
e.key code = 13;
element.trigger（E）; spyOn（$位置，'通路'）; 期待（$ location.path）.toHaveBeenCalledWith（'http://www.google.com'）;
}））;
此收益率
已调用['http://www.google.com']，但它从来就没有所谓的间谍预期路径。
要装修，存根，提供嘲笑或覆盖任何给定的服务，您可以使用 $提供服务。 $ provide.value ， $ provide.decorator 等文件的。
然后，你可以做的东西是这样的：
变量$位置; beforeEach（函数（）{
模块（'studentportalenApp'，函数（$提供）{
$ provide.decorator（'$位置'，函数（$代表）{ $ delegate.path = jasmine.createSpy（）; 返回$代表;
}）;
}）; 注（功能（_ $位置指定：）{
$位置= _ $位置指定：;
}）; }）;
...
它（'进入时，应访问scope.redirectUrl链路pssed $ P $，注入（函数（$ rootScope，$编译，$位置）{
元素= angular.element（'＆LT;输入类型=文本后藤上输入＆GT;'）;
元素= $编译（元）（$ rootScope）; $ rootScope.redirectUrl ='http://www.google.com';
$ rootScope $摘要（）。 变种E = jQuery.Event（键preSS'）;
e.key code = 13;
element.trigger（E）; $ rootScope $摘要（）。 期待（$ location.path）.toHaveBeenCalledWith（'http://www.google.com'）;}））;
I need to test a directive that does some calls to some injected services.The following piece of code is an example directive, that listens for events, and redirects the browser if enter is pressed inside a specified element.
Edit: I get the feeling I may be wading in E2E testing land?
angular.module('fooApp')
.directive('gotoOnEnter', ['$location', function ($location) {
var _linkFn = function link(scope, element, attrs) {
element.off('keypress').on('keypress', function(e) {
if(e.keyCode === 13)
{
$location.path(scope.redirectUrl);
}
});
}
return {
restrict: 'A',
link: _linkFn
};
}]);
The problem is that I have not figured out how to inject services to spy on them in directives.
My proposed solution looks like this:It does not work, as expected, because I have not managed to inject a $locacion service successfully to spy on.
describe('Directive: gotoOnEnter', function () {
beforeEach(module('fooApp'));
var element;
it('should visit the link in scope.url when enter is pressed', inject(function ($rootScope, $compile, $location) {
element = angular.element('<input type="text" goto-on-enter>');
element = $compile(element)($rootScope);
$rootScope.redirectUrl = 'http://www.google.com';
$rootScope.$digest();
var e = jQuery.Event('keypress');
e.keyCode = 13;
element.trigger(e);
spyOn($location, 'path');
expect($location.path).toHaveBeenCalledWith('http://www.google.com');
}));
This yields
Expected spy path to have been called with [ 'http://www.google.com' ] but it was never called.
To decorate, stub, provide mocks or override any given service, you may use the $provide service.$provide.value, $provide.decorator etc. Documentation here.
Then you can do stuff like this:
var $location;
beforeEach(function() {
module('studentportalenApp', function($provide) {
$provide.decorator('$location', function($delegate) {
$delegate.path = jasmine.createSpy();
return $delegate;
});
});
inject(function(_$location_) {
$location = _$location_;
});
});
...
it('should visit the link in scope.redirectUrl when enter is pressed', inject(function ($rootScope, $compile, $location) {
element = angular.element('<input type="text" goto-on-enter>');
element = $compile(element)($rootScope);
$rootScope.redirectUrl = 'http://www.google.com';
$rootScope.$digest();
var e = jQuery.Event('keypress');
e.keyCode = 13;
element.trigger(e);
$rootScope.$digest();
expect($location.path).toHaveBeenCalledWith('http://www.google.com');
}));
这篇关于如何注入在AngularJS指令单元测试服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！