Ok frontend oriented folks, testing / class philosophy question:
In React a lot of styles are inlined, so folks don't tend to add class names or ids to elements, or at least that seems to be the trend.
For testing Integration / E2E flows though those class names make excellent hooks for scoping down where to hook into for reads/actions against said elements.
Given that, is it considered bad form to add those class names for test hooks only?
Something to the line of `x-component-name` to React components. It'd be nice if there were a way to do that automatically as well, if the idea in general is not too far off the orthodoxy.
@baweaver I add a data-test-id attr instead
@Ryanbigg Hrm, yeah, that may be better to get it explicitly out of the styling path.
@baweaver @Ryanbigg I’ve used data-test-id, following this convention https://testing-library.com/docs/queries/bytestid/
Started using it for js tests and then occasionally used them in some ruby capybara-powered tests too.
@baweaver the purpose of something is not as likely to change as the classes that style it are
@Ryanbigg True, though the class tagging I would use would have been prefixed with x or qa to signify purpose. The presence of data attributes solves that nicely without overloading classes for that purpose.
Frontend tests are always brittle when based on style, when based on synchronously handled async events, and especially when based on structure.
Been a few years, I keep getting put into backend architecture.
@baweaver we use data-target attributes.