灰燼集成測試失敗

我有這樣的集成測試：灰燼集成測試失敗

test('can change chord text', function(assert) { 
    this.render(hbs`{{chart-editor-chord chord=chord}}`); 
    this.$().click(); 
    assert.ok(!!this.$('.chord-input').length); 
});

但斷言失敗，分量模板看起來是這樣的：

<div {{action 'changeChord'}} class="measure-chord chord-big"> 
    {{#if chord.editing}} 
     <input type="text" value="{{chord.name}}" class="chord-input"> 
    {{else}} 
     {{chord.name}} 
    {{/if}} 
</div>

和組件代碼：

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    store: Ember.inject.service(), 
    actions: { 
    changeChord() { 
     this.chord.set('editing', true); 
    } 
    } 
});

我正在更新changeChord()動作中的chord模型，它確實如果我在瀏覽器中測試，則工作，但集成測試失敗。那麼，模型中的這種改變是否必須與模板同步呈現？我嘗試在測試中使用wait（），但這沒有什麼區別。那麼我應該如何測試呢？

來源

2017-04-08 rednaw

雖然我想爲你創建一個玩弄，我發現了三件事情：

你在哪裏創建chord模擬你的測試？
您不會將事件發送到正確的html組件。使用this.$('.measure-chord')或this.$('.chord-big')。
而不是this.chord.set你應該使用this.get('chord').set。其實Ember.set(this, 'chord.isEditing', ...)更好。

和獎金：你不需要div包裝，組件爲你做這個。

旋轉因子：

來源

2017-04-08 13:14:01 ykaragol

由於在執行此操作時會發生什麼！我多麼愚蠢的想念jQuery選擇器中的'.measure-chord'類......我以爲我錯過了更深層次的東西。爲什麼'Ember.set（這個，'chord.isEditing'，...）'更好？ 'this.get（'chord'）.set'在我看來看起來更好。你用'div'包裝器是什麼意思？如果我不需要在其上添加任何屬性？ – rednaw

@rednaw在某些情況下，或者您可能想要模擬「和絃」對象的某些測試。當'chord'不再是Ember對象時，'this.set'將不起作用，但是'Ember.set'將會起作用。 – ykaragol

@rednaw你的第二個問題，看看[第二旋轉]（https://ember-twiddle.com/517e36b719eb6e1913ef98c91726f52d/96b90124c54f5a7a264b9cc17719c2f2df4c8505?openFiles=tests.integration.components.chart-editor-chord-test.js%2C ）。這是一個'無標籤組件'的例子。你當然可以通過'attributeBindings'屬性 – ykaragol

它看起來像你的點擊幫手是點擊你的component.js控制的div，而不是模板中的初始div。如果您在點擊幫手指定的div它應該工作：

this.$('.measure-chord').click();

來源

2017-04-08 12:56:18 acorncom

@ykaragol感謝，這是一個手機;-) – acorncom

灰燼集成測試失敗

回答

相關問題