EmberJS -

Question

を入力の上、入力アクションをテストするには、私が持っているEmberJS（2.5.0）次のようなコンポーネント：

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

基本的には、「handleSearch」アクションをトリガーする入力フィールドにEnterキーを押します。そして、私のコンポーネントで、これまでのところ私はこれがあります。

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();と入力すると、enterイベントではなくchangeイベントがトリガーされます。

私は簡単な調査の後、統合テストでエンターイベントをトリガーする解決策を見つけられませんでした。

代わりにkeypressイベントを使ってこの問題を解決し、ハンドラのEnterボタンを検出することができます（jQueryにはenterイベントが存在しませんので、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); 
    } 
    } 
} 

があなたの統合テストでkeypressイベントをトリガするためには、単に使用

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

またはEnterボタンでキー押しイベントを誘発する

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

Answer 2

私は同じ問題に直面している：私は、「入力」トリガしなければならなかったエンバーの（v.2.8）入力コンポーネントのイベントをプログラム的

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

私は解決策

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

を見つけたいくつかのリバースエンジニアリングした後、

Answer 3

あなたは、私ができなかったreturn/enterキー

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