AngularJS:如何测试将焦点放在元素上的指令？

Question

注意:建议的链接是对有关服务的问题的回答，并没有就如何解决此问题给出明确的解释

我正在尝试为我的简单(和工作)AngularJS autofocus 指令设置 karma 测试:

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

$ 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)

---

只是添加

input[0].focus();

在 spyOn(input[0], 'focus') 之后，测试当然成功了，但这不是我想要的...

---

最后一个问题是:我如何对将焦点设置到元素的指令进行 karma 测试？

Answer 1

当你只在单元测试中调用 angular.element 时，Angular 不会理解“autofocus”是一个指令。因此，在您的代码中:

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 为其分配范围。您可以将 fiddle 更改为这样以通过测试:

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”正在处理的这个元素。

焦点事件的测试我遵循了这个引用:

How do I check if my element has been focussed in a unit test