Provide description of how to browser/integration/acceptance test

[jackkinsella]

Reproduction steps

Visit your homepage and interact with the component in the console. You can get a reference to one of them with:

var select = document.querySelector(".basic-single")

Now try interacting with it

select.click()
select.dispatchEvent(new Event("click"))

Neither work, which makes browser testing challenging.

Background

Most professional teams these days do some form of end-to-end testing, ours included. The only component in our stack that we haven't been able to figure out is react-select. I recognize that we're probably missing something obvious so your assistance would be appreciated.

Could you clarify how Selenium etc. (or just pure Javascript) can be used to drive the this select box from the outside? Many thanks

[ebonow]

Greetings @jackkinsella,

I agree that this behavior is not necessarily straight forward, so I will attempt to unravel what I have learned from exploring the source code a bit.

First, you are targeting the select wrapper itself. Your target node should be the Control component. The Control should always be first child component of container, but classNames would work too ('.select__control' in this case).

Secondly, the event listener on the Control is not a click event, but rather a mousedown event (presumably for performance reasons or to avoid overriding handlers, but I'm very curious myself why this is)

Borrowing some code from StackOverflow, we can accomplish a native mousedown event with the following:

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}

Putting it all together,

var select = document.querySelector(".basic-single").children[0];
triggerMouseEvent(select, 'mousedown');

I'm sure there's several ways to encapsulate all of this for your testing suite and for testing various react-selects, but hopefully this is a good start.

[jackkinsella]

Thanks for the response Eric. The use of another type of event internally helps explain why a standard click might not have worked.

Did the code you pasted above work for you to open up the select box on the React-Select homepage? Unfortunately it had no effect -- well at least no visible effect, for me in Chrome v83 (also no effect when I tried in Firefox). It's actually quite a mystery to me how I'm able to click it in the browser but can't control it via JS. I guess I've arrived at a gap in my understanding of how JS and the browser works.

An example overall goal in a testing workflow would be to select the value "Red" from the first select box, so let's work towards getting a snippet of JS that achieves that.

[ebonow]

@jackkinsella I was able to get the menu to open but through the use of a timeout since it would not work while I had focus on the console window. Maybe try setting a 3 second timeout and switch focus back to the page to see if that works for you.

[jackkinsella]

You mean something like this? `setTimeout(() => triggerMouseEvent(select, 'mousedown'), 3000)` I wasn't able to get this to work reliably (however once or twice, when I clicked on a random part of the page, it would pop the menu open). I wonder if there's a more direct way to get this behavior? Using timeouts might prove brittle in a testing environment

…

On Fri, Jul 10, 2020 at 4:47 PM Eric Bonow ***@***.***> wrote: @jackkinsella <https://github.com/jackkinsella> I was able to get the menu to open but through the use of a timeout since it would not work while I had focus on the console window. Maybe try setting a 3 second timeout and switch focus back to the page to see if that works for you. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4116 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABE5JR2XQFBSDLQ3ZMY3ADR24SXXANCNFSM4OVJL7TA> .

-- Warm Wishes, Jack Kinsella *How I Use Email:* *I typically respond to electronic communication once per day so phone me if you need a response now. I answer emails in three sentences or less, even if the original email was longer. I mean no disrespect.*

[ebonow]

One caveat would be that it won't work if the select already has focus. Also noticed that the DOM of the Select changes depending on whether the document is focused (some kind of aria tag) so this targeting won't work when the console has active focus.

The timeout is simply to ensure time so that the tester can return focus to the document window (debugee) and not the inspector window.

Agreed that none if this is ideal, but again hoping to get closer to something that can work

[sabinasiddiqi]

+1

[ondrejsevcik]

Seems there is library that solves this issue https://github.com/romgain/react-select-event

It would be great if that repo would become part of this repo and make it official API for testing.