Javascript 使用.$on测试指令

我已经使用.on编写了几个控制器，并且能够成功地测试它们，请参见plunker：

但是，我现在有一个在其链接函数中使用.$on的指令：

app.directive('myDirective', function($rootScope, $timeout) {
    return {
        restrict: 'A',
        replace: true,
        scope: {},
        link: function(scope,element,attrs){

            scope.$on("step1", function(event) {
                $rootScope.$broadcast('step3');
                scope.hidden = false;
                scope.shown = false;
            });
            scope.$on("step2", function(event) {
                scope.msg = '';
                scope.errorCase = false;
                scope.infoCase = false;
            });
            scope.$on("step3", function(event) {
                scope.hidden = true;
            });
        },
        template: 
                        '<div class="wrapper">' +
                            '<p>{{ msg }}</p>' +
                        '</div>'
    };
});

app.directive（'myDirective'，函数（$rootScope，$timeout）{
返回{
限制：“A”，
替换：正确，
作用域：{}，
链接：函数（范围、元素、属性）{
范围：$on（“步骤1”，功能（事件）{
$rootScope.$broadcast（'step3'）；
scope.hidden=false；
scope.show=false；
});
范围：$on（“步骤2”，功能（事件）{
scope.msg=''；
scope.errorCase=false；
scope.infoCase=false；
});
范围：$on（“步骤3”，功能（事件）{
scope.hidden=true；
});
},
模板：
'' +
“{{msg}
”+
''
};
});

我编写了以下测试：

describe('myDirective', function () {
    var $scope, compile, element;

    beforeEach(module('myApp'));

    beforeEach(inject(function ($rootScope, $compile) {
        $scope = $rootScope.$new();
        element = angular.element("<section my-directive></section>");
        $compile(element)($scope);
        $scope.$digest();
    }));

    it('should initialise step1', function (){
        var sub_scope = $scope.$new();
        sub_scope.$emit('step1');
        expect($scope.hidden).toBeFalsy();
        expect($scope.shown).toBeFalsy();
    });
});

description（'myDirective'，函数（）{
var$scope，compile，element；
在每个模块之前（模块（‘myApp’）；
beforeach（注入（函数（$rootScope，$compile）{
$scope=$rootScope.$new（）；
元素=角度。元素（“”）；
$compile（元素）（$scope）；
$scope.$digest（）；
}));
它（'应该初始化步骤1'，函数（）{
var sub_scope=$scope.$new（）；
子范围$emit（'step1'）；
expect（$scope.hidden）.toBeFalsy（）；
expect（$scope.show）.toBeFalsy（）；
});
});

---

但是，测试根本没有运行，因此没有显示错误。我采用了与控制器相同的方法，但是我认为这对于指令是不正确的。有什么建议吗？

您正在根据您的定义为您的指令创建一个新的范围：

app.directive('myDirective', function($rootScope, $timeout) {
    return {
// ... Your code ...
        scope: {}, // This is a new isolated scope for the directive
// ... Your code ...
    };
});

在现有测试中，

$scope

变量是创建指令的父级的范围。您需要通过调用获取测试中指令的范围。见分叉

---

如果有一个不起作用的测试，那就太好了。这种方法是正确的，我的意思是可以在测试事件中广播，以便执行您的指令代码。

it('should initialise step1', function (){
    var directiveScope = element.isolateScope();
    var sub_scope = directiveScope.$new();
    sub_scope.$emit('step1');
    expect(directiveScope.hidden).toBeFalsy();
    expect(directiveScope.shown).toBeFalsy();
});