使用Ember cli 2.9我正在制作一个简单的应用程序来转换瑞士法郎到欧元。该应用程序在我的浏览器中手动运行良好,但我为转换器编写的集成测试失败了。它以Ember组件的形式存在,名为home-index
模板:
<h2>INPUT GOES HERE</h2>
{{input value=userInput class="user-input" placeholder="enter your francs please"}}
<button class="convert-button" {{action 'convertInput'}}>CONVERT</button>
<div class="display-output">{{outputNumber}}</div>
组件逻辑:
import Ember from 'ember';
export default Ember.Component.extend({
userInput: "",
outputNumber : 0,
numberifiedInput: Ember.computed('userInput', function() {
let userInput = this.get('userInput');
return parseFloat(userInput);
}),
actions: {
convertInput() {
var input = this.get('numberifiedInput');
var converted = input * 0.93;
this.set('outputNumber', converted);
}
}
});
集成测试:
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
moduleForComponent('home-index', 'Integration | Component | home index', {
integration: true
});
test('should recieve input from user and display output', function(assert) {
assert.expect(1);
this.render(hbs`{{home-index}}`);
this.$(".user-input").val("1");
this.$('.convert-button').click();
assert.equal(this.$(".display-output").text(), "0.93", "should display correct converted amount");
});
当在浏览器中手动使用应用程序时,值正确地从1转换为0.93并显示在div中。然而,集成测试返回"NaN"而不是"0.93"。
当我将测试写入验收测试时,它通过了并给出了正确的结果。这让我相信这是由于使用了异步帮助程序。
然后我尝试重写集成测试,将其封装在导入的wait方法中,如下所示:return wait()
.then(() => {
assert.equal(this.$(".display-output").text(), "0.93", "should display correct converted amount");
});
});
但在整合测试中仍然给出"NaN"作为结果。有人知道为什么会这样吗?
p。很抱歉在代码片段中发布,堆栈溢出代码块是喜怒无常的。
尝试在设置val后触发输入字段的'input'和'change'事件。
$('.user-input').val('1');
$('.user-input').trigger('input');
$('.user-input').change();
请参阅https://github.com/emberjs/ember.js/blob/v2.9.1/packages/ember-testing/lib/helpers/fill_in.js#L15了解验收测试助手fillIn
是如何做的(但没有jQuery)。
如果验收测试是可接受的,那么它可能是测试这类事情的更好方法,因为内置的帮助程序处理通常由用户交互触发的各种事件。