Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

testAttribute case sensitivity #26

Open
levaleks opened this issue Dec 1, 2023 · 2 comments
Open

testAttribute case sensitivity #26

levaleks opened this issue Dec 1, 2023 · 2 comments

Comments

@levaleks
Copy link

levaleks commented Dec 1, 2023

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
Copy link
Owner

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
Copy link
Author

levaleks commented Dec 7, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants