如何以角度测试事件?

时间:2013-03-07 13:25:39

标签: angularjs unit-testing javascript-events angularjs-directive jasmine

我需要测试事件是否正确发出或广播,并手动触发事件。

最好的方法是什么?

3 个答案:

答案 0 :(得分:121)

如果您只需要对事件触发和捕获进行一些测试,我就是这样做的。为了确保某个事件被触发($emit - ed或$broadcast - ed),间谍是可行的方法。您需要引用将调用$emit$broadcast的范围,然后执行以下操作:

spyOn(scope, "$emit")
//run code to test
expect(scope.$emit).toHaveBeenCalledWith("MY_EVENT_ID", other, possible, args);

如果您不需要或不想担心$emit传递的参数,可以在$on上加$rootScope并设置标记知道事件已经发出。像这样:

var eventEmitted = false;
$rootScope.$on("MY_EVENT_ID", function() {
   eventEmitted = true;
});
//run code to test
expect(eventEmitted).toBe(true);

为了测试捕获事件时运行的功能($on),它更容易一些。只需从$rootScope函数中获取inject,然后发送所需的事件。

$rootScope.$broadcast("EVENT_TO_TEST", other, possible, args);
//expects for event here

现在,我想这个事件处理将发生在指令或控制器(或两者)中。有关设置指令测试的信息,请参阅https://github.com/vojtajina/ng-directive-testing。有关设置控制器测试的信息,请参阅https://github.com/angular/angular-phonecat/blob/master/test/unit/controllersSpec.js#L27

希望这有帮助。

答案 1 :(得分:0)

以下是您应该遵循角度JS

中的$ broadcast事件的步骤

在注入初始化rootScope和范围存根时,如下所示:

var rootScope;
var scopeStub = beforeEach(function() {
    inject(function($rootScope, _$controller_) {
        rootScope = $rootScope;
        scopeStub = $rootScope.$new();
        $controller = _$controller_;
    });
});

使用rootScope创建控制器后引发事件,如下所示:

rootScope.$broadcast('eventName', parameter1);

答案 2 :(得分:0)

我们将这个sintax用于A1

=========== Controller ========
    var vm = this;
    $scope.$on('myEvent', function(event, data){
        console.log('event number', data.id);
    });
============ Test =============
 it('should throw myEvent', function() {
    var data = {};
    $scope.$broadcast('myEvent', {id:1});
    $scope.$broadcast('myEvent', {id:2});
    $scope.$broadcast('myEvent', {id:3});
});

============ Output ============
Chrome LOG: '--------------------------------------------'
Chrome LOG: 'event number', 1
Chrome LOG: 'event number', 2
Chrome LOG: 'event number', 3