Имитация пользовательского ввода в тестах компонентов Ember

Question

Я пытаюсь написать тесты для компонента 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 ... 
    } 
    } 
}); 

Так я» ve использовал $('.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, и это тоже не помогло. Есть ли способ сделать эту работу, надеюсь, без необходимости возвращаться на наблюдателей? (Компонент ранее использовал наблюдателя, но некоторые новые требования усложнили ситуацию.)

Answer 1

Я нашел пару способов исправить это, в зависимости от вашего уровня комфортабельности. К сожалению, ни один из них не включал в себя изменения просто для самих тестов, поэтому я все равно буду рад услышать, есть ли у кого-то лучшее решение.

One: Закрепить проблема Jquery причины с более JQuery:

updateBar: Ember.on('change', 'keyUp', function() { 
    ... validate bar ... 
    this.set('modelBar', this.get('bar') || this.$('.js-input').val()); 
}), 

Я вроде нормально с этим, так как он должен только для целей тестирования. Вы можете беспокоиться о bar, имеющем предыдущее значение, но в моем случае он всегда шел от нуля до значения, поэтому || был достаточным индикатором.

Два: Вернитесь к наблюдателю (вздох). Кажется, что хотя событие change не получает обновленное значение bar, наблюдатель делает это, но только после событие изменения.

observerBar: Ember.observer('bar', function() { 
    if (!this.get('suspendObserver')) { 
    this.set('suspendObserver', true); 
    this.updateBar(); 
    this.set('suspendObserver', false); 
    } 
}), 

семафора необходимо было в моем случае, потому что updateBar бы очистить bar если вход был недействителен.

Answer 2

Я считаю, это потому, что bar не привязан к элементу <input>. Поэтому, даже если вы звоните this.$('.js-input').val(newState), bar не изменится. Затем вызов this.$('.js-input').trigger('change') вызовет updateBar, но не получит ожидаемого результата.

Попробуйте это:

// template.hbs 
<input class='js-input' type='text' value={{bar}} onchange={{action "handleChange" value="target.value"}}> 

// component.js 
actions: { 
    handleChange(value) { 
    // Your logic here -- value is the new value of your input 
    } 
}