test(components/molecule/select): fix flaky onblur test

[alfdocimo]

Category/Component

TASK:

Types of changes

• 🪲 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 🧾 Documentation
• 📷 Demo
• 🧪 Test
• 🧠 Refactor
• 💄 Styles

Description, Motivation and Context

Avoid weird race condition with userEvent.tab() by firing focusIn and focusOut events

Screenshots - Animations

[github-actions]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0.45↓	≍ 0.42↓	≍ 0.61↓	≍ 0.61↓
%	71.65	57.36	58.95	73.42
ABS	2659 / 3711	1495 / 2606	484 / 821	2564 / 3492

[jordevo]

isn't calledOnce a better choice for this kind of test? being it more specific, the test is more precise, IMHO. What do you think?

[alfdocimo]

Good catch! will update this. Thanks! (:

[jordevo]

https://testing-library.com/docs/guide-events

have a look at this... perhaps that's why you're feeling it's a bit flaky on your local environment? 🤔

perhaps using imperative focus / blur is more robust:
https://testing-library.com/docs/guide-events#alternatives

[alfdocimo]

Interesting! Thanks for sharing! 💡

I have given it a read and updated this with the imperative focus()

Seems like for some reason, calling imperatively blur() does not seem to work as you'd expect 🤔

[jordevo]

oh that's sad... 🤔

as an interim solution... how do you feel about doing focus first on textBox, as you're already doing, and then on some other element so that it hopefully fires the blur event on the textbox? I know it's a bit hacky but perhaps more robust than the original fireEvent focus and blur.

[andresin87]

Better use click and tab, Its what user is going to tackle, dont care if it blurs or focus on his/her POV

[alfdocimo]

I agree, click and tab should be what we aim for, which was my original intention

userEvents.click(textBox)
userEvents.tab()

After trying quite different things, like rendering another component and clicking that component

      const component = props => (
        <>
          <div>
            <button>Hello!</button>
          </div>
          <Component {...props} />
        </>
      )

      const setup = setupEnvironment(component)

I've realized that this behavior happens whether the browser that runs the tests is opened/closed. 🤯

only with fireEvent.blur() it fires the event from the node, regardless of wether the Karma browser is opened or not...

[github-actions]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0.45↓	≍ 0.42↓	≍ 0.61↓	≍ 0.61↓
%	71.65	57.36	58.95	73.42
ABS	2659 / 3711	1495 / 2606	484 / 821	2564 / 3492

[alfdocimo]

Merging this PR.
We are aware that there are some issues with focusing in and out of the Karma browser when running the tests. This is why firing an event directly seemed to fix the test. As a temporary workaround we're using fireEvent to trigger the blur event from the node