testing - 如何在 Angular 场景测试的输入中触发 <enter>？

Question

我正在使用 Angular Scenario 测试运行程序编写测试。在传统表单中，我可以在输入中输入文本，但我需要按回车键才能执行查询，而且没有可供点击的按钮。当然有一些简单的方法可以做到这一点，但我不知道它是什么。

input('query').enter('foo bar');
// ... now what?

我尝试用 JQuery 模拟按键，但显示为 this answer表示 JQuery 未加载到 e2e 场景范围内。所以我听从了他的建议(以及 this answer 的建议)来模拟按键:

element('#search_input').query(function(el, done){
    var press = document.createEvent('keypress');
    press.which = 13;
    press.trigger(evt);
    done();
});

但是对于这个 Angular 回复:

NotSupportedError: DOM Exception 9
Error: The implementation did not support the requested type of object or operation.

更新

我意识到一个非常简单的解决方法是在我的表单中包含一个隐藏的提交输入:

<input id="search-submit" type="submit" style="display:none;">

然后在场景中:element('#search-submit').click(); 执行所需的操作。

对于不涉及为了测试而修改 HTML 的更纯粹的解决方案，@florian-f 的答案(以及 this one)通过以下方式提供对 DSL 中 jQuery 的访问:

var $ = $window.$;

可以在那里使用或传递给回调。但是，即使在触发回车键时具有此访问权限，我也无法通过以下方式提交我的表单:

$(selector).trigger($.Event('keypress', { which: 13 }));

这肯定是另一个问题。但我确实找到了 jQuery 的提交函数来解决这个问题:

$(#the_form).submit();

Answer 1

您可以访问 jQuery 的应用程序(iframe 中的运行器)实例:

angular.scenario.dsl('appElement', function() {
  return function(selector, fn) {
    return this.addFutureAction('element ' + selector, function($window, $document, done) {
      fn.call(this, $window.angular.element(selector));
      done();
    });
  };
});

然后你就可以在你的测试中调用jQuery的trigger方法了:

appElement('yourSelector', function(elm) {
  elm.trigger('enter');//or keypress
});