在 angular e2e 测试中的输入字段上强制 'blur'

Question

我在 angularjs e2e 测试中尝试测试 ng-blur 功能。基本上，当一个字段模糊时，另一个字段中的数据也会（视情况而定）发生变化。

以下是我的e2e测试（[selector]和[selector2]是JQueryselector为了便于阅读。实际select我的代码中的工作正常；我知道这一点是因为它们通过了其他 e2e 测试）：

it("updates sister fields", function () {
    //try to cause a blur using an angular scenario thing
    element(<selector>).val("Tommy");
    applyFunction(<selector>, function(element) {
        element.trigger("blur");
    });

    //try again to cause a blur with query()
    element(<selector>).query(function(element, done) {
        element.blur();
        done();
    });

    //try a third time to blur
    element(<selector>).query(function(element, done) {
        var event = new CustomEven('blur');
        $element.dispatchEven(event);
        done();
    });

    //if the blur has triggered this other element should have expected text
    expect(element(<selector2>).val()).toEqual("expected text");
});

applyFunction 匹配器是在另一个文件中使用以下代码创建的

/*global angular*/
(function () {
    "use strict";
    angular.scenario.dsl("applyFunction", function () {
        return function(selector, fn) {
            return this.addFutureAction('element ' + selector, function($window,    $document, done) {
                fn.call(this, $window.angular.element(selector));
                done();
            });
        };
    });
}());

这三个想法是从 this answer 中找到的，但没有奏效。前两个没有抛出错误，但 expect 失败，因为字段中的数据永远不会更改为预期的文本。所以我很确定这个领域永远不会被模糊。我一遍又一遍地验证了应用程序中的功能。它有效，我只是无法在 e2e 测试中触发模糊。第三个失败，因为它找不到 'CustomEvent'。

在处理这两个选项之前，我也尝试过这些，但它们都抛出未定义的错误，这是我开始搜索的时候。

element(<selector>).trigger("blur");
element(<selector>).triggerHandler("blur");
element(<selector>).blur();

编辑 1：经过多次调试后，我发现模糊被正确触发（导致错误的上述方法 3 从未奏效，但其他两种方法似乎没问题）。实际上，我的 ng-model 并没有被正确更新，所以我的 ng-blur() 中的函数没有以更新任何其他字段的方式触发。

我遇到的问题是因为我正在访问 ng-repeat 中的多个表单字段。重复导致相似领域的 ng-models 被命名为相同的，所以标准的 e2e 测试

input([ng-model]).enter([val])

不可用，因为它会 select 使用 ng-model 的所有字段并更新它们的字段。相反，我使用

element().val()

语法。这（在我使用的场景运行器中，旧版本）没有导致 ng-model 更新。因此，如果您需要访问 ng-repeat 中的单个字段，请使用 'using' 调用。例如

using('.example-parent-class').input('ng-model').enter('text').

Answer 1

感谢大雄让我知道如何正确结束问题。其中大部分是我在问题中的第一次编辑中重复的。

经过多次调试，我发现模糊被正确触发（导致错误的上述方法 3 从未奏效，但其他两种方法似乎没问题）。实际上，我的 ng-model 并没有被正确更新，所以我的 ng-blur() 中的函数没有以更新任何其他字段的方式触发。

我遇到的问题是因为我正在访问 ng-repeat 中的多个表单字段。重复导致相似字段的 ng-models 被命名为相同的，所以标准的 e2e 测试

input([ng-model]).enter([val])

不可用，因为它会 select 使用 ng-model 的所有字段并更新它们的字段。相反，我使用了

element().val()

语法。这（在我使用的场景运行器中，旧版本）没有导致 ng-model 更新。因此，如果您需要访问 ng-repeat 中的单个字段，请使用 'using' 调用。例如

using('.example-parent-class').input('ng-model').enter('text').

所以，我在编辑中没有详细说明 'using'，所以我将尝试在这里阐述我的新理解。 using 调用只是 returns 后续 selection 的较小范围。在我的例子中，我需要将范围限制在 ng-repeat 中的某个 div，这样我就可以通过它的 ng-model 访问正确的输入。

Answer 2

如果您的表单中有更多输入，您可以单击其中一个。所以，模糊效果就会发生。

在 angular e2e 测试中的输入字段上强制 'blur'

Forcing 'blur' on input field in angular e2e test

jquery

angularjs

blur

end-to-end