Error when testing a component that contains infinity-loader

[finferflu]

I am using ember-infinity in a nested component, exactly as described here, and it works just fine, however, when testing the component, I get the following error:

Error: integration testing template received unexpected action infinityLoad

This is the full error stack:

Error: integration testing template received unexpected action infinityLoad
    at Object.context.send (test-module-for-component.js:386)
    at Class.triggerAction (ember.debug.js:40011)
    at Class.sendAction (ember.debug.js:45977)
    at Class.infinityLoad (index-view.js:13)
    at Class.send (ember.debug.js:45991)
    at Class.superWrapper [as send] (ember.debug.js:45374)
    at Class.triggerAction (ember.debug.js:40011)
    at Class.sendAction (ember.debug.js:45977)
    at Class._loadMoreIfNeeded (infinity-loader.js:72)
    at Class.didInsertElement (infinity-loader.js:22)

I'm pretty sure this has to do with integration tests not running inside an Ember server instance, but I'm really not well versed into the infrastructure of Ember, so I'm wondering what might be done to get that fixed.

Thanks a lot for your time!

[snewcomer]

@finferflu so in this case, you will want to catch that action that is being thrown up. So in my integration tests, generally I do the following. Let me know if this helps!

assert.expect(1);
this.infinityLoad = function() {
  assert.ok(true);
}
this.render(hbs`{{my-component infinityLoad=infinityLoad}}`);

[finferflu]

@snewcomer Thanks a lot for the feedback. I'm not sure what I'm doing wrong, but I'm getting exactly the same error. My integration test is roughly as follows:

const user = server.createList('user', 5)
 this.set('model', user)
 this.infinityLoad = function() {
   assert.ok(true);
 }
 this.render(hbs`{{index-view model=model type='user' infinityLoad=infinityLoad}}`)

(The user is set by using Mirage, in case that matters at all).

[snewcomer]

Sry that is my bad. So one thing about developing prod code is also making it testable. One way to modify your code is to use closure actions instead of send action. Then you are just overriding the infinityLoad action.

You can also try infinityLoad=(action infinityLoad) and see if that works.

[finferflu]

Thanks for the feedback. I did try with a closure function, and my test passed, however, my component no longer works now. It is not clear to me how the closure action is to be used. I've tried including it in my component invocation, as follows:

{{index-view model=model type='user' infinityLoad=(action 'infinityLoad')}}

However, that produces an error:

Assertion Failed: An action named 'infinityLoad' was not found in (generated users.index controller)

The fact is that I'm not sure how ember-infinity handles these types of situations, so I'm not really sure how to properly bubble this up.

In my component, I have this:

infinityLoadAction: 'infinityLoad',

  actions: {
    infinityLoad () {
      this.get('infinityLoad')()
    }
  },

And in my component, I have this (notice the lack of quotes around the word infinityLoad):

  this.set('model', users)
  this.infinityLoad = function() {
   assert.ok(true);
  }
  this.render(hbs`{{index-view model=model type='users' infinityLoad=(action infinityLoad)}}`)

[snewcomer]

@finferflu the infinityLoad action lives on the route, not the controller. So this pkg might helpful if you are still having problems.

https://github.com/DockYard/ember-route-action-helper

[finferflu]

@snewcomer Well, to simplify things, I've ended up un-nesting Ember Infinity, so that it sits next to my component, rather than inside it. I have a lot of repeated code now, but at least it works!

[snewcomer]

Great! Closing for now. Reach out if you have any other questions.

[finferflu]

OK, will do, thank you!