CODEWITHSUNDEEP
jqueryember.jsphantomjsember-testingember-components
ykaragol
ykaragol

Reputation: 6221

How to focus/blur on a component in ember integration tests?

How can I trigger focus and blur events while testing an Ember.js component?

this.$().focus(); or this.$('input').focus(); seems working but behaves different in phantomjs and chrome.

Also this.$().blur(); or this.$().focusout(); seems not working both phantomjs and chrome.

Upvotes: 7

Views: 1467

Answers (2)

Arthur Putnam
Arthur Putnam

Reputation: 1101

Newer versions of Ember have test helpers which can be used to focus or blur.

... 
import { find, focus, blur, render } from '@ember/test-helpers';


module('Integration | Component | example-input', function(hooks) {
  
  test('it can be focused', async function(assert) {
    await render(hbs`<myInput />`);
    const input = find('input')
    
    await focus(input)
    await blur(input)
  });
  
});

blur: https://github.com/emberjs/ember-test-helpers/blob/master/API.md#blur

focus: https://github.com/emberjs/ember-test-helpers/blob/master/API.md#focus

Upvotes: 1

Majid
Majid

Reputation: 2910

give it a try with trigger instead, it worked for me

  this.$('input').focusout();
  this.$('input').blur();
  this.$('input').trigger('focusout');
  this.$('input').trigger('blur');
  this.$('input').trigger('keyup'); // another event that you can trigger

more information

Upvotes: 1

Related Questions