我遇到了一些运行验收测试的问题,其中DOM点击会触发对更新DOM的计算属性的更新。
我用this demo repo愚弄了我的问题。
我有一个基本模板
<!-- app/templates/application.hbs -->
<a href='#' {{action 'upperNames' 'upper'}}>Show UPPER</a>
<div class="name-container">
{{#each names as |name|}}
<p>{{name}}</p>
{{/each}}
</div>
动作击中一个控制器,只需设置一些道具并触发计算属性
// app/controllers/application.js
export default Ember.Controller.extend({
fakeService: Ember.inject.service('fake'),
update: null,
names: Ember.computed('fakeService.names.@each', 'update', function() {
var names = this.get('fakeService.names');
if (!names || !this.update) {
return null;
}
return names.map(name => name.toUpperCase() + ' - ' + this.update);
}),
actions: {
upperNames: function(update) {
// I'd normall update this service via a different component
// but do it here to simplify sample
Ember.run(() => {
this.get('fakeService').set('upper', update);
this.set('update', update);
});
}
}
});
应用程序正常运行。
如果我尝试运行验收测试,它总是会失败
test('click and display names', function(assert) {
visit('/');
click('a[href=#]');
andThen(function() {
waitFor(function() {
assert.equal(find('.name-container').children().length, 4);
});
});
});
这是HTML runner
中的输出// test failure
failed@ 1033 ms
Expected: 4
Result: 0
我甚至设置了一个非常长的超时并点击了我的测试页面上显示的应用程序中的链接并且没有得到任何结果。我可以从控制器和服务中看到所有控制台日志,但不会发生DOM更新。
我猜测我对QUnit不太熟悉或者使用ember-cli进行验收测试并且我做错了什么,但我不确定。
任何正确方向的指导都会有所帮助。
谢谢!