如何使用 angularJS-karma-jasmine 测试指令的控制器? [英] How to test a directive's controller using angularJS-karma-jasmine?
问题描述
为 waCarousel
指令范围变量编写一个通过测试:self.awesomeThings
.当 self.awsomeThings.length.toBe(3)
to 为 true 时,期望此测试通过吗?
Write a passing test for the waCarousel
directive scope variable: self.awesomeThings
. Expect this test pass when self.awsomeThings.length.toBe(3)
to is true?
如何正确编写此测试?而是如何注入指令控制器?
How can I properly write this test? rather how do I inject a directives controller?
指令:
angular.module('carouselApp')
.directive('waCarousel', function() {
return {
templateUrl: '../../../views/carousel/wa.carousel.html',
controller: function($scope) {
var self = this;
self.awesomeThings = [1, 2, 3];
return $scope.carousel = self;
}
}
});
单元测试:
describe('waCarousel Unit', function() {
// am I missing a $controller & namespace variable init?
var $compile,
$rootScope;
// Load the myApp module, which contains the directive
beforeEach(module('carouselApp'));
// Store references to $rootScope and $compile and $controller
// so they are available to all tests in this describe block
beforeEach(inject(function(_$compile_, _$rootScope_, _$controller_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$compile = _$compile_;
$rootScope = _$rootScope_;
$controller = _$controller_;
// WaCarouselCtrl = $controller('WaCarouselCtrl', {
// $scope: scope
// });
}));
it('should have a list of awesomeThings', function() {
// This wont pass
expect(scope.awesomeThings.length).toBe(3);
});
});
这就是我对典型视图而不是指令的处理方式:
describe('Controller: MainCtrl', function() {
// load the controller's module
beforeEach(module('carouselApp'));
var MainCtrl,
scope;
// Initialize the controller and a mock scope
beforeEach(inject(function($controller, $rootScope) {
scope = $rootScope.$new();
// !!*** this is how I would inject the typical controller of a view **!! //
MainCtrl = $controller('MainCtrl', {
$scope: scope
});
}));
it('should attach a list of awesomeThings to the scope', function() {
expect(scope.awesomeThings.length).toBe(3);
});
});
我如何合并这两个概念,以便我可以期待 self.awesomeThings.length).toBe(3)
?
How do I merge these two concepts so that I can expect self.awesomeThings.length).toBe(3)
?
更新:
推荐答案
编译 元素,然后调用 $digest()
,您将可以访问包含 carousel
对象和 awesomeThings
数组的范围:
Compile the element, and after calling $digest()
, you will have access to the scope which contains carousel
object with awesomeThings
array:
describe('waCarousel Unit', function() {
var scope;
beforeEach(module('carouselApp'));
beforeEach(inject(function($rootScope, $compile) {
var element = '<test></test>';
scope = $rootScope.$new();
element = $compile(element)(scope);
scope.$digest();
}));
it('should have a list of awesomeThings', function() {
expect(scope.carousel.awesomeThings.length).toBe(3);
});
});
此外,这里有一些有用的链接,可以在 angular 中测试指令:
Also, here are some useful links to testing directives in angular:
这篇关于如何使用 angularJS-karma-jasmine 测试指令的控制器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!