Ember 구성 요소 통합 테스트 : 모델 저장시 inFlight 오류

Question

뉴스 레터 구독을 처리하는 구성 요소를 테스트하려고합니다. submitForm 함수가 성공적으로 숨겨진 입력 클래스를 설정하여 저장했는지 여부를 테스트하려고합니다. 결과가 저장되거나 발생하지 않아서 통합 테스트에서이를 주장 할 수 있습니다.

<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> 

그리고 다음은

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의 코드입니다 :

newsletter.subscription.js 다음은

내 코드입니다 여기 내 테스트입니다 : 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

오늘이 문제가 발생했습니다. 핵심 문제는 앱이 통합 및 단위 테스트에서 실행 중이 아니기 때문에 저장 기록이 실제로 작동하지 않는다는 것입니다.

1. (선호) 당신이 당신의 구성 요소에 전달하는 모델 save()을 스텁 Sinon를 사용 : 주위 두 가지 방법이 있습니다. 예를 들어,

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

2. 위의 경우 옵션이 아니다 - 레코드가 구성 요소 내에서 생성되고 있기 때문에, 내 경우에는, 당신은 해당 창조의 압축을하지 않는 건네

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

확실히이 주변의 다른 방법이 있습니다 : (청소기 옵션을 것) 방법, 당신이 만드는 가게의 동작을 무시할 수는 (Kelly Sutton, here에 의해 설명 된대로) store.scheduleSave를 재정 의하여, 아무 조합을 절약 할 수 없습니다 물론 acce로 전환하는 것을 포함해서 ptance 테스트,하지만 위의 두 아마도 가장 빠른 수정 프로그램입니다.