feat: add jest-dom-prefer-enabled-disabled, jest-dom-prefer-required, jest-dom-prefer-checked rules

README.md

@@ -129,15 +129,16 @@ To enable this configuration use the `extends` property in your
 
 ## Supported Rules
 
-| Rule | Description | Configurations | Fixable |
-| -------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------ |
-| [await-async-query](docs/rules/await-async-query.md) | Enforce async queries to have proper `await` | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | |
-| [await-fire-event](docs/rules/await-fire-event.md) | Enforce async fire event methods to be awaited | ![vue-badge][] | |
-| [no-await-sync-query](docs/rules/no-await-sync-query.md) | Disallow unnecessary `await` for sync queries | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | |
-| [no-debug](docs/rules/no-debug.md) | Disallow the use of `debug` | ![angular-badge][] ![react-badge][] ![vue-badge][] | |
-| [no-dom-import](docs/rules/no-dom-import.md) | Disallow importing from DOM Testing Library | ![angular-badge][] ![react-badge][] ![vue-badge][] | ![fixable-badge][] |
-| [prefer-expect-query-by](docs/rules/prefer-expect-query-by.md) | Disallow the use of `expect(getBy*)` | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | |
-| [prefer-explicit-assert](docs/rules/prefer-explicit-assert.md) | Suggest using explicit assertions rather than just `getBy*` queries | | |
+| Rule | Description | Configurations | Fixable |
+| ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------ |
+| [await-async-query](docs/rules/await-async-query.md) | Enforce async queries to have proper `await` | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | |
+| [await-fire-event](docs/rules/await-fire-event.md) | Enforce async fire event methods to be awaited | ![vue-badge][] | |
+| [jest-dom-prefer-enabled-disabled](docs/rules/jest-dom-prefer-enabled-disabled.md) | Disallow the use of `toHaveProperty('disabled')` and `toHaveAttribute('disabled')` | | ![fixable-badge][] |
+| [no-await-sync-query](docs/rules/no-await-sync-query.md) | Disallow unnecessary `await` for sync queries | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | |
+| [no-debug](docs/rules/no-debug.md) | Disallow the use of `debug` | ![angular-badge][] ![react-badge][] ![vue-badge][] | |
+| [no-dom-import](docs/rules/no-dom-import.md) | Disallow importing from DOM Testing Library | ![angular-badge][] ![react-badge][] ![vue-badge][] | ![fixable-badge][] |
+| [prefer-expect-query-by](docs/rules/prefer-expect-query-by.md) | Disallow the use of `expect(getBy*)` | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | |
+| [prefer-explicit-assert](docs/rules/prefer-explicit-assert.md) | Suggest using explicit assertions rather than just `getBy*` queries | | |
 
 [build-badge]: https://img.shields.io/travis/Belco90/eslint-plugin-testing-library?style=flat-square
 [build-url]: https://travis-ci.org/belco90/eslint-plugin-testing-library

docs/rules/jest-dom-prefer-enabled-disabled.md

@@ -0,0 +1,76 @@
+# prefer toBeDisabled() or toBeEnabled() over toHaveProperty('disabled', true|false) (jest-dom-prefer-enabled-disabled)
+
+## Rule Details
+
+This rule aims to prevent false positives and improve readability and should only be used with the `@testing-library/jest-dom` package. See below for examples of those potential issues and why this rule is recommended. The rule is autofixable and will replace any instances of `.toHaveProperty()` or `.toHaveAttribute()` with `.toBeEnabled()` or `toBeDisabled()` as appropriate.
+
+In addition, to avoid double negatives and confusing syntax, `expect(element).not.toBeDisabled()` is also reported and auto-fixed to `expect(element).toBeEnabled()` and vice versa.
+
+### False positives
+
+Consider these 2 snippets:
+
+```js
+const { getByRole } = render(<input type="checkbox" disabled />);
+const element = getByRole('checkbox');
+expect(element).toHaveProperty('disabled'); // passes
+
+const { getByRole } = render(<input type="checkbox" />);
+const element = getByRole('checkbox');
+expect(element).toHaveProperty('disabled'); // also passes 😱
+```
+
+### Readability
+
+Consider the following snippets:
+
+```js
+const { getByRole } = render(<input type="checkbox" />);
+const element = getByRole('checkbox');
+
+expect(element).toHaveAttribute('disabled', false); // fails
+expect(element).toHaveAttribute('disabled', ''); // fails
+expect(element).not.toHaveAttribute('disabled', ''); // passes
+
+expect(element).not.toHaveAttribute('disabled', true); // passes.
+expect(element).not.toHaveAttribute('disabled', false); // also passes.
+```
+
+As you can see, using `toHaveAttribute` in this case is confusing, unintuitive and can even lead to false positive tests.
+
+Examples of **incorrect** code for this rule:
+
+```js
+expect(element).toHaveProperty('disabled', true);
+expect(element).toHaveAttribute('disabled', false);
+
+expect(element).toHaveAttribute('disabled');
+expect(element).not.toHaveProperty('disabled');
+
+expect(element).not.toBeDisabled();
+expect(element).not.toBeEnabled();
+```
+
+Examples of **correct** code for this rule:
+
+```js
+expect(element).toBeEnabled();
+
+expect(element).toBeDisabled();
+
+expect(element).toHaveProperty('checked', true);
+
+expect(element).toHaveAttribute('checked');
+```
+
+## When Not To Use It
+
+Don't use this rule if you:
+
+- don't use `jest-dom`
+- want to allow `.toHaveProperty('disabled', true|false);`
+
+## Further reading
+
+- [toBeDisabled](https://github.com/testing-library/jest-dom#tobedisabled)
+- [toBeEnabled](https://github.com/testing-library/jest-dom#tobeenabled)

jest.config.js

@@ -1,3 +1,14 @@
 module.exports = {
  testMatch: ['**/tests/**/*.js'],
+ collectCoverage: true,
+ coverageThreshold: {
+ global: {
+ branches: 96.55,
+ functions: 100,
+ lines: 98.97,
+ statements: 0,
+ },
+ },
+ testPathIgnorePatterns: ['<rootDir>/tests/fixtures/'],
+ collectCoverageFrom: ['lib/**/*.js', '!**/node_modules/**'],
 };

lib/createBannedAttributeRule.js

@@ -0,0 +1,81 @@
+module.exports = ({ preferred, negatedPreferred, attributes }) => context => {
+ function getCorrectFunctionFor(node, negated = false) {
+ return (node.arguments.length === 1 ||
+ node.arguments[1].value === true ||
+ node.arguments[1].value === '') &&
+ !negated
+ ? preferred
+ : negatedPreferred;
+ }
+
+ const isBannedArg = node =>
+ attributes.some(attr => attr === node.arguments[0].value);
+
+ return {
+ [`CallExpression[callee.property.name=/${preferred}|${negatedPreferred}/][callee.object.property.name='not'][callee.object.object.callee.name='expect']`](
+ node
+ ) {
+ if (negatedPreferred.startsWith('toBe')) {
+ const incorrectFunction = node.callee.property.name;
+
+ const correctFunction =
+ incorrectFunction === preferred ? negatedPreferred : preferred;
+ context.report({
+ message: `Use ${correctFunction}() instead of not.${incorrectFunction}()`,
+ node,
+ fix(fixer) {
+ return fixer.replaceTextRange(
+ [node.callee.object.property.start, node.end],
+ `${correctFunction}()`
+ );
+ },
+ });
+ }
+ },
+ "CallExpression[callee.property.name=/toHaveProperty|toHaveAttribute/][callee.object.property.name='not'][callee.object.object.callee.name='expect']"(
+ node
+ ) {
+ const arg = node.arguments[0].value;
+ if (isBannedArg(node)) {
+ const correctFunction = getCorrectFunctionFor(node, true);
+
+ const incorrectFunction = node.callee.property.name;
+ context.report({
+ message: `Use ${correctFunction}() instead of not.${incorrectFunction}('${arg}')`,
+ node,
+ fix(fixer) {
+ return fixer.replaceTextRange(
+ [node.callee.object.property.start, node.end],
+ `${correctFunction}()`
+ );
+ },
+ });
+ }
+ },
+ "CallExpression[callee.object.callee.name='expect'][callee.property.name=/toHaveProperty|toHaveAttribute/]"(
+ node
+ ) {
+ if (isBannedArg(node)) {
+ const correctFunction = getCorrectFunctionFor(node);
+
+ const incorrectFunction = node.callee.property.name;
+
+ const message = `Use ${correctFunction}() instead of ${incorrectFunction}(${node.arguments
+ .map(({ raw }) => raw)
+ .join(', ')})`;
+ context.report({
+ node: node.callee.property,
+ message,
+ fix(fixer) {
+ return [
+ fixer.replaceTextRange(
+ [node.callee.property.start, node.end],
+ `${correctFunction}()`
+ ),
+ ];
+ },
+ });
+ }
+ },
+ };
+};

lib/index.js

@@ -3,6 +3,9 @@
 const rules = {
  'await-async-query': require('./rules/await-async-query'),
  'await-fire-event': require('./rules/await-fire-event'),
+ 'jest-dom-prefer-checked': require('./rules/jest-dom-prefer-checked'),
+ 'jest-dom-prefer-enabled-disabled': require('./rules/jest-dom-prefer-enabled-disabled'),
+ 'jest-dom-prefer-required': require('./rules/jest-dom-prefer-required'),
  'no-await-sync-query': require('./rules/no-await-sync-query'),
  'no-debug': require('./rules/no-debug'),
  'no-dom-import': require('./rules/no-dom-import'),

lib/rules/jest-dom-prefer-checked.js

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview prefer toBeDisabled or toBeEnabled over attribute checks
+ * @author Ben Monro
+ */
+'use strict';
+
+const createBannedAttributeRule = require('../createBannedAttributeRule');
+const { getDocsUrl } = require('../utils');
+
+module.exports = {
+ meta: {
+ docs: {
+ description:
+ 'prefer toBeDisabled or toBeEnabled over checking properties',
+ category: 'jest-dom',
+ recommended: false,
+ url: getDocsUrl('jest-dom-prefer-checked'),
+ },
+ fixable: 'code',
+ },
+
+ create: createBannedAttributeRule({
+ preferred: 'toBeChecked',
+ negatedPreferred: 'not.toBeChecked',
+ attributes: ['checked', 'aria-checked'],
+ }),
+};

lib/rules/jest-dom-prefer-enabled-disabled.js

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview prefer toBeDisabled or toBeEnabled over attribute checks
+ * @author Ben Monro
+ */
+'use strict';
+
+const createBannedAttributeRule = require('../createBannedAttributeRule');
+const { getDocsUrl } = require('../utils');
+
+module.exports = {
+ meta: {
+ docs: {
+ description:
+ 'prefer toBeDisabled or toBeEnabled over checking properties',
+ category: 'jest-dom',
+ recommended: false,
+ url: getDocsUrl('jest-dom-prefer-enabled-disabled'),
+ },
+ fixable: 'code',
+ },
+
+ create: createBannedAttributeRule({
+ preferred: 'toBeDisabled',
+ negatedPreferred: 'toBeEnabled',
+ attributes: ['disabled'],
+ }),
+};

lib/rules/jest-dom-prefer-required.js

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview prefer toBeDisabled or toBeEnabled over attribute checks
+ * @author Ben Monro
+ */
+'use strict';
+
+const createBannedAttributeRule = require('../createBannedAttributeRule');
+const { getDocsUrl } = require('../utils');
+
+module.exports = {
+ meta: {
+ docs: {
+ description:
+ 'prefer toBeDisabled or toBeEnabled over checking properties',
+ category: 'jest-dom',
+ recommended: false,
+ url: getDocsUrl('jest-dom-prefer-required'),
+ },
+ fixable: 'code',
+ },
+
+ create: createBannedAttributeRule({
+ preferred: 'toBeRequired',
+ negatedPreferred: 'not.toBeRequired',
+ attributes: ['required', 'aria-required'],
+ }),
+};