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 的(失败)输出:

This is the (FAILED) output from karma:

$ node_modules/karma/bin/karma start test/karma.conf.js
信息 [karma]:Karma v0.12.23 服务器在 http://localhost:8080/
启动信息 [启动器]:启动浏览器 PhantomJS
信息 [PhantomJS 1.9.8 (Linux)]:连接到套接字 U34UATs8jZDPB74AXpqR，ID 为 96802943
PhantomJS 1.9.8 (Linux): 执行 0 of 20 SUCCESS (0 secs/0 secs)
PhantomJS 1.9.8 (Linux) 自动对焦指令应将焦点设置为第一个自动对焦元素失败
预期的间谍焦点已被调用.
PhantomJS 1.9.8 (Linux): 执行 20 of 20 (1 FAILED) (0.156 secs/0.146 secs)

$ 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 不会理解autofocus"是一个指令.因此，在您的代码中:

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 将理解autofocus"是一个指令，并将您创建的所有事件分配给autofocus"正在处理的这个元素.

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屋！