如何测试加载事件的指令？

Question

所以，我做了这个简单的指令

angular
    .module('cherrytech.common', [])
    .directive('ctOnload', function() {
        return {
            restrict: 'A',
            scope: {
                callback: '&ctOnload'
            },
            link: function(scope, element) {
                element.on('load', function(event) {
                    scope.callback({ event: event });
                });
            }
        };
    });

它运行良好，完全没有问题。当元素完成加载时，使用事件对象调用回调。我将其用于 iframe，但应该适用于支持加载事件的任何元素。

但后来我想测试一下。我正在使用默认配置的 testem，我正在尝试这个简单的测试代码，但无法让它工作：

describe('Directive: ctOnload', function() {
    var element, scope;

    beforeEach(module('cherrytech.common'));

    beforeEach(inject(function($rootScope, $compile) {
        scope = $rootScope;

        element = '<iframe src="about:blank" ct-onload="loadCallback(event)"></iframe>';

        scope.loadCallback = function(event) { console.log(event); };

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

    it('should call the scope callback', function() {
        spyOn(scope, 'loadCallback');
        element.triggerHandler('load');
        expect(scope.loadCallback).toHaveBeenCalled();
    });
});

通常我没有任何问题测试指令，但这个事件回调让我抓狂。无论我做什么，我都无法在测试用例上触发加载事件。如果我用 ng-click 替换 ct-onload 并触发点击事件，那么一切都会按预期进行。这到底是怎么回事？是测试题吗？

Answer 1

你应该打电话给 digest 通知 angular 有些事情发生了变化：

element.on('load', function(event) {
    scope.callback({ event: event });
    scope.$digest();
});

Answer 2

我决定用 Chrome 启动器杀死 testem 并返回 karma。现在一切正常。

如何测试加载事件的指令？

How can I test a directive for a load event?

angularjs

jasmine

angular-directive

testem