`deepQuerySelectorAll` fails to recurse into descendant shadow roots

[CreativeTechGuy]

Walkthrough of what I believe is happening:

• Call deepQuerySelectorAll passing in an element with a .shadowRoot property. (This also applies to within() queries for the same reason.)
• This library will add just the container to the list of elements to process. Since the container is a shadow root element, this querySelectorAll will return nothing.
• Since that querySelectorAll returned nothing, the recurse method will exit with a return value of [elem, elem.shadowRoot].
• Then deepQuerySelectorAll will do a querySelectorAll for each of these values. But at this point, it's just a normal query selector so nested shadow roots are ignored.

As a result, passing in an element with a shadow root to deepQuerySelectorAll, or more notably within() will result in missing any nested shadow roots.

[KonnorRogers]

Looks like line 76: https://github.com/KonnorRogers/shadow-dom-testing-library/blob/d2a1a2a2624ef6f806714189de28a5443cfeb9a4/src/deep-query-selectors.ts#L76

Isn't adding the shadow root.

[KonnorRogers]

@CreativeTechGuy I can't seem to get a working test case for this...(well failing test case)

[KonnorRogers]

@CreativeTechGuy let me know if 1.7.1 fixes this.

[CreativeTechGuy]

@KonnorRogers Yes it did fix it! Thank you! I trimmed down the output of screen.debug() on one of the tests that was failing. Hopefully this will help with a repro.

<message-bar class="message-bar" open="">
    <shadow-root>
        <div class="message-bar__actions" part="actions">
            <button appearance="stealth" class="message-bar__button button" type="button">
                <shadow-root>
                    <button
                        aria-disabled="false"
                        class="button control button--stealth button--standard button--has-content icon-only"
                        part="control"
                        tabindex="0"
                        type="button"
                    >
                        <span class="start" part="start">
                            <slot name="start" />
                        </span>
                        <span class="content" part="content">
                            <slot />
                        </span>
                        <span class="end" part="end">
                            <slot name="end" />
                        </span>
                    </button>
                </shadow-root>
                <icon class="icon" label="Close" name="cancel">
                    <shadow-root>
                        <span aria-hidden="false" aria-label="Close" role="img" />
                    </shadow-root>
                </icon>
            </button>
        </div>
    </shadow-root>
    Message Bar Contents
</message-bar>

The query I was using was something like:

within(document.querySelector("message-bar")).queryByShadowRole("img")

The actual code for both is very long so I hope I trimmed it down in a way that is easy to digest but still representative. Hopefully this helps!

[KonnorRogers]

Thanks! I'll work on getting a test case togther! Appreciate the help!