davidcalhoun/eslint-plugin-test-selectors

testAttribute case sensitivity

Opened this issue · 2 comments

Hi! Thank you for such a useful plugin. There is one thing that confuses me a little bit which is related to testAttribute case insensitivity. For example:

<Button onClick={handleClose} data-testid="cancelButton">Close</Button>

and

<Button onClick={handleClose} data-testId="cancelButton">Close</Button>

Both variants (testid and testId) are treated the same with the following setup: 'test-selectors/onClick': [severity, 'always', { testAttribute: ['data-testid'] }],
Is it expected behavior?

Thanks for using the plugin! Just a heads up that the case insensitivity is intentional, as HTML tag and attribute names are case insensitive:

Attribute names for HTML elements may be written with any mix of lowercase and uppercase letters that are a case-insensitive match for the names of the attributes given in the HTML elements section of this document; that is, attribute names are case-insensitive.
(emphasis mine)

I believe that https://www.w3.org/TR/REC-xml/#NT-Name is more relevant in that case. Global_attributes has a section with recommendations where among others stated that "The name should not contain any capital letters, as XML is all lowercase."

Also, RTL warns when using non-lowercase data-testid:
"Warning: React does not recognize the data-testId prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase data-testid instead. If you accidentally passed it from a parent component, remove it from the DOM element."

The main problem for us is that we use testing-library/consistent-data-testid in conjunction with your plugin which is case sensitive.
So if someone would add data-testId (or data-TeStiD as an exaggerated example) consistent-data-testid validations will not be applied.