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

问题描述

我想为各种自定义 angularjs 指令编写单元和 e2e 测试，这些指令将 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 方法模拟 click 和 dblclick 事件非常容易.

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

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

但是，我还绑定了 mouseover、mouseout 和 contextmenu 事件，并且还没有找到在 e2e 测试中调用这些的方法.下面的代码显示了我正在采取的方法.

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.问题是，正如此处所解释的那样，Angular runner 在没有加载 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.

但是，您可以扩展 angular 场景 dsl 以在加载 jQuery 的 e2e 测试的上下文中执行代码.下面的函数使您可以执行任何 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));
        });
    };
}); 

以下代码使用上述函数在 e2e 测试中触发 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屋！