0

我有这个集成测试：

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);
    }
  }
});

我正在更新操作中的chord模型，changeChord()如果我在浏览器中进行测试，它确实可以工作，但集成测试失败。那么，模型中的这种变化是否必须与模板同步呈现？我尝试在测试中使用 wait() 但这并没有什么不同。那么我应该如何测试呢？

4

2 回答 2

1

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

this.$('.measure-chord').click();
于 2017-04-08T12:56:18.013 回答
1

当我试图为你创造一个旋转时，我发现了三件事：

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

并且奖励：您不需要div包装器，组件会为您执行此操作。

玩弄：

  1. 工作副本
  2. 没有 div
于 2017-04-08T13:14:01.883 回答