Ember 组件集成测试：模型保存时出现 inFlight 错误答案

【问题标题】：Ember component integration test: inFlight error on model saveEmber 组件集成测试：模型保存时出现 inFlight 错误
【发布时间】：2017-09-29 09:08:58
【问题描述】：

我正在尝试测试一个处理时事通讯订阅的组件。我想通过在保存发生或未发生后相应地设置隐藏输入的类来测试 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('model').save() 时会发生这种情况。到目前为止，我解决该问题的尝试仍然无效（即使用 Mirage 模拟服务器响应）。在这种情况下，Ember 运行循环是否存在我必须以某种方式处理的问题或其他问题？

感谢您的意见！

【问题讨论】：

标签： ember.js ember-data integration-testing ember-testing

【解决方案1】：

我今天遇到了这个问题；核心问题似乎是，由于该应用程序没有在集成和单元测试中运行，因此保存记录实际上无法正常工作。有两种解决方法：

（首选）使用 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);
};
```

当然还有其他方法可以解决这个问题，当然包括切换到验收测试，但以上两种可能是最快的解决方法。

【讨论】：