AngularJS：如何调用事件处理程序和检测试验绑定 [英] AngularJS: how to invoke event handlers and detect bindings in tests

问题描述

欲写单元和​​端到端测试关于各种定制angularjs的JavaScript事件绑定添加到它们所连接的元素的指令。

I want to write unit and e2e tests for various custom angularjs directives that add javascript event bindings to the elements they are attached to.

在测试中，它很容易，以模拟使用jQuery方法点击DBLCLICK事件。

In tests, it's easy enough to simulate click and dblclick events using jQuery methods.

element("#id").click();

不过，我也绑定鼠标悬停，鼠标移开和文本菜单的事件，并没有发现一种方式，端到端的测试来调用这些。下面的code说明我采用的方法。

However, I am also binding mouseover, mouseout and contextmenu events, and haven't found a way to invoke these in e2e tests. The code below shows the approach I am taking.

it('should show a context menu when the user right clicks on a grid row', 
    function () {
    //not currently triggering the context menu
    var outerRow = element(".ngRow", "outer row");
    var row = element(".ngRow:first > div", "row");
    angular.element(row).triggerHandler("contextmenu");
    expect(outerRow.attr("class")).toContain("open");
});

我怎样才能得到contextmenu事件在试验火？

How can I get the contextmenu event to fire in tests?

同样地，在单元测试中的指令，我希望能够检测如果事件绑定已附加到元素

Similarly, in unit tests for the directives, I want to be able to detect if an event binding has been attached to an element.

我怎样才能做到这一点？

How can I achieve this?

推荐答案

该杀的这个底部也说不定。触发使用jQuery选定元素的事件，显然jQuery的需要加载。问题是，如所解释的<一个href=\"http://stackoverflow.com/questions/16400720/how-to-execute-jquery-from-angular-e2e-test-scope\">here,的角赛跑运动员在不具有jQuery的加载的IFrame测试。

Got to the bottom of this eventually. To trigger the events on elements selected using jQuery, jQuery obviously needs to be loaded. The problem is that, as explained here, the Angular runner runs the tests in an IFrame which doesn't have jQuery loaded.

不过，可以延长角的场景DSL在jQuery是加载了端到端测试的上下文中执行code。下面的功能可以执行任何JavaScript方法，或火任何事件：

However, you can extend the angular scenario dsl to execute code in the context of your e2e test where jQuery is loaded. The function below enables you execute any javascript method, or to fire any event:

//this function extends the Angular Scenario DSL to enable JQuery functions in e2e tests
angular.scenario.dsl('jqFunction', function () {
    return function (selector, functionName /*, args */) {
        var args = Array.prototype.slice.call(arguments, 2);
        return this.addFutureAction(functionName, function ($window, $document, done) {
            var $ = $window.$; // jQuery inside the iframe
            var elem = $(selector);
            if (!elem.length) {
                return done('Selector ' + selector + ' did not match any elements.');
            }
            done(null, elem[functionName].apply(elem, args));
        });
    };
}); 

以下code使用上述功能火在端到端测试contextmenu事件：

The following code uses the above function to fire the contextmenu event in an e2e test:

it('should show a context menu when the user right clicks on a grid row', function () {
    var outerRow = element(".ngRow:first", "outer row");
    jqFunction(".ngRow:first > div", "contextmenu");
    expect(outerRow.attr("class")).toContain("open");
});

这篇关于AngularJS：如何调用事件处理程序和检测试验绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！