Question

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

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

基本上，在输入字段上按Enter键会触发'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事件。

经过短暂的研究后，我找不到在集成测试中触发输入事件的解决方案。

您可以通过使用keypress事件来解决此问题，并检测处理程序中的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

我遇到了同样的问题：我必须触发＆＃34;输入＆＃34;以编程方式记录Ember＆＃39; s（v.2.8）输入组件的事件

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

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

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

Answer 3

您可以使用insert-newline="actionName" input个助手，仅当您按return / enter键

时触发

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

EmberJS - 在输入时测试输入操作

3 个答案: