How to trigger scroll event in acceptance test

Question

I need to trigger window scroll event to test infinite scrolling, I've tried to use triggerEvent, but it seems that I missing something and it doesn't work. I'm using Ember 2.0 and list is rendered inside the component if it matters. Test fails on last 2 assertions, scroll position doesn't change after triggering event

test 'loads more items when scrolling', (assert) ->
  visit '/locations/1'   
  andThen ->
    assert.equal(find('.items-list li').length, 30)

    find(window).scrollTop(10000)
    triggerEvent(window, 'scroll')

    andThen ->
      assert.ok(find(window).scrollTop() > 0, 'window should scroll')
      assert.ok(find('.items-list li').length > 30, 'should load more items after reaching threshold')

Has anyone successfully triggered scroll event in their tests?

Ember CLI runs the acceptance test app inside a shrunken div. When testing the scroll of this page, you have to be careful whether scrolling the surrounding test runner window or scrolling the app. Any luck if you scroll #ember-testing-container and/or .ember-application instead? — Bluu

William Weckl William Weckl · Accepted Answer · 2017-07-06T00:44:37

Finally I could make it work! Used #ember-testing-container instead window.

The code below was what worked for me:

andThen(() => {
  Ember.$('#ember-testing-container').scrollTop(10000);
});

triggerEvent(Ember.$('#ember-testing-container'), 'scroll');

andThen(() => {
  assert.ok(Ember.$('#ember-testing-container').scrollTop() > 0, 'window should scroll')
});

With ember-infinity you also need to scroll down the body before starting the test:

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

How to trigger scroll event in acceptance test

2 Answers