Can't figure out how to wrap function in Ember run loop

Question

I have a component that integrates 2 third-party libraries, imagesLoaded and Isotope.

I get conflicting test failures when running tests in the browser and cli mode. The error is:

Error: Assertion Failed: You have turned on testing mode, which disabled the run-loop's autorun. You will need to wrap any code with asynchronous side-effects in a run

or

TypeError: 'undefined' is not an object (evaluating 'self.$().isotope')

When I try to wrap callbacks in an ember run loop, they pass in cli-mode, but then fail in browser mode. I can't seem to find the right combination. The issue seems to happen in the callback of imagesLoaded, as if I remove that plugin, it seems to pass fine.

I've tried multiple combinations, but here is my latest code. If anyone has insight on how to properly use the run loop in this component, that would be helpful.

handleLoad: function() {
  let self = this;

  Ember.run.scheduleOnce('afterRender', this, function(){      
    self.$().imagesLoaded( function() {

        Ember.run(function() {
          self.$().isotope({itemSelector: ".card-container"});
          self.$().isotope('shuffle');
        });

    }); // imagesLoaded
  }); // Ember.run

}.on('didInsertElement')

Answer 1

You'll have to wrap your existing code in a

Ember.run(function () {
//  Ember.run.scheduleOnce('afterRender....
});

as this tells Ember where the run loop starts and ends - in production/development this is done for you by Ember itself, but in testing you have to wrap it.

As an alternative you can start & end a run loop manually by calling it explicitly (see the API Docs):

Ember.run.begin() // <-- tell Ember that your starting a run loop

//Ember.run.scheduleOnce('afterRender', ...
//more ember run loops here

Ember.run.end(); // <-- tell Ember that the run loop ends here