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

时间:2017-09-29 09:08:59

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

我正在尝试测试处理简报订阅的组件。我想通过在保存发生或未发生之后相应地设置隐藏输入的类来测试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运行循环是否存在问题,我不知何故需要处理或不同的事情?

感谢您的投入!

1 个答案:

答案 0 :(得分:0)

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

  1. (首选)使用Sinon将您传递到组件的模型上的save()存根。例如,

    const record = new Ember.Object({ save: Sinon.spy(() => Ember.RSVP.resolve()) };
    this.render(hbs`
      {{your-component record=record}}
    `);
    
  2. 如果以上不是一个选项 - 在我的情况下,因为记录是在您的组件中创建的,并且您不想将该创建提取到传入方法(这将是更清洁的选项),您可以覆盖商店的行为,通过覆盖store.scheduleSave(如Kelly Sutton, here所述)来保存无操作:

    this.inject.service('store');
    
    this.store.scheduleSave = function(context, resolver) {
      resolver.resolve(context);
    };
    
  3. 当然还有其他方法,包括转换到验收测试,但上述两个可能是最快的修复。