keyEvent does not seem to trigger events in tests using input helper

Hello, thanks for creating this package!

Currently, using keyEvent(), particularly for ENTER or ESC keycodes (13 and 27 respectively), on an {{input}} element in a component while running a phantomJS test does not fire the event.

Take the following test:

test('test does not work', function(assert) {
  this.set('escPressed', () => {
    // never called
    console.log('keyup called!');
    assert.ok(true);
  });
  this.render(hbs`{{input escape-press=(action escPressed)}}`);
  let input = find('input');
  focus(input);
  keyEvent(input, 'keyup', 27); // esc
});

After doing a bit of research, it appears that when creating events using KeyboardEvents or KeyEvents in the fire-event.js, PhantomJS assigns all keyCode property on events to 0, for reasons I’m not too sure of. As a result, Ember is not able to correctly detect the pressed key because keyCode is being set to 0 by PhantomJS.

A workaround was to create an event in a legacy way. For instance, instead of using keyEvent, triggering an event like this works.

   let evt = document.createEvent('CustomEvent');
   evt.initEvent('keyup', true, false);
   evt.keyCode = 27;
   input.dispatchEvent(evt);

This may be something that phantomjs may be able to fix in its package, but I was thinking it wouldn’t be unreasonable for this package to support this?

[GCheung55]

Dug a little more and eventually came across Ember.TextField documentation that the {{input bubbles=true}} would bubble up the keyUp event to parent nodes.

Instead of using keyUp, I used keyPress instead. With keyPress, I do not have to set the bubbles property.

[cibernox]

@brandynbennett If it’s possible, I’d recomend trying headless chrome instead of phantom. Faster, more reliable. We haven’t decided yet if this is something we want to fix.