我怎么可以模拟我AngularJS指令测试click事件？ [英] How can I simulate a click event in my AngularJS directive test?

问题描述

我试过以下的<一个格式href=\"https://github.com/vojtajina/ng-directive-testing/blob/master/test/tabsSpec.js\">ng-directive-testing回购对于我写了一个指令。当用户点击一个元素的指令基本上呈现的叠加。这里的指令（简体）：

I've tried following the format of the ng-directive-testing repo for a directive I've written. The directive basically renders an overlay when the user clicks on an element. Here's the directive (simplified):

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');
            });
        }
    };
});

测试我写这个样子的：

The test I'm writing looks like this:

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
    });

});

您可以在我尝试几种方式来触发点击（）链接事件，其中大部分给了测试看未定义错误。

You can see in the test that I try several ways to trigger the click() event on the link, with most of them giving an undefined error.

谁能告诉我，我做错了什么吗？读这听起来是正确的语法的例子，但我的测试运行（通过咕噜声噶）不想打球。

Can anyone tell me what I'm doing wrong here? Reading the examples this sounds like it's the correct syntax but my test runner (Karma via Grunt) doesn't want to play ball.

推荐答案

因此​​，这竟然是与PhantomJS一个问题：一些在要素作用的事件似乎不火的时候，元素实际上不是一个文件在任何地方，只是在内存中（这是我的理论，反正）。要解决此我不得不使用此功能来触发点击上的元素事件：

So this turned out to be a problem with PhantomJS: some events that act on elements don't seem to fire when the elements aren't actually on a document anywhere, but just in memory (that's my theory, anyway). To work around this I had to use this function to trigger click events on elements:

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);
        }
    };
});

这工作，虽然其他事情更难：我也想编写一个测试，确保以一定形式输入具有焦点，但得到这个数值几乎是不可能的使用PhantomJS因为我想浏览器无法使一些重点，如果它没有屏幕重新presentation。任何人都需要这可能看看CasperJS它提供了一个简单的API为其中的一些要求。

This worked, although other things were harder: I also wanted to write a test that ensures a given form input has focus, but getting this value was almost impossible using PhantomJS since I guess the browser can't make something focused if it has no onscreen representation. Anyone needing this could have a look at CasperJS which offers a simple API for some of these requirements.

这篇关于我怎么可以模拟我AngularJS指令测试click事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！