Make every element easily selectable for testing.

[prasanna1211]

A tricky task considering what some other libraries forgot to offer.

Objective: Testable ids can be attached through props. These ids enable to select particular elements to simulate events.

Best example would be, in select component when we click the input, dropdown will be opening. The dropdown is basically a set of divs with each item clickable. We should allow users to pass down unique ids which will be added to DOM.

I guess the best solution would be addressing each component individually.

[rishichawda]

@prasanna1211 Not sure what you meant by making them accessible. Do you mean the elements that have been used to build the components should be accessible for testing when used in a different project? Also, the components are already going to be tested before bundling - so the users won't have to worry about bugs from within the component. They don't need to test our components again basically. If there are any bugs / issues that are found later, we can fix and apply patch. Not sure if this is what you meant.

I will explain this clearly.

1. Take Material UI and try to do integration testing. It will be very difficult to select a particular element since most of them are composed
   and
2. To solve this, for testing in particular we assign ids to each html element so that it is easy to select those. Imagine to select a single select dropdown (3rd item) we generally do like ul > li:nth-child(3). Imagine having 5 select boxes in the same page. We need to add classes again which will confuse.

So the task would simplify down to adding dynamic ids through props to all possible html elements so that it becomes easy to test

[rishichawda]

Cool. Understood.