Makes sure test DOM attributes (e.g. data-test-id) are added to interactive DOM elements.
npm install @corva/eslint-plugin-test-selectorsEnforces that a data-test-id (case-sensitive) attribute is present on interactive DOM elements to help with UI testing.
- ❌
- ✅
You'll first need to install ESLint, which requires Node.js (note that eslint-plugin-test-selectors requires Node.js 10+):
```
$ yarn add eslint --dev
Next, install @corva/eslint-plugin-test-selectors:
``
$ yarn add @corva/eslint-plugin-test-selectors --dev
Add @corva/test-selectors to the plugins section of your .eslintrc configuration file:
`json`
{
"plugins": ["@corva/test-selectors"]
}
If you want to use all the recommended default rules, you can simply add this line to the extends section of your .eslintrc configuration:
`json`
{
"extends": ["plugin:@corva/test-selectors/recommended"]
}
By default, this will run all Supported Rules and emit eslint warnings. If you want to be more strict, you can emit eslint errors by instead using plugin:@corva/test-selectors/recommendedWithErrors.
Another option: you can also selectively enable and disable individual rules in the rules section of your .eslintrc configuration. For instance, if you only want to enable the @corva/test-selectors/button rule, skip the extends addition above and simply add the following to the rules section of your .eslintrc configuration:
`json`
{
"rules": {
"@corva/test-selectors/button": ["warn", "always"]
}
}
If you like most of the recommended rules by adding the extends option above, but find one in particular to be bothersome, you can simply disable it:
`json`
{
"rules": {
"@corva/test-selectors/anchor": "off"
}
}
Note: see Supported Rules below for a full list.
All tests can be customized individually by passing an object with one or more of the following properties.
The default test attribute expected is data-test-id, but you can override it with whatever you like. Here is how you would use data-some-custom-attribute instead:
`json`
{
"rules": {
"@corva/test-selectors/onChange": [
"warn",
"always",
{ "testAttribute": "data-some-custom-attribute" }
]
}
}
Note: You can also pass multiple attributes
`json`
{
"rules": {
"@corva/test-selectors/onChange": [
"warn",
"always",
{ "testAttribute": ["data-testid", "testId"] }
]
}
}
By default all elements with the disabled attribute are ignored, e.g. . If you don't want to ignore this attribute, set ignoreDisabled to false:
`json`
{
"rules": {
"@corva/test-selectors/onChange": ["warn", "always", { "ignoreDisabled": false }]
}
}
By default all elements with the readonly attribute are ignored, e.g. . If you don't want to ignore this attribute, set ignoreReadonly to false:
`json`
{
"rules": {
"@corva/test-selectors/onChange": ["warn", "always", { "ignoreReadonly": false }]
}
}
Only supported on button rule, this option will exempt React components called Button from the rule.
`json`
{
"rules": {
"@corva/test-selectors/button": ["warn", "always", { "htmlOnly": true }]
}
}
- @corva/test-selectors/anchor@corva/test-selectors/button
- @corva/test-selectors/input
- @corva/test-selectors/onChange
- @corva/test-selectors/onClick
- @corva/test-selectors/onKeyDown
- @corva/test-selectors/onKeyUp
- @corva/test-selectors/onSubmit`
-