如何在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的一部分.

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

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

Answer 2

所以这被证明是PhantomJS的一个问题:当元素实际上不在任何地方的文档上时,一些作用于元素的事件似乎不会触发,而只是在内存中(无论如何,这是我的理论).要解决这个问题,我必须使用此函数来触发click元素上的事件:

define(function () {
    return {
        click: function (el) {
            var ev = document.createEvent("MouseEvent");
            ev.initMouseEvent(
                "click",
                true /* bubble */, true /* cancelable */,
                window, null,
                0, 0, 0, 0, /* coordinates */
                false, false, false, false, /* modifier keys */
                0 /*left*/, null
            );
            el.dispatchEvent(ev);
        }
    };
});

这很有用,虽然其他事情都比较困难:我也想编写一个确保给定表单input具有焦点的测试,但是使用PhantomJS几乎不可能获得这个值,因为我猜如果它没有屏幕表示,浏览器就无法集中注意力.任何需要这个的人都可以看看CasperJS,它提供了一些简单的API来满足这些要求.