vendredi 10 juin 2016

Testing ember components with promises

I've hit a wall in testing an ember component.

I have component that has an action

pseudocode

actions: {
   doSomething(){
       this.set('showSpinner', true);
       this.model.serverOperation().then(()=>{
           this.set('showSpinner', false); 
           this.service.doSomething();        
       })
   }
}

in my test, i would like to assert that showSpinner is true when the action is invoked, then becomes false after the promise resolves. So my test looks like (pseudocode, using ember-sinon-qunit):

const deferred = Ember.RSVP.defer();
const modelMock = this.mock(this.model);
const serviceMock = this.mock(this.service);

modelMock.expects('serverOperation').returns(deferred.promise);
serviceMock.expects('doSomething);

this.$('selector').click(); // invokes 'doSomething'

assert(this.showSpinner, true)

deferred.resolve();

assert(this.showSpinner, true)

the problem is, on the deferred.resolve() call, the last assert fires before the then method in the component.

Is there a canonical way to handle this sort of thing in ember?

I tried using async to test, but in that case a few interesting things happen:

  1. I change the final assert to execute in a setTimeout, and then the assert on showSpinner passes, but
  2. the test still exits before then runs (so before the timeout callback fires), and since we are using ember-sinon-qunit, the test harness fails on the serviceMock expectation.

Aucun commentaire:

Enregistrer un commentaire