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
Post a Comment