angularjs - 访问外部元素的单元测试 Angular 指令

Question

我有一个自定义指令，它使用属性来指定它修改的另一个控件。

指令定义对象:

{
    restrict: 'E',
    templateUrl: 'myTemplate.html',
    scope: {
        targetId: '@'
    },
    controller: MyController,
    controllerAs: 'vm',
    bindToController: true
}

指令 Controller 上的函数修改目标元素(输入字段)的内容:

function onSelection (value) {
    var $element = $('#' + vm.targetId);

    $element.val('calculated stuff');
    $element.trigger('input');
}

单元测试(Jasmine/Karma/PhantomJS)当前将元素附加到页面。这可行，但看起来有点代码味道。

beforeEach(inject(function($rootScope, $compile) {
    var elementHtml = '<my-directive target-id="bar"></my-directive>' +
        '<input type="text" id="bar">';

    scope = $rootScope.$new();    
    angularElement = angular.element(elementHtml);
    angularElement.appendTo(document.body);  // HELP ME KILL THIS!
    element = $compile(angularElement)(scope);
    scope.$digest();
}));

afterEach(function () {
    angularElement.remove();  // HELP ME KILL THIS!
});

我尝试重写 Controller 函数以避免使用 jQuery；这没有帮助。

如何修改指令或测试以消除appendTo/remove？

Answer 1

最好的办法是将指令迁移到属性而不是元素。这消除了对 target-id 属性的需要，并且您不需要寻找目标元素。

参见http://jsfiddle.net/morloch/621rp33L/

指令

angular.module('testApp', [])
  .directive('myDirective', function() {
    var targetElement;
    function MyController() {
      var vm = this;
      vm.onSelection = function() {
        targetElement.val('calculated stuff');
        targetElement.trigger('input');
      }
    }
    return {
      template: '<div></div>',
      restrict: 'A',
      scope: {
        targetId: '@'
      },
      link: function postLink(scope, element, attrs) {
        targetElement = element;
      },
      controller: MyController,
      controllerAs: 'vm',
      bindToController: true
    };
  });

测试

describe('Directive: myDirective', function() {
  // load the directive's module
  beforeEach(module('testApp'));

  var element, controller, scope;

  beforeEach(inject(function($rootScope, $compile) {
    scope = $rootScope.$new();
    element = angular.element('<input my-directive type="text" id="bar">');
    $compile(element)(scope);
    scope.$digest();
    controller = element.controller('myDirective');
  }));

  it('should have an empty val', inject(function() {
    expect(element.val()).toBe('');
  }));

  it('should have a calculated val after select', inject(function() {
    controller.onSelection();
    expect(element.val()).toBe('calculated stuff');
  }));
});