testing-library / testing-library/react-testing-library
Provide example of how to test <details><summary>...
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 19.7k
- Forks
- 1.2k
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 1
Description
Relevant code or config:
<details>
<summary>accordion item 1</summary>
some accordion 1 content
</details>
or i like this example from mn docs
<details name="requirements">
<summary>Graduation Requirements</summary>
<p>
Requires 40 credits, including a passing grade in health, geography,
history, economics, and wood shop.
</p>
</details>
<details name="requirements">
<summary>System Requirements</summary>
<p>
Requires a computer running an operating system. The computer must have some
memory and ideally some kind of long-term storage. An input device as well
as some form of output device is recommended.
</p>
</details>
<details name="requirements">
<summary>Job Requirements</summary>
<p>
Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance,
privacy, security, and internationalization, as well as a dislike of
broccoli.
</p>
</details>
What you did:
I have been trying to find an example of how to capture a user's click on a summary of the <details> for an accordion.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details
What happened:
I was expecting to be able to use getByRole but it doesn't appear to take the details or summary as a role, it does capture the details under group but it feels like the name should be the text in the summary? details could take a name but we fear that could end up with wacky side effects?
I am looking to test basic behavior like the accordion is expanded while the others are collapsed.
thanks.
Reproduction:
use the mdn example above and then provide an example of how you were able to test it using native RTL. We came up with a work around using a toggle simulation, but i would really like to use get by role and have the user just click the summary
Problem description:
Suggested solution:
can we use getbyrole to trigger the user's action on the summay?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue includes an MDN
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- documentation, frontend, testing
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100