如何在 AngularJS 中测试广播事件答案

【问题标题】：How can I test Broadcast event in AngularJS如何在 AngularJS 中测试广播事件
【发布时间】：2013-05-21 09:14:33
【问题描述】：

我有一个控制器，它在根作用域上发出广播事件。我想测试一下是否正确触发了广播事件。

我的控制器中的代码如下所示：

   $scope.$watch("pageIndex", function(){
    if($scope.pageIndex == 4)
    {
      // emit social share
      $rootScope.$broadcast('myEvent');
    }
  });

我尝试使用以下代码对其进行测试：

    it('Should call myEvent when pageIndex is 4',function(){
    scope.pageIndex = 4;
    scope.$apply();
    expect(rootScope.$on).toHaveBeenCalledWith('myEvent');
});

但它告诉我代码没有被调用，我已经手动测试了它。然后我尝试了以下代码：

it('Should call myEvent when pageIndex is 4',function(){
    var listener = jasmine.createSpy('listener');
    rootScope.$on('myEvent', listener);
    scope.pageIndex = 4;
    scope.$apply();
    expect(listener).toHaveBeenCalled();
});

但同样的负面结果。有没有办法测试事件是否被广播？

【问题讨论】：

标签： unit-testing angularjs

【解决方案1】：

假设您使用的是 Jasmine，以下内容对我来说非常有用。

... other unit test setup code ...

var rootScope;
beforeEach(inject(function($injector) {
    rootScope = $injector.get('$rootScope');
    spyOn(rootScope, '$broadcast');
}));

describe("my tests", function() {
    it("should broadcast something", function() {
        expect(rootScope.$broadcast).toHaveBeenCalledWith('myEvent');
    });
});

如果您正在广播消息并为其附加对象，您甚至可以测试对象是否符合预期

someObj = { ... something ... };
expect(rootScope.$broadcast).toHaveBeenCalledWith('someEvent', someObj);

【讨论】：

@Mike：你可以用 Mocha/Chai 展示这个解决方案的例子吗？
@RyanConaway - 对于 Chai，您似乎需要一个间谍插件，例如 github.com/chaijs/chai-spies 。对于摩卡咖啡，请查看sinonjs.org。两者的文档都非常清楚地说明了如何使用任一库实现此解决方案。
如何测试具有不同参数的多个调用？
@IntegrityFirst - 只是创造更多的期望（最好在他们自己的独立测试中）
我们怎样才能对 mocha-chai 做同样的事情？我收到错误，因为 spyOn 未定义。

【解决方案2】：

以下是使用 mochaJs 的方法，使用 sinon 进行模拟，使用 chai 进行期望。

describe("broadcast test", function() {
  beforeEach(inject(function($rootScope){
   sinon.spy($rootScope, "$broadcast")
   scope.foo() //this broadcasts the event. $rootScope.$broadcast("testEvent")
 }))

it("broadcasts the event", inject(function($rootScope){
 expect($rootScope.$broadcast.calledWith("testEvent")).to.be.true
}))

})

【讨论】：