Ember 1.10 升级后渲染组件测试失败

Question

我正在对组件进行单元测试，尤其是呈现的表单。我正在接近这个 as described in the Ember Guides。

特别是，该组件具有三个计算属性，它们根据支持模型在呈现的元素上显示不同的类。我正在调整 Ember.run() 块中的属性，然后再次查看渲染的组件。

这里有趣的是，即使我正在触摸它们观察到的属性，计算的属性似乎也没有重新计算。稍后不测试渲染的测试 - 只是来自组件的 return - 确实通过了。

这是我的测试代码：

moduleForComponent('wizard-tab', "Component - WizardTab", {
  setup: function () {
    this.tab = this.subject({ step: 2, stepCompleted: 1, tab: tabs.all()[1] });
  }
});

test('#render', function () {
  let tab = this.tab;
  ok(this.$().find('span.wizard-tab-detail').length, "Active tab has a detail span"); // Passes
  // Note that both of the additional states observe stepCompleted
  // so I need to touch that to get them to recalculate
  Ember.run( function () {
    tab.set('stepCompleted', 2);
    tab.set('tab', WizardTab.all()[4]);
  });

  ok(this.$().find('span.wizard-tab-icon-disabled').length, "Future tabs have a disabled class"); // Fails

  Ember.run( function () {
    tab.set('stepCompleted', 3);
    tab.set('tab', WizardTab.all()[1]);
  });

  ok(this.$().find('span.wizard-tab-icon-done').length, "Inactive tabs have a done class"); // Fails
});

第一个断言通过，接下来的两个失败。使用 console.log 语句我验证了 set() 正在工作，但是从它们计算的属性是 returning 错误的结果。

这是计算得出的属性定义之一：

  disabled: function() {
    return this.get('tab.stepNumber') > (this.get('stepCompleted') + 1);
  }.property('stepCompleted')

（当我输入 console.log 检查该比较时，我确实得到了 false for 5 > 2。） 我是否遗漏了什么可以防止当我检查组件的后续渲染时更新？

这是 ember CLI 0.2.0、Ember 1.10.0 和 ember-cli-qunit 0.3.8。

ETA: 可能相关：此测试通过了 Ember 1.8 和 ember-cli-qunit 0.3.1。这是 Ember CLI 0.2.0 的更新以及随附的 Ember 和 ember-cli-qunit 更新导致失败。

（预计到达时间： kiwiupover 在下面的评论中指出，下面的这一部分与问题无关；指南可能没有显示执行此操作的最佳当前方法。）

请注意指南使用类似的模式：

test('changing colors', function() {

  // this.subject() is available because we used moduleForComponent
  var component = this.subject();

  // we wrap this with Ember.run because it is an async function
  Ember.run(function() {
    component.set('name','red');
  });

  // first call to $() renders the component.
  equal(this.$().attr('style'), 'color: red;');

  // another async function, so we need to wrap it with Ember.run
  Ember.run(function() {
    component.set('name', 'green');
  });

  equal(this.$().attr('style'), 'color: green;');
});

我尝试将第二个和第三个断言包装在 andThen() 中，但这引发了错误 - andThen() 未定义。

Answer 1

我通过启动一个新的开发分支（我们的默认分支）并重新运行更新来完成这项工作。以下是我的原始通行证与有效通行证之间的差异：

更多的组件更新，我想只是因为自从我第一次尝试以来已经过去了一段时间。 ember-resolver、loader.js、ember-cli-app-version 和 ember-cli-dependency-checker 都上升了。我不知道这些是否重要，但它们确实发生了变化。
我认为，关键部分是将三个测试隔离在单独的测试块中并且在 Ember.run() 块中为每个使用不同测试的测试更新主题来自设置组件的属性值。

以下是三个测试通过后的样子：

moduleForComponent('wizard-tab', "Component - WizardTab", {
  setup: function () {
    this.tab = this.subject({ step: 2, stepCompleted: 1, tab: WizardTab.all()[1] });
  }
});

test('Rendered active tabs have a detail span', function () {
  let tab = this.tab;
  ok(this.$().find('span.wizard-tab-detail').length, "Active tab has a detail span");
});

test('Rendered future tabs have a disabled class', function () {
  let tab = this.tab;
  Ember.run( function () {
    tab.set('step', 2);
    tab.set('stepCompleted', 2);
    tab.set('tab', WizardTab.all()[4]);
  });
  ok(this.$().find('span.wizard-tab-icon-disabled').length, "Future tabs have a disabled class");
});

test('Rendered inactive tabs have a done class', function () {
  let tab = this.tab;
  Ember.run( function () {
    tab.set('step', 2);
    tab.set('stepCompleted', 3);
    tab.set('tab', WizardTab.all()[1]);
  });
  ok(this.$().find('span.wizard-tab-icon-done').length, "Inactive tabs have a done class");
});

我相信最后的改变——从一个测试和一些 Ember.run() 块移动到三个——才是真正做到的。我在模板中使用了一些 {{log value}} 行来查看哪些值被发送到模板，并且它使用了 setup 块中的主题所有三次，直到我添加了 Ember.run()块。

Ember 1.10 升级后渲染组件测试失败

Rendered component test fails after Ember 1.10 upgrade

ember.js

ember-qunit