AngularJS:如何测试以元素为重点的指令? [英] AngularJS: how to test directive which gives focus to element?
问题描述
注意:建议的链接是有关服务问题的答案,并且未给出有关如何解决此问题的明确说明
我正在尝试为我的简单AngularJS autofocus
指令设置业力测试:
I'm trying to setup a karma test for my simple (and working) AngularJS autofocus
directive:
app.directive('autofocus', function ($timeout) {
return {
replace: false,
link: function (scope, element, attr) {
scope.$watch(attr.autofocus,
function (value) {
if (value) {
$timeout(function () {
element[0].focus();
console.log('focus called');
});
}
}
);
}
};
});
这是我当前的测试:
describe('The autofocus directive', function () {
var timeout;
beforeEach(module('myApp'));
beforeEach(inject(function($timeout) {
timeout = $timeout;
}));
it('should set focus to first autofocus element', function () {
var form = angular.element('<form />');
var input1 = angular.element('<input type="text" name="first" />');
var input2 = angular.element('<input type="text" name="second" autofocus="true" />');
form.append(input1);
form.append(input2);
spyOn(input2[0], 'focus');
timeout.flush();
expect(input2[0].focus).toHaveBeenCalled();
});
这是karma
的(FAILED)输出:
This is the (FAILED) output from karma
:
$ node_modules/karma/bin/karma开始测试/karma.conf.js
信息[karma]:Karma v0.12.23服务器从http://localhost:8080/
启动 信息[启动器]:启动浏览器PhantomJS
INFO [PhantomJS 1.9.8(Linux)]:连接到ID为96802943的套接字U34UATs8jZDPB74AXpqR
PhantomJS 1.9.8(Linux):已执行0,共20成功(0秒/0秒)
PhantomJS 1.9.8(Linux)自动对焦指令应将焦点设置为第一个自动对焦元素FAILED
预计将被称为间谍重点.
PhantomJS 1.9.8(Linux):执行20之20(失败1次)(0.156秒/0.146秒)
$ node_modules/karma/bin/karma start test/karma.conf.js
INFO [karma]: Karma v0.12.23 server started at http:// localhost:8080/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Linux)]: Connected on socket U34UATs8jZDPB74AXpqR with id 96802943
PhantomJS 1.9.8 (Linux): Executed 0 of 20 SUCCESS (0 secs / 0 secs)
PhantomJS 1.9.8 (Linux) The autofocus directive should set focus to first autofocus element FAILED
Expected spy focus to have been called.
PhantomJS 1.9.8 (Linux): Executed 20 of 20 (1 FAILED) (0.156 secs / 0.146 secs)
只需添加
Just adding
input[0].focus();
在spyOn(input[0], 'focus')
之后,测试当然成功了,但这不是我想要的...
after spyOn(input[0], 'focus')
the test succeeds, of course, but it's not what I want...
最后一个问题是: 我如何业力测试将焦点放在元素上的指令?
The final question is: How do I karma-test a directive which sets focus to an element ?
推荐答案
仅在单元测试中调用angular.element时,Angular将不理解自动对焦"是指令.因此,在您的代码中:
When you call angular.element only in unit test, Angular will not understand the "autofocus" is a directive. Therefore, in your code :
var form = angular.element('<form />');
var input1 = angular.element('<input type="text" name="first" />');
var input2 = angular.element('<input type="text" name="second" autofocus="true" />');
form.append(input1);
form.append(input2);
Angular不会将自动对焦设置为指令,并且不会分配与您已经声明的自动对焦"指令相关的任何内容. 为了在单元测试中做到这一点,您必须使用 $ compile 为它分配一个范围. 您可以更改小提琴以使其通过测试:
Angular will not set autofocus as a directive and will not assign anythings relating to the "autofocus" directive that you have already declared. In order to do this in unit test, you have to use $compile to assign it with a scope. You can change the fiddle to like this to pass the test:
http://jsfiddle.net/ksqhmkqm/1/.
如您所见,我已经创建了一个新范围
scope = $rootScope.$new();
并创建一个新模板
element = angular.element('<form><input type="text" name="first" /><input type="text" name="second" autofocus="true" /></form>');
并将创建的范围分配给此新模板
$compile(element)(scope);
scope.$digest();
通过这种方式,angular将理解自动对焦"是一个指令,并将您创建的所有事件分配给该元素,该元素将在其中进行自动对焦".
With this way, angular will understand the "autofocus" is a directive and assign all the event that you have created to this element that "autofocus" is working on.
我遵循此参考资料进行的焦点事件测试:
The testing for the focus event I have followed this reference:
这篇关于AngularJS:如何测试以元素为重点的指令?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!