Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

scrollTo doesn't work with debounce #158

Open
lougreenwood opened this issue Nov 8, 2019 · 2 comments
Open

scrollTo doesn't work with debounce #158

lougreenwood opened this issue Nov 8, 2019 · 2 comments

Comments

@lougreenwood
Copy link

I have a scrollEventHandler which is debouncing the scroll events so that I can create a scrollEnd-like feature:

scrollable-view.hbs

<div
  data-test-scroll-container
  class="scrollable-view"
  {{!-- {{on "scroll" (action (optional @onScroll))}} --}}
  {{on "scroll" (action (optional @onScroll))}}
  {{on "scroll" (action "scrollEnd" @onScrollEnd)}}
  ...attributes
>
  <div data-test-scroll-content class="scrollable-view__content">
    {{yield}}
  </div>
</div>

scrollable-view.js

export default Component.extend({
  layout,
  tagName: '',

  actions: {
    scrollEnd(callback) {
      if (callback && typeof callback === 'function') {
        debounce(this, () => callback, 100, false);
      }
    },
  },
});

This all works fine in the app. However, when I attempt to test this feature and make use of the scrollTo helper, each scroll event forces the debounce to wait for it's timeout to expire and trigger (effectively nullifying the purpose of the debounce).

It seems that this is caused by the use of wait in the helper: https://github.com/cibernox/ember-native-dom-helpers/blob/master/addon-test-support/scroll-to.js#L16

Now, my question is whether it's possible for the helper to wait for the scroll event to occur in the browser without having to wait() for ember runloop (which is what seems to cause the debounce)?

@lougreenwood
Copy link
Author

Just to followup, if I change the waitForScrollEvent function to the following, my tests are fixed and debounce is working again as expected:

async function waitForScrollEvent() {
  let waitForEvent = new RSVP.Promise(function(resolve) {
    rAF(resolve);
  });
  return await waitForEvent;
}

Perhaps calling wait could be optional flag, something like scrollTo(selector, 0, 100, false)?

@cibernox
Copy link
Owner

cibernox commented Nov 8, 2019

I'd like to add something. The repo is not that is unmaintained, but it was mostly an experiment to bikeshed the API of the so called Grand Testing Unification.

This addon was tested, the community receive it well and eventually ember-test-helpers adopted those helpers, with almost no changes: Ember Test Helpers API.

Not all helpers were moved there. scrollTo specifically wasn't but I think that it's worth proposing it and let the core team decide wether that helper makes sense.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants