Flaky tests for focusout

I am not sure what this all means, but given a component that listens for focusout I get these results:

• this.$('input').trigger('focusout') always works
• this.$('input').trigger('blur') always works
• triggerEvent('input', 'focusout') never works
• triggerEvent('input', 'blur') always works
• blur('input') sometimes works

I created a reproduction repo here: https://github.com/simonihmig/ember-native-helpers-demo/blob/master/tests/integration/components/foo-bar-test.js

Regarding the blur flakiness: it seems it does work when having a fresh test run, or pressing enter on ember t -s:

As soon as I reload the Chrome browser window, the test fails:

Seems related to the browser-has-focus handling in blur.js: as soon as it hits this line (https://github.com/cibernox/ember-native-dom-helpers/blob/master/addon-test-support/blur.js#L32) it seems to work. I patched that helper locally to always call fireEvent and not el.blur(), and then it seems to work just fine for me.

Don’t know if that makes sense? Also why triggerEvent('input', 'focusout') does not work at all…

[RuslanZavacky]

ah, yea, @simonihmig it’s actually the thing 😃 If you try to do blur, without focusing into element first, it’s not exactly how the browser works, when the user interacts with it 😃 so in tests, you have to mimic the similar behavior. Before blurring, you have to be focused on an element.

[simonihmig]

Yeah, makes sense! I was just naively assuming what was working with jQuery events would work the same with native events…