testing-library / testing-library/dom-testing-library
Queries for tables
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.3k
- Forks
- 474
- PR merge metrics
- No merged PRs in 30d
Description
Describe the feature you'd like:
The current queries don't really allow anything matching how a user would interact with a table.
There is limited support using the ByRole selectors, to choose all rows, or all cells, or nesting between these, but doesn't always match the principle of "use your component as a user would".
e.g. In a table where each row has a "Delete" icon, choosing the delete icon corresponding to the particular row contents. A user would identify which row they're looking at by the value in one of the cells, then scanning across.
Suggested implementation:
I've implemented some custom queries in https://github.com/lexanth/testing-library-table-queries#readme, but some of it is a bit hacky.
Describe alternatives you've considered:
getAllByRole('row') gets rows, but then filtering by text content is slightly awkward (either index based or filtering based on content).
Teachability, Documentation, Adoption, Migration Strategy:
This would be additional queries, so backwards-compatible.
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
Start by reading the existing ByRole and getAllByRole behavior described in the issue, then review the linked custom table-query implementation and its README. Compare the proposed queries with the row and cell-selection limitations described here. Done means an agreed, backwards-compatible set of queries that supports locating a row from cell content and selecting an action within that row.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- testing-qa
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100