ember.js:使用ajax请求进行验收测试
ember.js:使用ajax请求进行验收测试
提问于 2017-06-23 02:04:34
我正在编写一个验收测试，其中用户填写表单，然后向第三方资源发出ajax请求。我用Ember CLI Mirage模拟了这个请求。
我正在写一个基本的工作示例，在我的测试通过后，我将重构它。我知道我需要将我的请求抽象为服务或实用程序，但我不喜欢在没有有效测试的情况下重构我的代码。
我的代码似乎可以工作，但是，当我返回一个更改了模板中某些内容的结果时，我无法让测试通过。
重要的是要注意:我模拟的第三方API并不是restful的。
下面是mirage的配置：
export default function() {
this.post('/LogonAction', () => {
return {foo: 'bar'};
});
}我还没有设置web服务的规范URL。它应该是一个外部服务。
和我的组件：
import Ember from 'ember';
export default Ember.Component.extend({
result: null,
errors: null,
usernameTextChanged: function() { this.reset(); }.observes('username'),
passwordTextChanged: function() { this.reset(); }.observes('password'),
reset() {
this.set('errors', null);
this.set('result', null);
},
actions: {
sync() {
this.reset();
// TODO abstract out validation and add more use cases
if(this.get('username') === undefined || this.get('password') === undefined) {
this.set('errors', 'Please fill out the form');
}
else {
let params = { userId: this.get('username'), passwd: this.get('password') }
this.set('test', 'foos'); //just checking...
// TODO abstract out into a utility and move config values into config
Ember.$.post('/LogonAction', params).then((r) => {
// When I run tests, this renders to console.
console.log('promise happened 1', r, this.get('result'));
// Fails here. I don't know why.
this.set('result', true);
// This does not execute
console.log('promise happened 2', this.get('result'));
});
}
}
}
});您将看到我向控制台输出了两次，这样我就可以对其进行调试。在我编写测试时，我不确定这是不是正确的调试方式。
这是我的模板：
<form id="logon" {{action 'sync' on='submit'}}>
{{input value=username type="text" class="username" placeholder="Your username"}}
{{input value=password type="password" class="password"}}
<button>Click me</button>
[[{{test}}]] <!-- this is just debugging -->
{{#if result}}
<div id="result">Sync complete</div>
{{/if}}
{{#if errors}}
<div id="result">{{errors}}</div>
{{/if}}
</form>最后，我的测试：
test('logging in', assert => {
server.createList('LogonAction', 0);
visit('/');
console.log(0);
fillIn('input.username', 'foo');
fillIn('input.password', 'bar');
click('button');
console.log(1);
andThen(() => {
// The above console logs have happened.
// It does not have the div#result tag in it!
console.log(find('#logon').html());
assert.equal(find('#result').text(), 'Sync complete'); // fails.
});
});控制台日志(我认为)告诉我，在我断言页面向用户显示结果之前，promise已经被解析。但我不能让这件事通过！一旦我设置了result的值，它就失败了。
如果能帮上忙，非常感谢。
回答 1
Stack Overflow用户
发布于 2017-06-23 06:06:14
我怀疑这可能与运行循环在测试模式中被禁用的事实有关。然而，我预计你会得到以下错误“断言失败:你已经打开了测试模式，这禁用了运行循环的自动运行。你将需要在一次运行中包装任何有异步副作用的代码”，但你说它会默默地失败。您是否可以尝试以下操作:只需将代码this.set('result', true);包装在Ember.run中，如下所示：
Ember.run(()=>{
this.set('result', true);
});我没有时间来设置一个旋转模型来尝试一下代码片段；您已经提供了。很抱歉；如果你设置一个旋转装置，并对我的回答结果给出反馈，我会提供更多帮助。祝好运!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44711937
复制相关文章
相似问题
腾讯云开发者
