单元测试 angularjs 指令

Question

我想开始为我的 angularjs 项目进行单元测试。这远非直截了当，我觉得这真的很难。我正在使用业力和茉莉花。对于测试我的路线和应用程序依赖项，我很好。但是你会如何测试这样的指令呢？

angular.module('person.directives', []).
directive("person", function() {
return {
    restrict: "E",
    templateUrl: "person/views/person.html",
    replace: true,
    scope: {
        myPerson: '='
    },
    link: function (scope, element, attrs) {

    }        
}

});

例如，我将如何测试是否找到了模板？

Answer 1

这是要走的路https://github.com/vojtajina/ng-directive-testing

基本上，您使用beforeEach 创建、编译和公开一个元素及其作用域，然后模拟作用域变化和事件处理程序并查看代码是否适当地做出反应并更新元素和范围。这是一个非常简单的例子。

假设：

scope: {
  myPerson: '='
},
link: function(scope, element, attr) {
  element.bind('click', function() {console.log('testes');
    scope.$apply('myPerson = "clicked"');
  });
}        

我们希望当用户单击带有指令的元素时，myPerson 属性变为clicked。这是我们需要测试的行为。所以我们将编译后的指令（绑定到一个元素）暴露给所有规范：

var elm, $scope;

beforeEach(module('myModule'));

beforeEach(inject(function($rootScope, $compile) {
  $scope = $rootScope.$new();
  elm = angular.element('<div t my-person="outsideModel"></div>');
  $compile(elm)($scope);
}));

那么你就断言：

it('should say hallo to the World', function() {
  expect($scope.outsideModel).toBeUndefined(); // scope starts undefined
  elm.click(); // but on click
  expect($scope.outsideModel).toBe('clicked'); // it become clicked
});

Plnker here。你需要 jQuery 来做这个测试，来模拟click()。