Internal issue 2845 - Add data-testids to the IcDataTable
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
Currently, the IcDataTable doesn’t contain any internal test ids, making it a pain to accurately write tests for it. The only place a test id can be added right now is the root of the data table.
It would be nice if we could get test ids attached to each row, column & cell that are automatically generated from the content of the columns, similar to how the slot ids work. E.g.
The row ids could be: "row-headers", "row-0", "row-1", etc.
The column ids could be: “column-firstname”, “column-surname“, etc.
And the cell ids could be "firstname-header", "firstname-0", "firstname-1", etc.
Additionally, if any of the cells are given a href or icon, it would be nice for those to have automatically generated test ids that can be interacted with as well, e.g. "firstname-0-link", "firstname-0-icon". This way we could easily test things (example using Cypress) like:
```
cy.get('[data-testid="data-table"]').within(()` => {
cy.get('[data-testid="row-0"]').within(() => {
cy.get('[data-testid="firstname-0"]').within(() => {
cy.get('[data-testid="firstname-0-icon"]');
cy.get('[data-testid="firstname-0-link"]').contains("Joe");
cy.get('[data-testid="firstname-0-link"]').should("have.attribute", "href", "/view/profile/joebloggs");
cy.get('[data-testid="firstname-0-link"]').click();
})
})
})
```
Finally, having test ids on the slots would be beneficial too. Here, it would be best to have the test id on the same div element that has the slot=”example-slot” attribute, so I could do a get for that element and then do additional assertions on any test ids I've passed into the slot. E.g.
```
cy.get('[data-testid="pagination-bar"]').within(() => {
cy.get('[data-testid="custom-items-per-page-dropdown"]')
})
```
Contributor guide
Research direction
Start at the IcDataTable implementation and inspect how its rows, columns, cells, links, icons, and slots are rendered, along with the existing slot-id behavior. Use the Cypress examples in the issue to define the expected data-testid values; done means those elements expose the proposed identifiers and can be queried for the described assertions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, testing
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100