CODEWITHSUNDEEP
ember.js
Andrey Mikhaylov - lolmaus
Andrey Mikhaylov - lolmaus

Reputation: 23873

Trigger an input's action from an acceptance test?

I've got this in my template:

  {{ input
    value=model.title
    focus-out="finishEditingTitle"
    insert-newline="finishEditingTitle"
  }}

The action is asynchronous. I would like to test that after a user finishes editing the text field, the action is performed and the result is reflected on the page.

I tried this

fillIn('input', 'asdf');
keyEvent('input', 'keypress', 13);

But it won't trigger the action!

At the same time, doing click('button'); on a <button {{action "save"}}> does trigger the action.

How do i trigger an input's action from an acceptance test?

A fiddle: http://emberjs.jsbin.com/dapuge/1/edit?html,js,output

Upvotes: 4

Views: 2655

Answers (3)

dmraz
dmraz

Reputation: 542

As defined here: http://snipplr.com/view/53641/jquery-simulate-keypress-trigger/

Use keyup instead of keypress: 

fillIn('input', 'asdf');
keyEvent('input', 'keyup', 13);

Upvotes: 3

givanse
givanse

Reputation: 14953

So, you want to wait for the UI events to complete before doing your tests.

You need to keep working with promises. If your needs were more convoluted, you would have to write custom code in your controller to make sure this happens. (For example: Using Ember (cli) how do I get an acceptance test to wait for a promise?).

Luckily for your case there are already helpers that take care of the asynchrony, see: http://emberjs.com/guides/testing/test-helpers/

The actual answer, just:

click('.title');
fillIn('input', 'asdf');
triggerEvent('input', 'blur');

Note, this wouldn't work:

//triggerEvent('input', 'blur');
Ember.$('<input>').blur();

Upvotes: 1

givanse
givanse

Reputation: 14953

You don't need action='save' in your input, if you remove it, you don't have to wait for the click event either. You already have a bind there, take advantage of that.

{{input value=model.bar}}

App.IndexController = Ember.Controller.extend({
  // trigger whenever the input's value changes
  _save: function() {
    Ember.Logger.debug('IndexController: save');
      this.get('model').save();
  }.observes('model.bar'),

  actions: {
    // trigger the action from other DOM elements
    save: function() {
      this._save();
    }
  }
});

I edited your example, all tests pass now: http://emberjs.jsbin.com/baqoguyapa/1/edit?html,js,output

Upvotes: 2

Related Questions