ember.js - EmberJS - testing input action on enter -


i have emberjs (2.5.0) component similar following:

{{input type="text" value=searchvalue enter='handlesearch'}} 

basically, hitting enter on input field should trigger 'handlesearch' action. , in component, far 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 component called via:

{{my-component submitsearch=(action 'externalaction')}} 

that works fine , all, i'm having trouble testing it.

here's integration test (pseudo-copied 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, handlesearch action handler never gets triggered. how input field trigger handler in integration test? i've tried this.$('input').submit() , this.$('input').trigger('change'), neither seems anything.

with this.$('input').change(); triggering change event, not enter event.

after short research haven't found solution trigger enter event in integration tests.

you solve problem using keypress event instead , detect enter button in handler (the enter event doesn't exist in jquery, think ember same). event in handler can't use ember input helper:

<input type="text" value={{searchvalue}} onkeypress={{action "handlesearch"}} /> 

your handler:

handlesearch(event) {   if(event.keycode === 13) { //check if enter button pressed     var searchvalue = this.get('searchvalue');     var submitsearch = this.get('submitsearch');     console.log('search term entered: ', searchvalue);     if (submitsearch) {       submitsearch(searchvalue);     }   } } 

to trigger keypress event in integration-test use

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

or trigger keypress event enter button

var e = jquery.event("keypress"); e.which = 13; //enter button code e.keycode = 13; $('input').trigger(e); 

Comments

Popular posts from this blog

scala - 'wrong top statement declaration' when using slick in IntelliJ -

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

PySide and Qt Properties: Connecting signals from Python to QML -