can't test customEvents

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

[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…