KonnorRogers / shadow-dom-testing-library

An extension of DOM-testing-library to provide hooks into the shadow dom
MIT License
98 stars 2 forks source link

Feature: aggregate slot content for "within" queries. #38

Open KonnorRogers opened 2 years ago

KonnorRogers commented 2 years ago
<my-wrapper>
  <div slot="start"><button></button></div>
</my-wrapper>
within(wrapper.startSlot).getByShadowRole("button")

^ should return button, but due to how projection of slots work, it doesn't.

this is a simple example but more complex reasoning may involve finding a specific row of a table which may have many slots.

CreativeTechGuy commented 1 year ago

This is still an open issue, correct? I tested a within query after v1.10.0 and it still didn't work. It's now really hard to debug why exactly it's breaking since there's so much magic happening in this library. 😅 Great when it works, terrible when it doesn't! haha

KonnorRogers commented 1 year ago

This should work, however, hard to know without seeing something to reproduce

CreativeTechGuy commented 1 year ago

I'll see if I can make a minimal reproduction. The general idea is something like this:

<my-table>
    <ShadowDOM>
        <tbody>
            <tr>
                <td>
                    <slot name="cell-1"></slot>
                </td>
            </tr>
        </tbody>
    </ShadowDOM>
    <a href="/dest" slot="cell-1">MyLink</a>
</my-table>

And then my query is:

within(tr).getByShadowRole("link", { name: "MyLink" });

Let me know if this helps at all or if you need more info.