ruby.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
If you are interested in the Ruby programming language, come join us! Tell us about yourself when signing up. If you just want to join Mastodon, another server will be a better place for you.

Administered by:

Server stats:

1.1K
active users

Brandon Weaver :ruby:

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 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 @Ryanbigg I try semantic markup/aria base locators if possible, then data-testid if that doesn’t work. My rule of thumb is if I have to fix the test once due to broken locator, switch it to data-testid.

@Ryanbigg @baweaver same here. I use data-test-id attr as well.