Question

注意：建议的链接是对服务问题的回答，并未就如何解决此问题给出明确说明

我正在尝试为我的简单（和工作）AngularJS autofocus指令设置业力测试：

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服务器从http：// localhost：8080 /
开始   INFO [启动器]：启动浏览器PhantomJS
  INFO [PhantomJS 1.9.8（Linux）]：连接到套接字U34UATs8jZDPB74AXpqR，ID为96802943
  PhantomJS 1.9.8（Linux）：执行20 of SUCCESS 0秒（0秒/ 0秒）
  PhantomJS 1.9.8（Linux）自动对焦指令应将焦点设置为第一个自动对焦元素FAILED
              预计间谍焦点已被调用。
  PhantomJS 1.9.8（Linux）：执行20 20（1失败）（0.156秒/ 0.146秒）

只需添加

input[0].focus();

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

最后一个问题是： 如何对一个将焦点设置为元素的指令进行业力测试？

Answer 1

当您仅在单元测试中调用angular.element时，Angular将无法理解＆＃34;自动对焦＆＃34;是一个指令。因此，在您的代码中：

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不会将自动对焦设置为指令，也不会分配与＆＃34; autofocus＆＃34;相关的任何内容。您已经声明的指令。为了在单元测试中执行此操作，您必须使用 $ compile 为其分配范围。您可以将小提琴改为像这样通过测试：

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();

通过这种方式，角度将理解＆＃34;自动对焦＆＃34;是一个指令，并将您创建的所有事件分配给此元素＆＃34; autofocus＆＃34;正在努力。

对焦点事件的测试我遵循了这个参考：

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

AngularJS：如何测试赋予元素焦点的指令？

1 个答案: