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

问题描述：

我正在测试组件，特别是渲染后的窗体。我接近这个数字as described in the Ember Guides。Ember 1.10升级后渲染的组件测试失败

特别是，该组件具有三个计算属性，这些属性根据支持模型显示渲染元素上的不同类。我正在调整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支票上的比较。）有我丢失的东西会阻止从当我检查组件的后续渲染时更新？

这是烬隙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()是不确定的。

我刚刚将一些问题发布到了ember-mocha回购https://github.com/switchfly/ember-mocha/issues/25，并且您可以看到@rwjblue的回复文档不正确。我只是没有时间去更新它们。 – kiwiupover 2015-03-13 17:55:37

这就解释了为什么'andThen'不起作用，谢谢。仍然不确定为什么测试失败没有他们，虽然现在听起来像是严格遵循指南示例不是构建测试的最可靠方法。 – pjmorse 2015-03-13 18:20:15

答

我通过开发一个新的分支开发（我们的默认分支）并重新运行更新来实现这个工作。下面是我的原始传递和工作的区别：

更多的组件更新，我认为只是因为我第一次尝试已经过去了一段时间。 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升级后渲染的组件测试失败

相关推荐