我正在尝试测试处理简报订阅的组件。我想通过在保存发生或未发生之后相应地设置隐藏输入的类来测试submitForm函数是否成功保存,以便我可以在集成测试中断言。
这是我的代码:
newsletter.subscription.js :
import Ember from 'ember';
export default Ember.Component.extend({
store: Ember.inject.service(),
displayNotifications: Ember.inject.service(),
didInsertElement() {
this.set('model', this.get('store').createRecord('subscription'));
},
actions: {
submitForm() {
this.get('model').save().then(
(json) => {
this.get('displayNotifications').success({
key: 'subscription.success',
});
this.set('model', this.get('store').createRecord('subscription'));
this.set('subscribed', true);
},
(reason) => {
this.set('subscribed', 'error');
});
}
}
});
以下是 newsletter-subscription.hbs 的代码:
<div class="ui container row newsletter-form">
<div class="ui inverted segment">
<form class="ui form" {{action "submitForm" on="submit"}}>
<div class="ui stackable grid">
<div class="eleven wide right aligned column">
{{input type='string' value=model.email placeholder=(t 'subscription.email')}}
</div>
<div class="five wide inverted left aligned column">
<button type="submit" class="ui fluid secondary button {{unless model.email 'disabled'}}">
{{t 'button.newsletter'}}
</button>
</div>
<input type='hidden' id="debug" class="{{subscribed}}" />
</div>
</form>
</div>
</div>
这是我的测试: newsletter-subscription-test.js
moduleForComponent('newsletter-subscription', 'Integration | Component | newsletter-subscription', {
integration: true
});
test('newsletter-subscription: submitting newsletter-subscription sets subscribed to true', function(assert){
this.render(hbs`{{newsletter-subscription subscribed='notSubscribed'}}`);
assert.equal(this.$('#debug').hasClass("notSubscribed"), true, 'before click, debug element has class notSubscribed');
this.$('input[name=subscription-email]').val("test@example.com");
this.$('button[type=submit]').click();
return wait().then( () => {
assert.equal(this.$('#debug').hasClass("subscribed"), true, "after callback of click ran, debug element has class subscribed");
});
});
第一个断言有效。但后来我不断收到错误:
✘断言失败:您只能卸载不在飞行中的记录。
从断点分析中,我发现当调用this.get(&#39; model&#39;)。save()时会发生这种情况。到目前为止,我尝试解决问题仍然无效(即使用海市蜃楼模拟服务器响应)。在这种情况下,Ember运行循环是否存在问题,我不知何故需要处理或不同的事情?
感谢您的投入!
答案 0 :(得分:0)
我今天遇到了这个问题;核心问题似乎是由于应用程序不在集成和单元测试中运行,因此保存记录实际上无法正常工作。有两种方法:
(首选)使用Sinon将您传递到组件的模型上的save()
存根。例如,
const record = new Ember.Object({ save: Sinon.spy(() => Ember.RSVP.resolve()) };
this.render(hbs`
{{your-component record=record}}
`);
如果以上不是一个选项 - 在我的情况下,因为记录是在您的组件中创建的,并且您不想将该创建提取到传入方法(这将是更清洁的选项),您可以覆盖商店的行为,通过覆盖store.scheduleSave
(如Kelly Sutton, here所述)来保存无操作:
this.inject.service('store');
this.store.scheduleSave = function(context, resolver) {
resolver.resolve(context);
};
当然还有其他方法,包括转换到验收测试,但上述两个可能是最快的修复。