How simulate "enter" keypress in integration test?

Testing
1

I have an input that triggers an action when enter key is pressed. I’ve tried programmatically simulating that event in my integration test but have fallen short.How would I go about doing that?

I’ve seen the handy-dandy keyEvent and triggerEvent test helpers. I tried using those with my integration test but got an error that keyEvent is not defined. I’m assuming these are only usable in acceptance tests?

In my test, I tried triggering the enter event with jQuery, like this:

Ember.run(() => {
  const event = $.Event('keyup');
  event.which = 13;
  event.keyCode = 13;
  this.$('.my-input').focus();
  this.$('.my-input').trigger(event);
});

But I got a this.get() is not defined error. My event handlers for the enter key were getting fired, so my guess is the event was triggered twice (as the docs warn about with triggering events with jQuery).

Any ideas?

2

It turned out to be an issue in my test. I was successful doing:

Ember.run(() => {
  const event = new KeyboardEvent('keyup', {
    key: 'Enter',
  });

  document.querySelector('.my-input').dispatchEvent(event);
});

Though apparently using the KeyboardEvent constructor in IE isn’t supported.

3

You can also use ember-native-dom-helpers GitHub - cibernox/ember-native-dom-helpers: Test helpers for your integration tests that fire native events

await keyEvent('.my-input', 'keyup', 13);
2 Likes
4

In a situation where the enter key on an input element, or input helper, is used to trigger a form’s submit event, triggering the keyboard event is only part of the puzzle. Below is an example component containing a form element.

Component template:

<form {{action "submitForm" on="submit"}}>
    <input type="text" value="" class="input-element">

    {{input type="text" value="" class="input-helper"}}

    <button type="submit">Submit</button>
</form>

With this template, the await keyEvent('.my-input', 'keyup', 13); won’t trigger the submit, at least it has not for me.

A keyUp, keyPress, or keyDown event handler also needs to be added to the form in order for the form to capture the enter keyboard event triggered by keyEvent. Below is the code, but here’s a twiddle.

Component template:

<form {{action "submitForm" on="submit"}} onkeyDown={{action keyDown}}>
    <input type="text" value="" class="input-element">

    {{input type="text" value="" class="input-helper"}}

    <button type="submit">Submit</button>
</form>

Component:

import Component from '@ember/component';
import { get } from '@ember/object';

export default Component.extend({
    keyDown(e) {
        // Check if the enter key was pressed on input and select nodes only
        if (e.keyCode === 13 && (nodeName === 'input' || nodeName === 'select')) {
            // Stop propagation
            e.stopPropagation();
            // Prevent default submit otherwise submit gets called twice.
            e.preventDefault();

            // Trigger the submitForm action
            this.send('submitForm');
        }
    },

    // Just a no-op function to be replaced by an action, useful for testing
    onSubmit() {},

    actions: {
        submitForm() {
            get(this, 'onSubmit')();
        }
    }
});
1 Like
5

Thanks! Was looking for this.