@corva/eslint-plugin-test-selectors
v1.0.0
Published
Makes sure test DOM attributes (e.g. data-test-id) are added to interactive DOM elements.
Downloads
3,462
Readme
eslint-plugin-test-selectors
Enforces that a data-test-id
(case-sensitive) attribute is present on interactive DOM elements to help with UI testing.
- ❌
<button>Download</button>
- ✅
<button data-test-id="download-button">Download</button>
Installation
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
Usage
Add @corva/test-selectors
to the plugins section of your .eslintrc
configuration file:
{
"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:
{
"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:
{
"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:
{
"rules": {
"@corva/test-selectors/anchor": "off"
}
}
Note: see Supported Rules below for a full list.
Custom rule options
All tests can be customized individually by passing an object with one or more of the following properties.
testAttribute
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:
{
"rules": {
"@corva/test-selectors/onChange": [
"warn",
"always",
{ "testAttribute": "data-some-custom-attribute" }
]
}
}
Note: You can also pass multiple attributes
{
"rules": {
"@corva/test-selectors/onChange": [
"warn",
"always",
{ "testAttribute": ["data-testid", "testId"] }
]
}
}
ignoreDisabled
By default all elements with the disabled
attribute are ignored, e.g. <input disabled />
. If you don't want to ignore this attribute, set ignoreDisabled
to false
:
{
"rules": {
"@corva/test-selectors/onChange": ["warn", "always", { "ignoreDisabled": false }]
}
}
ignoreReadonly
By default all elements with the readonly
attribute are ignored, e.g. <input readonly />
. If you don't want to ignore this attribute, set ignoreReadonly
to false
:
{
"rules": {
"@corva/test-selectors/onChange": ["warn", "always", { "ignoreReadonly": false }]
}
}
htmlOnly
Only supported on button
rule, this option will exempt React components called Button from the rule.
{
"rules": {
"@corva/test-selectors/button": ["warn", "always", { "htmlOnly": true }]
}
}
Supported Rules
@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