CODEWITHSUNDEEP
ember.jsintegration-testing
accelerate
accelerate

Reputation: 1353

EmberJS - testing input action on enter

I have an EmberJS (2.5.0) component similar to the following:

{{input type="text" value=searchValue enter='handleSearch'}}

Basically, hitting enter on the input field should trigger the 'handleSearch' action. And in my component, so far I have this:

searchValue: null,
actions: {
  handleSearch() {
    var searchValue = this.get('searchValue');
    var submitSearch = this.get('submitSearch');
    console.log('Search term entered: ', searchValue);
    if (submitSearch) {
      submitSearch(searchValue);
    }
  }
}

And the component is called via:

{{my-component submitSearch=(action 'externalAction')}}

That all works fine and all, but I'm having trouble actually testing it.

Here's my integration test (pseudo-copied from the guide):

test('search input', function(assert) {
  this.set('externalAction', (actual) => {
    console.log('in external action');
    assert.equal(actual, 'hithere');
  });
  this.render(hbs`{{universal-header-search submitSearch=(action externalAction)}}`);
  this.$('input').val('hithere');
  this.$('input').change();
});

The problem is, my handleSearch action handler never gets triggered. So how do I get my input field to trigger the handler in my integration test? I've also tried this.$('input').submit() and this.$('input').trigger('change'), but neither seems to do anything.

Upvotes: 4

Views: 2637

Answers (3)

Sumit Ramteke
Sumit Ramteke

Reputation: 1496

You can use insert-newline="actionName" of input helper which only trigger when you press return/enter key

<input {{insert-newline="actionName"}}>

Upvotes: 0

Denis Haidash
Denis Haidash

Reputation: 33

I've faced with the same issue: I had to trigger "enter" event of Ember's (v.2.8) input component programmatically

{{input ... enter=(action "someAction")}}

After some reverse engineering I've found a solution

const e = Ember.$.Event("keyup");
e.which = 13;
e.keyCode = 13;
Ember.$('input').trigger(e);

Upvotes: 1

EnricoB
EnricoB

Reputation: 151

With this.$('input').change(); you are triggering the change event, not the enter event.

After a short research i haven't found a solution to trigger the enter event in integration tests.

You could solve this problem by using the keypress event instead and detect the enter button in your handler (the enter event doesn't exist in jQuery, so i think ember does the same). To get the event in your handler you can't use the ember input helper:

<input type="text" value={{searchValue}} onkeypress={{action "handleSearch"}} />

Your handler:

handleSearch(event) {
  if(event.keyCode === 13) { //check if enter button was pressed
    var searchValue = this.get('searchValue');
    var submitSearch = this.get('submitSearch');
    console.log('Search term entered: ', searchValue);
    if (submitSearch) {
      submitSearch(searchValue);
    }
  }
}

To trigger the keypress event in your integration-test just use

this.$('input').keypress();

Or to trigger keypress event with enter button

var e = jQuery.Event("keypress");
e.which = 13; //enter button code
e.keyCode = 13;
$('input').trigger(e);

Upvotes: 6

Related Questions