Ember acceptance test andThen() doesn't wait until scroll events are complete

Question

I need an emberJs acceptance test to be able to scroll to a certain point in the page and only then assert things about the page.

Both of these functions,

Ember.$('body').scrollTop(1000);

window.scroll(0,1000);

when followed by an

andThen(()=>{
    console.log('body', Ember.$('body').scrollTop());
}) 

print out that the body scrollTop position is at 108. I need it to be at 1000.

The only way I can get to the moment where body scrollTop is at 1000 is when I use this callback so far:

Ember.$('body').animate({scrollTop: 1000}, () => {
  console.log('body', Ember.$('body').scrollTop());
  staticWiz.assertHasGoToTopButton(true);
});

The problem here is that none of the test stuff exists by the point where this callback happens. I can't assert anything.

If I try to use assert.async() and done() with this callback, it makes it fire prematurely when the body scrollTop() is at 108:

const done = assert.async();
Ember.$('body').animate({scrollTop: 1000}, () => {
    console.log('body', Ember.$('body').scrollTop());
    staticWiz.assertHasGoToTopButton(true);
    done();
});

If I set a recurring timeout as a way to check the scroll position, it just stays at the same position of 108 forever.

const done = assert.async();
window.scroll(0, 1000);
const checkScroll = () => {
  console.log('body', Ember.$('body').scrollTop());
  if (Ember.$('body').scrollTop() === 1000) {
    staticWiz.assertHasGoToTopButton(true);
    done();
    return;
  }
  setTimeout(checkScroll, 1000);
};
checkScroll();

So. Any ideas? Has anyone gotten this working before for them, in an instance where you can't just have any degree of scrolling but need a specific number with an Emberjs acceptance test?

Update: Coworker just realized that the test page body is getting scrolled by the test instead of the nested app body inside the testing page. The 'body' scroll watcher in our app wouldn't pick up a scroll inside the testing page's app window. Not sure where to go from there.

Answer 1

One way to make this work is to use the low level waiter functionality within Ember.

See: http://emberjs.com/api/classes/Ember.Test.html#method_registerWaiter

Here's basically how you would use it:

function finishedScrolling() {
  return Ember.$('body').scrollTop() === 1000;
}

Ember.Test.registerWaiter(finishedScrolling);

Ember.$('body').animate({scrollTop: 1000});

andThen(function() {
  Ember.Test.unregisterWaiter(finishedScrolling);
  staticWiz.assertHasGoToTopButton(true);
});

See it working here: https://ember-twiddle.com/1407bbadbb13365181f91201de6ba46c?openFiles=tests.acceptance.my-acceptance-test.js%2C