davidcalhoun / eslint-plugin-test-selectors

Enforces that data-test-id attributes are added to interactive DOM elements (JSX) to help with UI testing. JSX only.
28 stars 14 forks source link

testAttribute case sensitivity #26

Open levaleks opened 10 months ago

levaleks commented 10 months ago

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?

davidcalhoun commented 10 months ago

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)

levaleks commented 10 months ago

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.