在angular directive指令的控制器中测试$ emit

时间:2016-03-02 23:19:43

标签: unit-testing angular-directive

我对在控制器内测试$ emit有点困惑。我正在设置的控制器存在于指令内。我对设置测试的两个部分感到困惑。如何在测试中设置$ emit?我正在使用Jasmine,所以我做了一个

    spyON(scope, '$emit')

我的测试找不到要侦察的对象。这是我的测试。

describe('hero Directive', function () {
    var $compile,
        $rootScope,
        scope,
        element,
        ctrl;

    beforeEach(function () {
        angular.mock.module('ha.module.core');

我正在定义控制器并在注入中设置范围。我编译了html,以便我可以使用该指令。

        angular.mock.inject(function (_$compile_, _$rootScope_, _$controller_) {
            $compile = _$compile_;
            $rootScope = _$rootScope_;
            scope = $rootScope.$new();

我认为错误可能在控制器中,但似乎设置正确。

            ctrl = _$controller_('ExploreHeroController', { scope: scope });

该指令使用templateUrl我希望我可以用mock来测试div并编译它。

            var html = '<div explore-hero></div>';
            element = $compile(angular.element(html))(scope);
            scope.$digest();
        });

    });

    describe('directive controller', function () {
        it('should dispatch call $emit with $methodsBound', function () {
            spyOn(scope, '$emit');

            //expect(scope.$emit).toHaveBeenCalledWith('$methodsBound');
        });
    });

});

emit位于我的指令控制器

var controller = function($scope) {
    $scope.$emit('$methodsBound');
}

1 个答案:

答案 0 :(得分:1)

你的指令创建一个隔离的范围,它调用$ emit,所以你需要定义这个范围:

 var elementScope;
 //beforeEach 
 el = angular.element('<your-directive></your-directive>');
 $compile(el)(scope);
 scope.$digest(); 
 elementScope = el.isolateScope();

 it('should spy isolated scope', function(){
      spyOn(elementScope, '$emit');
      expect(elementScope.$emit).toHaveBeenCalledWith('$methodsBound');
 })