angularjs - $emit 上的单元测试 spy

Question

我试图从指令中监视 $emit，但不知何故我无法让 spy “听到”$emit。

这是我的指令 Controller 中的代码:

$scope.$on('send', function () {
    console.log('called');
    $scope.$emit('resultSend', {'ok': true, 'data': ''});
});

这是我的单元测试:

var $rootScope, $compile, elm, element;

beforeEach(inject(function ($injector) {
    $rootScope = $injector.get('$rootScope');
    $compile = $injector.get('$compile');
    elm = angular.element('<test></test>');
    element = $compile(elm)($rootScope);
}));


it('should listen for the send broadcast and emit the resultSend', function () {
    spyOn($rootScope, '$emit');
    $rootScope.$broadcast('send');
    expect($rootScope.$emit).toHaveBeenCalledWith('resultSend');
});

console.log 输出(“叫”)是由 Karma 打印出来的，所以我猜单元测试广播事件确实有效。

这是否与 $emit 不向下广播而是向上广播有关，如果是这样，我如何捕获它，如果不是，我该如何处理这种情况？

Answer 1

根据文档here ，您对 $emit 和 $broadcast 之间差异的理解是正确的。但是，我认为问题在于您对 $scope 和 $rootScope 的使用。您的 $rootScope 将位于作用域层次结构的顶层。我猜测(仅通过查看您的代码片段而无法看到所有代码) Controller 中的 $scope 是一个嵌套 Controller ，这意味着 $scope您的 Controller 中的 是应用的 $rootScope 的子级。

因此，当您的单元测试监视 $rootScope.$emit 函数时，它实际上并不是监视 Controller 的 $scope.$emit()称呼。这两个“范围”是不同的，不是同一件事。因此，您需要模拟为 Controller 提供的 $scope ，然后对其执行 spyOn 。

例如，在您的 beforeEach 中:

var ctrl, scope;

beforeEach(function() {
    module('<INSERT YOUR CONTROLLERS MODULE NAME HERE>'); 
    inject(function($rootScope, $controller) {
        scope = $rootScope.$new();
        ctrl = $controller('<CTRL NAME HERE>', {$scope: scope});
    });
});

这段代码实际上会创建一个“模拟”作用域变量，并将该对象提供给您的 Controller ，然后您可以用它来执行 spy 和其他操作。如:

spyOn(scope, '$emit');
// do whatever triggers the "$emit" call
expect(scope.$emit).toHaveBeenCalledWith('resultSend');

我很确定这应该可以解决您的问题。如果需要更多解释，请告诉我。