jqueryember.jsphantomjsember-testingember-components

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.


Solution

  • 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