The order to run ember trigger differs from app and tests
I wrote this simple demo component to demonstrate the problem. Component code 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 an item focus-out
it is the order of the logs. Demo link
- click container for focus
- focus from outer container
- focus is 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 magazines is different. Demo link .
- click container for focus
- focus is set to button
- after clicking in test
- focus from outer container
The magazine focusOut
was printed at the very end in front of the magazine after a click. I expected the same order for the logs with just an extra log (after click) at the end.
I'm not sure if this is a bug or if there is something wrong with my code.
I also noticed another problem when running tests. If I have a focus on chrome dev tools while the tests are running, the event focusOut
won't fire at all.
Some help on this is greatly appreciated.
source to share
the click event does not set focus (this is the tailgate route). You will need to manually set focus, then click if you want the same results.
Ember Click Helper (sends mousedown / mouseup then click)
function click(app, selector, context) {
var $el = app.testHelpers.findWithAssert(selector, context);
run($el, 'mousedown');
if ($el.is(':input')) {
var type = $el.prop('type');
if (type !== 'checkbox' && type !== 'radio' && type !== 'hidden') {
run($el, function(){
// Firefox does not trigger the `focusin` event if the window
// does not have focus. If the document doesn't have focus just
// use trigger('focusin') instead.
if (!document.hasFocus || document.hasFocus()) {
this.focus();
} else {
this.trigger('focusin');
}
});
}
}
run($el, 'mouseup');
run($el, 'click');
return app.testHelpers.wait();
}
Modified test
test('test visit / and click button', function() {
expect(0);
visit('/').then(function() {
var el = find('focus-out');
el.focus();
click(el);
console.log('after click in test');
});
});
http://emberjs.jsbin.com/lefazevozi/1/edit?js,console,output
It's also important to note that the collapse will also trigger a focus event. So the main reason you were seeing focus in general was because on break it would lose focus from the child button.
Perhaps focus should be set before mousedown on the click helper in the ember test, although I'm not sure what else might affect this, or if people weren't usually expecting this, as jquery doesn't.
source to share