eslint-plugin-test-selectors icon indicating copy to clipboard operation
eslint-plugin-test-selectors copied to clipboard

testAttribute case sensitivity

Open levaleks opened this issue 1 year ago • 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?

levaleks avatar Dec 01 '23 12:12 levaleks

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)

davidcalhoun avatar Dec 04 '23 12:12 davidcalhoun

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.

levaleks avatar Dec 07 '23 15:12 levaleks