AngularJS：如何调用事件处理程序并检测测试中的绑定答案

【问题标题】：AngularJS: how to invoke event handlers and detect bindings in testsAngularJS：如何调用事件处理程序并检测测试中的绑定
【发布时间】：2013-07-10 16:14:43
【问题描述】：

我想为各种自定义 angularjs 指令编写单元和 e2e 测试，这些指令将 javascript 事件绑定添加到它们所附加的元素。

在测试中，使用 jQuery 方法很容易模拟 click 和 dblclick 事件。

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

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

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 事件在测试中触发？

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

我怎样才能做到这一点？

【问题讨论】：

标签： unit-testing angularjs angularjs-directive angularjs-e2e

【解决方案1】：

最终找到了真相。要触发使用 jQuery 选择的元素上的事件，显然需要加载 jQuery。问题是，正如here 所解释的，Angular 运行器在没有加载 jQuery 的 IFrame 中运行测试。

但是，您可以扩展 Angular 场景 dsl 以在加载 jQuery 的 e2e 测试的上下文中执行代码。下面的函数使您可以执行任何 javascript 方法，或触发任何事件：

//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 事件：

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

【讨论】：