如何测试加载事件的指令

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并触发click事件，那么一切都如预期的那样工作。这到底是怎么回事？这是测试问题吗？

Answer 1

您应该调用digest通知angular发生了变化：

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

Answer 2

我决定杀死testem，并使用Chrome启动器返回因果报应。现在一切正常。