ember event trigger order is different in app and tests

I have written this simple demo component to demonstrate a problem. The component code is below

App.FocusOutComponent = Em.Component.extend({
  attributeBindings: ['tabindex'],

  tagName: 'focus-out',

  setFocus: function() {
    console.log('clicked focus-out container');
    this.$().find('button').focus();
    console.log('focus set to button');
  }.on('click'),

  focussedOut: function() {
    console.log('focussedOut from outer container');
  }.on('focusOut'),
});

{{#focus-out id="focus-container" tabindex="-1"}}
  <button id="text-button">Test Button</button>
{{/focus-out}}

When I run this and click on the focus-out element, this is the order of the logs. Link to demo

1. clicked focus-out container


2. focussedOut from outer container


3. focus set to button

Now when I am trying to write acceptance tests for this with the following code.

test('test visit / and click button', function() {
  expect(0);
  visit('/').then(function() {
    find('focus-out').click();
    console.log('after click in test');
  });
});

The order of the logs are different. Link to demo .

1. clicked focus-out container


2. focus set to button


3. after click in test


4. focussedOut from outer container

The focusOut log got printed at the very end instead before the after click log.

Im not sure if this is a bug or something wrong with my code.

I also noticed another problem while executing tests. If I have focus on the chrome dev-tools while the tests are running, the focusOut event will not trigger at all.

Some help with this is much appreciated.