如何在指令的单元测试中检查是否已调用$emit？
我的指令相当简单(为了说明的目的)：
angular.module('plunker',[])
.directive('uiList',[function () {
return {
scope: {
lengthModel: '=uiList',},link: function (scope,elm,attrs) {
scope.$watch('lengthModel',function (newVal) {
scope.$emit('yolo');
});
}
}
}])
所以每次属性uiList改变时,它都会发出事件.
我的单元测试代码如下：
describe('Testing $emit in directive',function() {
var scope;
var element;
//you need to indicate your module in a test
beforeEach(function () {
module('plunker');
inject(function ($rootScope,$compile) {
scope = $rootScope.$new();
scope.row= 1;
spyOn(scope,'$emit');
element = angular.element('<ul id="rows" ui-list="row">');
$compile(element)(scope);
});
});
it('should emit',function() {
scope.$digest();
scope.row = 2;
scope.$digest();
expect(scope.$emit).toHaveBeenCalledWith("yolo");
});
});
解决方法
你的指令创建一个隔离的范围,它调用$emit,所以你需要监视这个;)
describe('Testing $emit in directive',function() {
var scope;
var element;
var elementScope;
beforeEach(module('plunker'));
beforeEach(inject(function($rootScope,$compile) {
scope = $rootScope.$new();
scope.row = 1;
element = angular.element('<ul id="rows" ui-list="row">');
$compile(element)(scope);
scope.$digest();
elementScope = element.scope();
}));
it('should emit',function() {
// arrange
spyOn(elementScope,'$emit');
// act
scope.$apply(function() {
scope.row = 2;
});
// assert
expect(elementScope.$emit).toHaveBeenCalledWith("yolo");
});
});
