Angularjs 如何在指令中对$emit进行单元测试？

如何检查指令的单元测试中是否调用了$emit

我的指令相当简单（为了说明）：

因此，每当属性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");
  });
});

description（'在指令中测试$emit'，函数（）{
var范围；
var元素；
//您需要在测试中指出您的模块
beforeach（函数（）{
模块（“plunker”）；
注入（函数（$rootScope，$compile）{
scope=$rootScope.$new（）；
范围。行=1；
间谍（范围，$emit'）；
element=angular.element（''）；
$compile（元素）（范围）；
});
});
它（'should emit'，function（）{
范围。$digest（）；
scope.row=2；
范围。$digest（）；
预期（范围$emit）。已与（“yolo”）合并；
});
});

这总是会给我一个错误，说明从未调用过作用域.$emit。 范围有问题吗？有人能帮忙吗

---

Plunker:

您的指令创建了一个独立的作用域，该作用域调用了

$emit

，因此您需要监视这个作用域；）

description（'在指令中测试$emit'，函数（）{
var范围；
var元素；
变量元素范围；
在每个模块之前（模块（'plunker'）；
beforeach（注入（函数（$rootScope，$compile）{
scope=$rootScope.$new（）；
scope.row=1；
element=angular.element（''）；
$compile（元素）（范围）；
范围。$digest（）；
elementScope=element.scope（）；
}));
它（'should emit'，function（）{
//安排
spyOn（elementScope，$emit'）；
//表演
作用域$apply（函数（）{
scope.row=2；
});
//断言
期望（elementScope.$emit）.已与（“yolo”）一起调用；
});
});

---

：）

我不确定它对Glepter是如何起作用的（不确定它是否真的起作用）。对我来说不是。问题是指令在输入scope时运行

$new

，因此它在内部创建的作用域和

元素。scope（）

有些不同。您可以检查他们的

$id

字段。因此，监视从

element.scope（）

获得的范围并没有帮助。我有一个笑脸问题，不得不做一个小把戏来让它起作用

下面是我的测试：

    beforeEach(inject(function () {
        scope = $rootScope.$new();

        scope.$apply(function () {
            scope.field = null;
            scope.name = 'nolength';
        });

        spyOn(scope, '$new').and.returnValue(scope);
        spyOn(scope, '$emit');

        var element = angular.element('<my-directive name="name" field="field" title="\'Title\'" ></my-directive>');
        noLengthValidation = $compile(element)(scope);

        scope.$apply();
        elementScope = element.scope();
    }));

以及指令中调用

$emit

的部分。以防万一：

        function validate() {
            scope.validate = 1;
            if (scope.field) {
                if (!isValid()) {
                    scope.$emit('ON_AWASOME_EVENT', {code : scope.name, text : 'Field ' + scope.title + '  is feels bad'});
                } else {
                    scope.$emit('ON_MORE_AWASOME_EVENT', scope.name);
                }

            }
        }

---

投票赞成在一个好的回答中讽刺地使用yolo这个词

    it('The directive should not react on string length if no max-chars attribute presented', function () {
        scope.$apply();
        noLengthValidation.isolateScope().field = 'fieldisssssssveeeeerryyyyyylooooooonnnngggggggggggggggggggggggggggg';
        scope.$apply();
        expect(scope.$emit).toHaveBeenCalledWith('ON_MORE_AWASOME_EVENT', 'nolength');
    });

        function validate() {
            scope.validate = 1;
            if (scope.field) {
                if (!isValid()) {
                    scope.$emit('ON_AWASOME_EVENT', {code : scope.name, text : 'Field ' + scope.title + '  is feels bad'});
                } else {
                    scope.$emit('ON_MORE_AWASOME_EVENT', scope.name);
                }

            }
        }