Passing of data-* Attributes as Props

[siliconeidolon]

[X] feature request

We use data-testids as part of our unit and Cypress testing strategy so we don't need to use classnames or other DOM structure dependent selectors. React, by default, is set up to pass on data-* attributes, but it appears some Prime React components don't allow this.

Current behavior https://codesandbox.io/s/primereact-data-attributes-4fufc In the above example, the button gets the data-testid, but the InputSwitch and TabPanels do not.

Expected behavior data-* attributes should be passed through to the container element (assuming the top level div) of the components, similar to how the Button already handles this.

[mertsincan]

TabPanel is a helper component. Therefore, unfortunately, this is impossible for it.

Best Regards,

[battaglr]

@mertsincan, could we reconsider this and reopen it? Not all components are behaving correctly regarding data-* attributes (just to name one: the Tag component). Let me know if you prefer that we open "Support Request" instead because this is really important for us and I'm guessing for others as well.

[hstevanoski]

+1 on reopening this issue. Best testing practices often speak of selecting with data- attributes. Maybe you guys should consider putting an emphasis on testability with primereact components (meaning - making testing with primereact easier; I am aware there are virtually infinite ways to test an app). In the project that I work on, we have a large codebase and we rely heavily on primereact. We only started writing e2e tests recently. Since data- attributes are really only passed sometimes, I have to write a lot of unhappy workarounds to achieve anything UI-related. This means that the tests that I write are inevitably brittle. So, you guys can imagine a scenario where you choose to refactor a component (e.g., render div s instead of li s in a dropdown component) and all of a sudden half my tests fail. Of course, I'd expect this to happen on major version upgrades only, but having such refactor-proof attributes will lessen the chances of test failure after version upgrades.

[evanemh]

+1 on reopening the issue for the same reasons mentionned in the comment above. @mertsincan

[melloware]

@evanemh @hstevanoski can you check my Code Sandbox? https://codesandbox.io/s/primereact-test-forked-341os5?file=/src/index.js

data-test-id is working on Tag, Button, and InputSwitch all things mentioned above. The only one that does not work is TabView as mentioned the Tabs are helpers not components.

Do you have specific examples of components that don't work?