ember-test-helpers: Focusout event not triggered when test window is not focused

So, I have a simple Ember component input which has the built-in focusOut Ember event. In an integration test, using ember-test-helpers triggerEvent(input, 'blur') on this input or fillIn(other-input, 'blbl') in another input does not trigger the focusOut event if the window test is not focused while running.

I created a new Ember project to demonstrate this bug (see tests/integration/my-component-test.js), you can check it out here => test-focusout

How to test

ember t -s --filter='Integration | Component | my-component'
Open dev tools in test window.
Click in console and refresh page (click inside test window if you want to re-focusin).
Same behaviour when running the test while focusing another window. Reproduced on Chrome 76.0.3809.87 and Firefox 68.0.1

Is that the expected behaviour ?

About this issue

Original URL
State: open
Created 5 years ago
Comments: 16 (13 by maintainers)

Most upvoted comments

Lets do it!

rwjblue on Apr 22, 2020

You are suggesting that we would effectively to do:

if (document.activeElement) { 
  await blur(document.activeElement);
}

Inside fillIn / typeIn / click?

rwjblue on Apr 22, 2020

hmm, I don’t think we should blur at the end. what we could potentially do is blur at the start if the focus is on another element. or am I missing something?

Turbo87 on Apr 22, 2020

@ohcibi - Ya, you are right sorry about that. I’m not sure what the best path forward here is though. fillIn / typeIn could theoretically focus out at the end, but I’m not 100% sure that is the correct behavior for us. 🤔

@ro0gr / @Turbo87 - Thoughts?

rwjblue on Apr 21, 2020

Not that it’s a fix, but we worked around this by adding a testWithBrowserFocus wrapper for test that we use in these cases.

Here we preferred false positives.

import { test } from 'qunit';
/*
  Tests that need to verify HTMLElement.focus() behavior will
  fail when run in a window that isn't focused, but pass correctly
  when the window is focused or running headless (e.g. in CI).

  This helper checks if the window is focused. If it's not,
  the test will pass.
*/
export function testWithBrowserFocus(description, callback) {
  test(description, async function(assert) {
    if (!document.hasFocus()) {
      assert.ok(true);
      return;
    }
    await callback.call(this, assert);
  });
}

And it works just like test:

  testWithBrowserFocus('opening a chat marks it as read', async function(assert) {});

trek on Mar 3, 2020