使用 .$on 测试指令

Question

我已经使用 .$on 编写了几个控制器并且能够成功地测试它们，请参阅 plunker：http://plnkr.co/edit/8cwcdPc26PVAURmVFR8t?p=preview

但是，我现在有一个在其 link 函数中使用 .$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>'
    };
});

我写了下面的测试：

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();
    });
});

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

Answer 1

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

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

在您现有的测试中，您的 $scope 变量是创建指令的父级的范围。您需要通过调用 'isolateScope'. See forked plunker

来获取测试中指令的范围

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();
});

使用 .$on 测试指令

Testing a directive with .$on

javascript

jasmine

angularjs

angularjs-directive

karma-jasmine