mi6 / mi6/ic-ui-kit

Internal issue 2845 - Add data-testids to the IcDataTable

Open
#2,361 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.