如何使用angularJS - 卡玛 - 茉莉测试指令的控制器? [英] How to test a directive's controller using angularJS-karma-jasmine?
问题描述
写的 waCarousel
指令范围的变量通过的测试: self.awesomeThings
。预计这一测试通过时, self.awsomeThings.length.toBe(3)
来的是真的?
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)
?
更新:
UPDATE:
推荐答案
编译元素,并呼吁 $消化()后
,您将有机会获得其中包含与 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);
});
});
此外,这里有对角的测试指令,一些有用的链接:
Also, here are some useful links to testing directives in angular:
- Testing Directives
- Testing AngularJS directive controllers with Jasmine and Karma
- Introduction to Unit Test: Directives
这篇关于如何使用angularJS - 卡玛 - 茉莉测试指令的控制器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!