Emberコンポーネント統合テスト：モデル保存時のinFlightエラー

Question

ニュースレターサブスクリプションを処理するコンポーネントをテストしようとしています。私は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'); 
     }); 
    } 
    } 
}); 

がニュースレター-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"); 
    }); 

}); 

最初のアサーションが機能します。しかし、私はエラーが表示され続けます。

✘アサーションに失敗：inFlight以外のレコードのみをアンロードできます。

ブレークポイントの分析から、this.get（ 'model'）。save（）が呼び出されたときに発生することがわかりました。問題を解決しようとする私の試みはこれまでのところ有効ではありませんでした（つまり、蜃気楼を使用してサーバーの応答を嘲笑）。この文脈でEmber実行ループに問題があります。私はどうにかして処理する必要がありますか？

ありがとうございました！

Answer 1

今日、この問題が発生しました。コアの問題は、アプリケーションが統合テストと単体テストで実行されていないため、記録の保存が実際には機能しないことが原因と考えられます。その周りには2つの方法があります

1. （優先）Sinonを使用して、あなたのコンポーネントに渡すモデルのsave()をスタブ。例えば、

   const record = new Ember.Object({ save: Sinon.spy(() => Ember.RSVP.resolve()) }; 
   this.render(hbs` 
       {{your-component record=record}} 
   `); 
   

2. は、上記のオプションではない場合 - 私の場合、レコードはコンポーネント内で作成されている、とあなたは、渡されたにその作成を抽出するためにしたくないので、方法（クリーナーオプションされるであろう）、あなたが作るために店の動作をオーバーライドすることができます（Kelly Sutton, hereで説明したように）store.scheduleSaveをオーバーライドすることで、ノーオペレーションを保存します。

   this.inject.service('store'); 
   
   this.store.scheduleSave = function(context, resolver) { 
       resolver.resolve(context); 
   }; 
   

この周りの他の方法は確かにあります。もちろん、acceに切り替えるだけでしかし、上記の2つはおそらく最も速い修正です。