Ember 点击事件后集成测试失败

Question

我有这个集成测试：

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() 但这没有什么不同。那么我该如何测试呢？

Answer 1

看起来您的点击助手正在点击您的 component.js 控制的 div 而不是模板中的初始 div。如果您在点击助手中指定 div 它应该可以工作：

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

Answer 2

当我试图为你创造一个小游戏时，我发现了三件事：

您在测试中在哪里创建 chord 模拟？
您没有将事件发送到正确的 html 组件。使用 this.$('.measure-chord') 或 this.$('.chord-big')。
您应该使用 this.get('chord').set 而不是 this.chord.set。实际上 Ember.set(this, 'chord.isEditing', ...) 更好。

还有好处：您不需要 div 包装器，组件会为您完成。

转折：

Ember 点击事件后集成测试失败

Ember integration test fails after click event

ember.js

ember-testing