Ember 구성 요소 테스트에서 사용자 입력 시뮬레이션

Question

실제 사용자 입력을 시뮬레이트하는 엠버 구성 요소에 대한 테스트를 작성하려고합니다. 예를 들어 :

는

<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.get('bar')를 사용하여 입력에 대한 업데이트 된 값을 얻을하지 않습니다 (내가 this.$('js-input').val()를 사용하는 경우 내가 그것을 볼 수 있지만). 옵저버를 추가하면 관찰자가 해당 속성의 업데이트 된 값을 얻지 만 사용자 지정 변경 이벤트가 발생한 후에 만 ​​ 이 표시됩니다.

나는 Ember 실행 루프와 run.next 루프에서 랩핑을 시도했지만 그 중 하나도 도움이되지 못했습니다. 옵서버로 다시 돌아갈 필요없이이 작업을 할 수있는 방법이 있습니까? (이 구성 요소는 이전에 관찰자에게 사용되었지만 몇 가지 새로운 요구 사항으로 인해 작업이 더욱 복잡해졌습니다.)