can't test customEvents

[amk221]

We have these on our Application:

customEvents: {
    webkitAnimationEnd: 'animationEnd',
    msAnimationEnd: 'animationEnd',
    oAnimationEnd: 'animationEnd',
    animationend: 'animationEnd'
}

...and in a component integration test:

this.render('{{foo-bar}}')
this.$().trigger('click') // works
this.$().trigger('animationEnd') // doesn't work

[rwjblue]

We create and setup the EventDispatcher here for unit tests and here for integration tests but do not provide any custom settings.

Ember does that here as part of application boot, passing the customEvents hash that is specified on the Ember.Application instance.

[rwjblue]

The simplest solution is to allow the user to specify customEvents (instead of using {}). Something like:

moduleForComponent('foo-bar', {
  beforeEach() {
    this.customEvents = {
      webkitAnimationEnd: 'animationEnd'
      msAnimationEnd: 'animationEnd'
      oAnimationEnd: 'animationEnd'
      animationend: 'animationEnd'
    };
  }
});

Which would be used here like so:

context.dispatcher = Ember.EventDispatcher.create();
context.dispatcher.setup(context.customEvents || {}, '#ember-testing');

[rwjblue]

@ef4 / @dgeb - Would love your thoughts on the right API here...

[ef4]

Ideally we should not require additional config. If you have custom events set up correctly in your app, they should Just Work in integration tests too.

We may need to refactor Application a little so that we can use just the customized event setup separately from booting a whole app instance.

[amk221]

I'd like to contribute, but would need hand holding

[amk221]

Anybody? it's been a while :|

[mitchlloyd]

Got some help from @rwjblue on this one today and wanted to share here:

It seems that a nicer (but currently undocumented solution) is to extend the EventDispatcher:

// inside of app/event_dispatcher.js
import Ember from 'ember';

export default Ember.EventDispatcher.extend({
  init() {
    this._super(...arguments);
    this.events.webkitAnimationEnd = 'animationEnd'
  }
});

This works and feels like a better solution since setting up custom events is unlikely to change based on the current environment.

The _ in the file name is surprising but currently needed. Also there could be a more intentional hook to let users edit the events.

[rwjblue]

Thanks for writing up the solution here. I think I'm going to close this issue now that the solution is documented, but I suspect we might still want to do some work in Ember to make this a bit more ergonomic. I'm happy to help someone spearhead an RFC on this, if they are interested in it...