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)

lib/index.js

@@ -3,6 +3,7 @@
 const rules = {
  'await-async-query': require('./rules/await-async-query'),
  'await-fire-event': require('./rules/await-fire-event'),
+ 'jest-dom-prefer-enabled-disabled': require('./rules/jest-dom-prefer-enabled-disabled'),
  '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-enabled-disabled.js

@@ -0,0 +1,100 @@
+/**
+ * @fileoverview prefer toBeDisabled or toBeEnabled over attribute checks
+ * @author Ben Monro
+ */
+'use strict';
+
+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: function(context) {
+ function getCorrectFunctionFor(node, negated = false) {
+ return (node.arguments.length === 1 ||
+ node.arguments[1].value === true ||
+ node.arguments[1].value === '') &&
+ !negated
+ ? 'toBeDisabled()'
+ : 'toBeEnabled()';
+ }
+ return {
+ "CallExpression[callee.property.name=/toBeEnabled|toBeDisabled/][callee.object.property.name='not'][callee.object.object.callee.name='expect']"(
+ node
+ ) {
+ const incorrectFunction = node.callee.property.name;
+
+ const correctFunction =
+ incorrectFunction === 'toBeDisabled' ? 'toBeEnabled' : 'toBeDisabled';
+ 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 isDisabledArg = node.arguments[0].value === 'disabled';
+
+ if (isDisabledArg) {
+ const correctFunction = getCorrectFunctionFor(node, true);
+
+ const incorrectFunction = node.callee.property.name;
+ context.report({
+ message: `Use ${correctFunction} instead of not.${incorrectFunction}('disabled')`,
+ 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
+ ) {
+ const isDisabledArg = node.arguments[0].value === 'disabled';
+
+ if (isDisabledArg) {
+ const correctFunction = getCorrectFunctionFor(node);
+
+ const incorrectFunction = node.callee.property.name;
+
+ const message =
+ node.arguments.length === 1
+ ? `Use toBeDisabled() instead of ${incorrectFunction}('disabled')`
+ : `Use ${correctFunction} instead of ${incorrectFunction}(${node.arguments[0].raw}, ${node.arguments[1].raw})`;
+ context.report({
+ node: node.callee.property,
+ message,
+ fix(fixer) {
+ return [
+ fixer.replaceTextRange(
+ [node.callee.property.start, node.end],
+ correctFunction
+ ),
+ ];
+ },
+ });
+ }
+ },
+ };
+ },
+};

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

@@ -0,0 +1,128 @@
+/**
+ * @fileoverview prefer toBeDisabled or toBeEnabled over attribute checks
+ * @author Ben Monro
+ */
+'use strict';
+const rule = require('../../../lib/rules/jest-dom-prefer-enabled-disabled');
+
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+ parserOptions: { ecmaVersion: 2015, sourceType: 'module' },
+});
+ruleTester.run('jest-dom-prefer-enabled-disabled', rule, {
+ valid: [
+ `expect(element).toBeDisabled()`,
+ `expect(element).toHaveProperty('checked', true)`,
+ ],
+
+ invalid: [
+ {
+ code: "expect(element).toHaveProperty('disabled', true)",
+ errors: [
+ {
+ message:
+ "Use toBeDisabled() instead of toHaveProperty('disabled', true)",
+ },
+ ],
+ output: 'expect(element).toBeDisabled()',
+ },
+ {
+ code: "expect(element).toHaveProperty('disabled', false)",
+ errors: [
+ {
+ message:
+ "Use toBeEnabled() instead of toHaveProperty('disabled', false)",
+ },
+ ],
+ output: 'expect(element).toBeEnabled()',
+ },
+ {
+ code: "expect(element).toHaveAttribute('disabled', false)",
+ errors: [
+ {
+ message:
+ "Use toBeEnabled() instead of toHaveAttribute('disabled', false)",
+ },
+ ],
+ output: 'expect(element).toBeEnabled()',
+ },
+ {
+ code: "expect(element).toHaveProperty('disabled')",
+ errors: [
+ {
+ message: "Use toBeDisabled() instead of toHaveProperty('disabled')",
+ },
+ ],
+ output: 'expect(element).toBeDisabled()',
+ },
+ {
+ code: "expect(element).toHaveAttribute('disabled')",
+ errors: [
+ {
+ message: "Use toBeDisabled() instead of toHaveAttribute('disabled')",
+ },
+ ],
+ output: 'expect(element).toBeDisabled()',
+ },
+ {
+ code: "expect(element).not.toHaveAttribute('disabled')",
+ errors: [
+ {
+ message:
+ "Use toBeEnabled() instead of not.toHaveAttribute('disabled')",
+ },
+ ],
+ output: 'expect(element).toBeEnabled()',
+ },
+ {
+ code: "expect(element).not.toHaveProperty('disabled')",
+ errors: [
+ {
+ message:
+ "Use toBeEnabled() instead of not.toHaveProperty('disabled')",
+ },
+ ],
+ output: 'expect(element).toBeEnabled()',
+ },
+ {
+ code: 'expect(element).not.toBeEnabled()',
+ errors: [
+ {
+ message: 'Use toBeDisabled() instead of not.toBeEnabled()',
+ },
+ ],
+ output: 'expect(element).toBeDisabled()',
+ },
+ {
+ code: 'expect(element).toHaveAttribute("disabled", "")',
+ errors: [
+ {
+ message:
+ 'Use toBeDisabled() instead of toHaveAttribute("disabled", "")',
+ },
+ ],
+ output: 'expect(element).toBeDisabled()',
+ },
+ {
+ code: 'expect(getByText("foo")).toHaveAttribute("disabled", "")',
+ errors: [
+ {
+ message:
+ 'Use toBeDisabled() instead of toHaveAttribute("disabled", "")',
+ },
+ ],
+ output: 'expect(getByText("foo")).toBeDisabled()',
+ },
+ {
+ code: 'expect(getByText("foo")).not.toHaveProperty("disabled")',
+ errors: [
+ {
+ message:
+ "Use toBeEnabled() instead of not.toHaveProperty('disabled')",
+ },
+ ],
+ output: 'expect(getByText("foo")).toBeEnabled()',
+ },
+ ],
+});