Delay tests till Ember.run.later is done

Question

I am trying to get some tests to pass for an ember addon. It was working fine until yesterday I added some code that runs later in the run loops using Em.run.next.

Here is what Im doing in my test.

visit('/').then(function() {
  find('bm-select').click();
  andThen(function() {
    equal(1,1, 'yay');
  });
});

The problem is when click is triggered, the later function is executed after andThen. By that time all my tests are done and it throws error. I am under the impression andThen should wait for all async stuff to finish.

This is what what my code looks like when click is triggered(focusOut event is triggered on click)

lostFocus: function() {
  if(this.get('isOpen')) {
    Em.run.later(this, function() {
      var focussedElement = document.activeElement;
      var isFocussedOut = 
       this.$().has(focussedElement).length === 0 && !this.$().is(focussedElement);
      if(isFocussedOut) {
        this.closeOptions({focus:false});
      }
    }, 0);
  }
}.on('focusOut'),

You can see that it gives an error Uncaught TypeError: Cannot read property 'has' of undefined. This is from the focusOut method. By the time the function executes the components _state is 'destroying' and this.$() returns undefined.

I tried the wait helper and still I am not able to get the tests to work. How is this normally done. I have extracted the tests to run in a bin. Here is the link to it.

Answer 1

After further debugging, the problem is one of tags 'bm-select' has it focusOut event triggered in the teardown method of testing. So by the time the run loop code executes the component is not inDOM.

I just added a hidden input field in the test app. Once I've run all the tests, I set focus to the hidden input field and use the wait test helper. Now all the run loop code is done by the time the tear down method is executed.