单元测试angularjs指令

我想开始为我的angularjs项目进行单元测试。这远非直截了当，我觉得这很困难。我正在使用Karma和Jasmine。为了测试我的路线和应用程序依赖关系，我很好。但是，你如何测试这样的指令？单元测试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) { 

    }   
}

}）;

如何我会测试实例模板被发现？

来源

2013-04-16 Sam

有在测试指令的视频，可以帮助 - http://www.youtube.com/watch?v=rB5b67Cg6bc – Neil

这里是去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()。

来源

2013-04-16 12:46:19

作为模板HTML，用于动态加载到$ templateCache。你可以只使用html2js因缘预处理器这归结于添加模板“*。html的”您的文件在文件conf.js 以及预处理程序= { “*。html的”：“html2js” } ; 并在您的js测试文件中指定htmls为模块 – Lior

单元测试angularjs指令

回答

相关问题