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

时间:2015-03-13 17:11:17

标签: ember.js ember-qunit

我单元测试组件,特别是渲染的表单。我很接近这个as described in the Ember Guides

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

这里有趣的是,即使通过触摸他们观察到的属性,计算出的属性似乎也不会重新计算。以后的测试测试渲染 - 只是从组件返回 - 确实通过了。

这是我的测试代码:

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()正在运行,但根据它们计算的属性返回错误的结果。

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

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

(当我对该比较进行false检查时,5 > 2确实获得了console.log。)我是否遗漏了一些可以防止这种情况发生的事情。在检查组件的后续渲染时更新?

这是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更新导致失败。

ETA:来自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()未定义。

1 个答案:

答案 0 :(得分:0)

我通过启动一个新的分支开发(我们的默认分支)并重新运行更新来实现这一点。以下是我的原始传递与有效之间的区别:

  • 更多组件更新,我想只是因为我的第一次尝试已经过了一段时间。 ember-resolverloader.jsember-cli-app-versionember-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()块。