2

アタッチされている要素に JavaScript イベント バインディングを追加する、さまざまなカスタム angularjs ディレクティブの単体テストと e2e テストを作成したいと考えています。

テストでは、jQuery メソッドを使用してクリック イベントと dblclick イベントを簡単にシミュレートできます。

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

ただし、マウスオーバー、マウスアウト、およびコンテキストメニュー イベントもバインドしていますが、これらを 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 イベントを発生させるにはどうすればよいですか?

同様に、ディレクティブの単体テストでは、イベント バインディングが要素に関連付けられているかどうかを検出できるようにしたいと考えています。

どうすればこれを達成できますか？

4

1 に答える 1

4

最終的にこれの底に行きました。jQuery を使用して選択された要素でイベントをトリガーするには、明らかに jQuery をロードする必要があります。問題は、こちらで説明されているように、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");
});
于 2013-07-23T09:59:23.530 に答える