angularjs - 如何在 AngularJS 指令测试中模拟点击事件？

Question

我尝试遵循 ng-directive-testing 的格式 repo 我写的指令。当用户单击某个元素时，该指令基本上会呈现一个覆盖层。这是指令(简化):

mod.directive('uiCopyLinkDialog', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var $elm = angular.element(element);
            element.bind('click', function(event) {
                $elm.addClass('test');
            });
        }
    };
});

我正在编写的测试如下所示:

describe('pre-compiled link', function () {

    beforeEach(mocks.inject(function($compile, $rootScope) {
        scope = $rootScope;
        element = angular.element('<span class="foo" ui-copy-link-dialog="url"></span>');
        $compile(element)(scope);
        scope.$digest();
    }));

    it("should change the class when clicked", function () {
        element.click(); // this returns "'undefined' is not a function"
        element[0].click(); // so does this
        $(elm).click(); // this uses jquery and doesn't *seem* to fail
        waits(500); // hack to see if it was a race condition
        expect(elm.className).toContain('test'); // always fails
    });

});

您可以在测试中看到，我尝试了多种方法来触发链接上的 click() 事件，其中大多数都会给出 undefined 错误。

谁能告诉我我在这里做错了什么？阅读示例，这听起来像是正确的语法，但我的测试运行程序(Karma via Grunt)不想参与其中。

Answer 1

您可以使用triggerHandler，它是JQLite的一部分。

我用它来触发指令上的点击事件...

element = angular.element("<div myDirective-on='click'></div>");
compiled = $compile(element)($rootScope);
compiled.triggerHandler('click');

此博文中提供了完整示例: http://sravi-kiran.blogspot.co.nz/2013/12/TriggeringEventsInAngularJsDirectiveTests.html