EmberJS - 测试输入动作

Question

我有一个类似于以下内容的 EmberJS (2.5.0) 组件：

{{input type="text" value=searchValue enter='handleSearch'}}

基本上，在输入字段上按回车键应该会触发 'handleSearch' 操作。在我的组件中，到目前为止我有这个：

searchValue: null,
actions: {
  handleSearch() {
    var searchValue = this.get('searchValue');
    var submitSearch = this.get('submitSearch');
    console.log('Search term entered: ', searchValue);
    if (submitSearch) {
      submitSearch(searchValue);
    }
  }
}

并且通过以下方式调用组件：

{{my-component submitSearch=(action 'externalAction')}}

一切正常，但我在实际测试时遇到了问题。

这是我的集成测试（伪复制自 the guide）：

test('search input', function(assert) {
  this.set('externalAction', (actual) => {
    console.log('in external action');
    assert.equal(actual, 'hithere');
  });
  this.render(hbs`{{universal-header-search submitSearch=(action externalAction)}}`);
  this.$('input').val('hithere');
  this.$('input').change();
});

问题是，我的 handleSearch 操作处理程序从未被触发。那么如何让我的 input 字段在我的集成测试中触发处理程序呢？我也试过 this.$('input').submit() 和 this.$('input').trigger('change')，但似乎都没有做任何事情。

Answer 1

this.$('input').change(); 触发的是 change 事件，而不是 enter 事件。

经过短暂的研究，我还没有找到在集成测试中触发 enter 事件的解决方案。

您可以通过使用按键事件来解决这个问题，并在您的处理程序中检测回车按钮（回车事件在 jQuery 中不存在，所以我认为 ember 做同样的事情).要在您的处理程序中获取事件，您不能使用 ember 输入助手：

<input type="text" value={{searchValue}} onkeypress={{action "handleSearch"}} />

您的处理人：

handleSearch(event) {
  if(event.keyCode === 13) { //check if enter button was pressed
    var searchValue = this.get('searchValue');
    var submitSearch = this.get('submitSearch');
    console.log('Search term entered: ', searchValue);
    if (submitSearch) {
      submitSearch(searchValue);
    }
  }
}

要在集成测试中触发按键事件，只需使用

this.$('input').keypress();

或者使用回车键触发按键事件

var e = jQuery.Event("keypress");
e.which = 13; //enter button code
e.keyCode = 13;
$('input').trigger(e);

Answer 2

我遇到了同样的问题：我不得不以编程方式触发 Ember 的 (v.2.8) 输入组件的 "enter" 事件

{{input ... enter=(action "someAction")}}

经过一些逆向工程，我找到了解决方案

const e = Ember.$.Event("keyup");
e.which = 13;
e.keyCode = 13;
Ember.$('input').trigger(e);

Answer 3

您可以使用 input 助手的 insert-newline="actionName"，它只会在您按下 return/enter 键时触发

<input {{insert-newline="actionName"}}>

EmberJS - 测试输入动作

EmberJS - testing input action on enter

integration-testing

ember.js