灰烬集成测试失败

我有这样的集成测试：灰烬集成测试失败

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

灰烬集成测试失败

回答

相关问题