тестовый блок для обработчика в ng-change в файле ввода angularjs

Question

Я использовал директиву для добавления функции прослушивателя при изменении входного файла, я собираюсь создать для этого блок модульного теста в jasmine, но я не могу вызвать функцию в блоке.

код модульного теста:

describe('customOnChange', function () {
beforeEach(module('app'));
beforeEach(inject(function ($rootScope, $compile, $parse) {
    this.$rootScope = $rootScope;
    this.compile = $compile;
    this.parse = $parse;

    this.initDirective = function (config) {
        this.scope = this.$rootScope.$new();
        this.scope.listnerFunction = function($event){
            console.log("event called : ",$event);
        };
        this.element = angular.element('<input type="text" name="textField" id="textField" dynamic-data-editor-custom-on-change="listnerFunction($event)" ng-model="testText"/>');
        this.compile(this.element)(this.scope);
        this.$rootScope.$digest();
        $('body').append(this.element);
        this.$rootScope.$digest();
    };
}));

fit('Applied directive successfully', function() {
    this.initDirective();
    spyOn(this.scope,'listnerFunction');
    var ele =  this.element.find("input#textField").eq(0);
    console.log('element', ele);
    ele.triggerHandler('change');
    this.$rootScope.$apply();
    expect(this.scope.listnerFunction).toHaveBeenCalled();
});
});

Код основной директивы:

function () {
    'use strict';
    angular.module('app')
        .directive('customOnChange', function ($parse) {
            return {
                restrict: 'A',
                link: function ($scope, element, attrs, ngModel) {
                    var attrHandler = $parse(attrs.dynamicDataEditorCustomOnChange);
                    var handler = function (e) {
                        $scope.$apply(function () {
                            attrHandler($scope, { $event: e });
                        });
                    };
                    element[0].addEventListener('change', handler, false);
                }
            };
        });
})();

Я получил ошибку при выполнении теста Ожидается, что функция списка шпионов была вызвана.

Пожалуйста, помогите мне разрешить контрольный пример для директивы.

Answer 1

В вашем тесте проблема заключается в следующем: шпион создается после вызова метода listnerFunction, поэтому вы видите ошибку.

Вы должны заменить:

    this.scope.listnerFunction = function($event){
        console.log("event called : ",$event);
    };

на (andCallFake для jasmine < 2)

    this.scope.listnerFunction = 
    jasmine.createSpy("listnerFunction")
    .and.callfake(function($event){ 
        console.log("event called : ",$event);
    });