2016-07-19 13 views
1

実際のユーザー入力をシミュレートするemberコンポーネントのテストを作成しようとしています。たとえば:Emberコンポーネントテストでのユーザー入力のシミュレーション

<div> 
    <input class='js-input' type='text' value='{{ bar }}'> </input> 
    <button class='js-save' type='submit' {{action 'save'}}> 
</div> 

は私のコンポーネントは、現在入力されているものに基づいて別の値を計算するために、また、オンザフライ入力を検証するchangekeyUpイベントを使用しています。

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    bar: null, 
    modelBar: null, 

    updateBar: Ember.on('change', 'keyUp', function() { 
    let bar = this.get('bar'); 
    if (bar.get('notValid')) { 
     bar = null; 
     this.set('bar', ''); 
    } 
    this.set('modelBar', bar); 
    }), 

    actions: { 
    save() { 
     ... save stuff ... 
    } 
    } 
}); 

だから私は」これをシミュレートするために$('.js-input').val('some new value')を使用しています(「レンダリングされたコンポーネントとのやりとり」のhereとして推奨)。私は、テストを実行すると

test('Updates a thing', function(assert) { 
    assert.expect(1); 

    const newState = 'a new state'; 

    this.set('actions.save', (newTaxes) => { 
    assert.ok(true, 'save has been called'); 
    assert.equal(newState, this.get('modelBar'), 'model is updated correctly'); 
    }); 

    this.set('bar', 'initial state'); 

    this.render(hbs` 
    {{my-component 
     baz=baz 
    }} 
    `); 

    this.$('.js-input').val(newState); 
    this.$('.js-input').trigger('change'); 

    this.$('.js-save').click();  
}); 

しかし、changeイベントは、(私がthis.$('js-input').val()を使用している場合、私はそれを見ることができます)this.get('bar')を使用して、入力のための更新された値を取得しません。オブザーバーを追加すると、オブザーバーがプロパティーの更新値を取得することがわかりますが、のカスタム変更イベントが発生した後には、だけが表示されます。

私はEmberの実行ループとrun.nextループでラップすることを試みましたが、それはいずれも助けにはなりませんでした。オブザーバーに戻らずにこの作業を行う方法はありますか? (前回のオブザーバーで使用されていたコンポーネントでは、新しい要件が追加されて複雑になりました)

+0

をあなたがしようとしていることをやりなさい。 – MilkyWayJoe

+0

興味深い!私が将来的に探索するかもしれない何か:) – Hannele

答えて

関連する問題