Update documentation for toBeVisible() when using details elements

[kschow]

I was working on something using the <details /> element and was looking to test whether the inner text was visible or not. What I found out while looking through the code/tests for toBeVisible() is that:

1. The inner text needs to be inside another element. e.g.

<details>
    <summary>Title</summary>
    <div>Explanation text</div>
</details>

2. This is necessary because of the previousElement check in isAttributeVisible

   jest-dom/src/to-be-visible.js

   Line 19 in d24b6be

   (element.nodeName === 'DETAILS' && previousElement.nodeName !== 'SUMMARY'

3. When a <details /> element without enclosed inner text is used in conjunction with React Testing Library, you'll receive TypeError: Cannot read property 'nodeName' of undefined. E.g.

<details>
    <summary>This will not work</summary>
    Unenclosed Inner Text
</details>

expect(getByText('Unenclosed Inner Text')).not.toBeVisible();

4. While the documentation does mention that toBeVisible() works with <details /> elements with the open attribute, it neither mentions the above or give an example.

Since <details /> elements do not need to have an enclosing element for their inner text, see the first example https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details, it should be clearer that this is necessary. It's probably ok if this acts as it is, I just think it should be clearer that it's explicitly necessary and there should probably be an example for <details /> regardless.

[gnapse]

Hi, thanks for your detailed issue report.

I'd even say this is not an issue with the documentation, but with the implementation. It should work with the unenclosed inner text. I'd fix that instead of putting a caveat in the documentation. Let's consider this a bug.

[sjarva]

Hi! Is this issue closed by #396 or is there still some part that hasn't been implemented? 🤔
I was looking for a good first issue and got excited by this, but to me it seems like this has been done 😅