this.$().offset().top undefined at times

[venkz]

I was not using the destroyOnInfinity flag but I still run into this issue when I run Ember test suite on pages that have infinity scroll. It is not reproducible consistently but I see this quite often.

Could you give me any clue as to why this occurs and what is happening here...

I updated to 0.2.1 V hoping it will fix the issue but no luck!

path: components/infinity-loader.js : 46

[kellyselden]

can you link to a repo where we can see the error reproduced?

[venkz]

exact error: TypeError: this.$(...) is undefined

import Ember from 'ember';
import InfinityRoute from 'ember-infinity/mixins/route';

export default Ember.Route.extend(InfinityRoute, {
model() {
return this.infinityModel(modelName, {
startingPage: 1,
perPage: 30,
sortBy: serializedSortConfig,
data: advancedFilterObject,
});
}
});

in the template I am just doing
{{infinity-loader infinityModel=model}}

Now I have various test cases that make use of this page that has the infinite scroll. The test cases are mostly related to server side filters..

I runs normally at times but it also fails quite often.

[kellyselden]

I don't see anything wrong with that code. It might be that the issue is not related to ember-infinity.

[venkz]

Issue is related to ember-infinity code... Each time it errors out in the same line I pointed to. It is trying to fetch the page offset top and failing to find that when test cases run.

It works fine when I just play manually with this page by selecting various sort orders and filters and infinity loader does the job. When I run test cases which are usually a lot faster than manual clicks, it bails out at times!!!

could this be related to an open issue #100 ???

[hhff]

HI @venkz ! This isn't related to #100

Seeing as you're only getting this error in testing, I'm pretty confident that what is happening is:

1. You're rendering a route that has infinity loader in a test
2. That test is finished
3. The infinityLoader schedules this method
4. The test (& infinityLoader) is torn down before the afterRender queue is run
5. Line 46 runs after the element is destroyed

Can you please create a file called your-app/components/infinity-loader.js, and inside put:

import InfinityLoader from 'ember-infinity/components/infinity-loader';

export default InfintyLoader.extend({
  _loadMoreIfNeeded() {
    if (this.isDestroyed) { return; }
    return this._super(...arguments);
  }
});

And let me know if that fixes the bug? Thankyou!

[venkz]

Hey @hhff This is exactly where I was getting to. I shall try it out and let you know.

[venkz]

@hhff , I tried creating a component on my own extending from your's and did run my test suite for 5 times before confirming this. IT WORKS 👍

I submitted a pull request making this fix thinking it would be easier for you guys to integrate.

Thanks for all the help. Appreciate your work..

[hhff]

gnarly!! thanks @venkz