prashantswami / eslint-plugin-test-id

This is rule of eslint plugin for vue templates which checks element with model has `data-test-id`

Hello 👋

eslint-plugin-test-id's Issues

Support for [email protected]

Hey @prashantswami - I hope all is well! Do you know if this plugin works with ESLint 8?

Prefer `id` for unique selectors

There are a number of cases where having a unique id on an HTML element can be beneficial or downright necessary for accessibility. In general, it's a best-practice to include id on elements that you might want to link to (header elements) and interactive elements (form controls).

In these cases where we already have a unique id on an element, it shouldn't be necessary to include data-test-id (since we can reliably select the element by id instead). My main concern is driving the right behavior - we should make sure that we're including id when necessary and not relying on a data- attribute to identity those elements. This plugin wouldn't necessarily force you to include an id, but if you already had it, you just wouldn't hit this rule. Secondary, extra data- attributes do add some bloat to the code / bundle. If there are places where we don't need them, it would be great to not have to include them. Kent C. Dodds also suggests only using a "test id" attribute when other options are exhausted (in his case, Testing Library queries, but that advice can apply to any method of selecting).

My proposal is to add some logic to the plugin to ignore elements that already have an id attribute/prop, and not require data-test-id on those. Curious how others feel about this - let me know your thoughts!