如何在指令链接

时间:2016-03-23 21:39:57

标签: javascript angularjs unit-testing karma-jasmine

使用angular 1.4.8和Karma 0.13.19,我想触发链接中定义的$ on回调,然后根据回调得到的数据测试它是否设置了范围属性。

这是我的指示

(function() {
  'use strict';

  angular.module('error').directive('errorPopup', function () {
    return {
        restrict: 'AE',
        replace: true,
        scope: {},
        templateUrl: 'components/error/error_popup-template.html',
        link: function (scope, element, attrs) {
            scope.$on('_REQUEST_ERROR_', function (event, response) {
                scope.error = response;
                console.log('on _REQUEST_ERROR_; scope.error: ', scope.error);
                element.modal();
            });
        }
    };
  });
})();

这是我的测试

describe('Error-Popup Directive', function(){
  var $templateCache,
    scope,
    element,
    elementScope,
    $compile,
    listener = {},
    response;

  beforeEach(module('error'));

  beforeEach(inject(function ($templateCache, $compile, $rootScope) {
    response = {
        'data': {
            'code': 'INVALID_AUTH_TOKEN',
            'message': 'Authentication token is missing'
        }
    };
    $templateCache.put('components/error/error_popup-template.html', '<div>some html</div>');
    element = angular.element('<error-popup></error-popup>');

    scope = $rootScope.$new();

    // elementScope = element.scope;
    spyOn(scope, '$on').and.callFake(function(event, callback) {
        // Store event listeners for later access.
        console.log('event:', event);
        listener[event] = callback;
        console.log('listener['+event+']:', listener[event]);
    });

    $compile(element)(scope);
    scope.$digest();
  }));

  describe('scope.$on(\'_REQUEST_ERROR_\', callback )', function(){
    beforeEach(function(){
        listener['_REQUEST_ERROR_']({},  response);
        console.log('scope:', scope);
    });

    it('should set scope.error to response', function() {
        expect(scope.error).toEqual(response);
    });
  });
});

但我得到了TypeError: 'undefined' is not a function (evaluating 'listener['_REQUEST_ERROR_']({}, response)'

看起来永远不会调用链接函数,因此是范围。$ on。

有谁知道如何实现这一目标? 感谢

1 个答案:

答案 0 :(得分:1)

由于链接功能是在茉莉花谍之前执行的,所以spyon不起作用。

如果您真的想测试它,可以在测试中广播该事件并检查事件处理程序结果。