1
実際のユーザー入力をシミュレートするemberコンポーネントのテストを作成しようとしています。たとえば:Emberコンポーネントテストでのユーザー入力のシミュレーション
<div>
<input class='js-input' type='text' value='{{ bar }}'> </input>
<button class='js-save' type='submit' {{action 'save'}}>
</div>
は私のコンポーネントは、現在入力されているものに基づいて別の値を計算するために、また、オンザフライ入力を検証するchange
とkeyUp
イベントを使用しています。
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ループでラップすることを試みましたが、それはいずれも助けにはなりませんでした。オブザーバーに戻らずにこの作業を行う方法はありますか? (前回のオブザーバーで使用されていたコンポーネントでは、新しい要件が追加されて複雑になりました)
をあなたがしようとしていることをやりなさい。 – MilkyWayJoe
興味深い!私が将来的に探索するかもしれない何か:) – Hannele