feat(to-have-value): added new rule prefer-to-have-value (#111)

* feat(to-have-value): added new rule prefer-to-have-value

* formatting

* create all config for smoke test

* create all config for smoke test

* create all config for smoke test

* Apply suggestions from code review

Co-authored-by: Anton Niklasson <[email protected]>

* updated metas & docs

* fixed test

Co-authored-by: Anton Niklasson <[email protected]>

Author: benmonro

README.md

@@ -100,17 +100,19 @@ module.exports = {
 🔧 indicates that a rule is fixable.
 
 <!-- __BEGIN AUTOGENERATED TABLE__ -->
-Name | 👍 | 🔧 | Description
------ | ----- | ----- | -----
-[prefer-checked](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-checked.md) | 👍 | 🔧 | prefer toBeChecked over checking attributes
-[prefer-empty](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-empty.md) | 👍 | 🔧 | Prefer toBeEmpty over checking innerHTML
-[prefer-enabled-disabled](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-enabled-disabled.md) | 👍 | 🔧 | prefer toBeDisabled or toBeEnabled over checking attributes
-[prefer-focus](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-focus.md) | 👍 | 🔧 | prefer toHaveFocus over checking document.activeElement
-[prefer-in-document](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-in-document.md) | 👍 | 🔧 | Prefer .toBeInTheDocument() for asserting the existence of a DOM node
-[prefer-required](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-required.md) | 👍 | 🔧 | prefer toBeRequired over checking properties
-[prefer-to-have-attribute](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-to-have-attribute.md) | 👍 | 🔧 | prefer toHaveAttribute over checking  getAttribute/hasAttribute 
-[prefer-to-have-style](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-to-have-style.md) | 👍 | 🔧 | prefer toHaveStyle over checking element style
-[prefer-to-have-text-content](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-to-have-text-content.md) | 👍 | 🔧 | Prefer toHaveTextContent over checking element.textContent
+
+| Name                                                                                                                                           | 👍  | 🔧  | Description                                                           |
+| ---------------------------------------------------------------------------------------------------------------------------------------------- | --- | --- | --------------------------------------------------------------------- |
+| [prefer-checked](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-checked.md)                           | 👍  | 🔧  | prefer toBeChecked over checking attributes                           |
+| [prefer-empty](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-empty.md)                               | 👍  | 🔧  | Prefer toBeEmpty over checking innerHTML                              |
+| [prefer-enabled-disabled](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-enabled-disabled.md)         | 👍  | 🔧  | prefer toBeDisabled or toBeEnabled over checking attributes           |
+| [prefer-focus](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-focus.md)                               | 👍  | 🔧  | prefer toHaveFocus over checking document.activeElement               |
+| [prefer-in-document](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-in-document.md)                   | 👍  | 🔧  | Prefer .toBeInTheDocument() for asserting the existence of a DOM node |
+| [prefer-required](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-required.md)                         | 👍  | 🔧  | prefer toBeRequired over checking properties                          |
+| [prefer-to-have-attribute](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-to-have-attribute.md)       | 👍  | 🔧  | prefer toHaveAttribute over checking getAttribute/hasAttribute        |
+| [prefer-to-have-style](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-to-have-style.md)               | 👍  | 🔧  | prefer toHaveStyle over checking element style                        |
+| [prefer-to-have-text-content](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-to-have-text-content.md) | 👍  | 🔧  | Prefer toHaveTextContent over checking element.textContent            |
+| [prefer-to-have-value](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/prefer-to-have-value.md)               | 👍  | 🔧  | prefer toHaveValue over checking element.value                        |
 
 <!-- __END AUTOGENERATED TABLE__ -->
 
@@ -160,6 +162,7 @@ Thanks goes to these people ([emoji key][emojis]):
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

docs/rules/prefer-in-document.md

@@ -42,7 +42,7 @@ const bar = screen.queryByText("bar");
 expect(bar).not.toBeDefined();
 
 const baz = await screen.findByText("baz");
-expect(baz).toBeDefined()
+expect(baz).toBeDefined();
 ```
 
 ## When Not To Use It

docs/rules/prefer-to-have-value.md

@@ -0,0 +1,38 @@
+# prefer toHaveAttribute over checking getAttribute/hasAttribute (prefer-to-have-attribute)
+
+This rule is an autofixable rule that encourages the use of toHaveValue over checking the value attribute.
+
+## Rule Details
+
+This rule checks for usages of `.value` or `.toHaveAttribute("value")`.
+The only valid use case is when using greater/less than
+matchers since there isn't any equivalent use with `toHaveValue`
+
+Examples of **incorrect** code for this rule:
+
+```js
+expect(element).toHaveAttribute("value", "foo");
+expect(element).toHaveProperty("value", "foo");
+expect(element.value).toBe("foo");
+expect(element.value).not.toEqual("foo");
+expect(element.value).not.toStrictEqual("foo");
+```
+
+Examples of **correct** code for this rule:
+
+```js
+expect(element).toHaveValue("foo");
+expect(element.value).toBeGreaterThan(2);
+expect(element.value).toBeLessThan(2);
+```
+
+## When Not To Use It
+
+If you don't care about using built in matchers for checking attributes on dom
+elements.
+
+## Further Reading
+
+- [jest-dom toHaveAttribute](https://github.com/testing-library/jest-dom#tohaveattribute)
+- [getAttribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute)
+- [hasAttribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute)

package.json

@@ -30,6 +30,7 @@
   ],
   "scripts": {
     "build": "kcd-scripts build",
+    "pregenerate-readme-table": "yarn build",
     "generate-readme-table": "node build/generate-readme-table.js",
     "lint": "kcd-scripts lint",
     "setup": "npm install && npm run validate -s",

smoke-test/eslint-remote-tester.config.js

@@ -1,58 +1,51 @@
 module.exports = {
-    /** Repositories to scan */
-    repositories: require('./repositories.json'),
+  /** Repositories to scan */
+  repositories: require("./repositories.json"),
 
-    /** Extensions of files under scanning */
-    extensions: ['js', 'jsx', 'ts', 'tsx'],
+  /** Extensions of files under scanning */
+  extensions: ["js", "jsx", "ts", "tsx"],
 
-    /** Optional pattern used to exclude paths */
-    pathIgnorePattern: `(${[
-        'node_modules',
-        '\\/\\.', // Any file or directory starting with dot, e.g. ".git"
-        '/dist/',
-        '/build/',
+  /** Optional pattern used to exclude paths */
+  pathIgnorePattern: `(${[
+    "node_modules",
+    "\\/\\.", // Any file or directory starting with dot, e.g. ".git"
+    "/dist/",
+    "/build/",
 
-        // Common patterns for minified JS
-        'babel\\.js',
-        'vendor\\.js',
-        'vendors\\.js',
-        'chunk\\.js',
-        'bundle\\.js',
-        'react-dom\\.development\\.js',
-        '\\.min\\.js', // Any *.min.js
-    ].join('|')})`,
+    // Common patterns for minified JS
+    "babel\\.js",
+    "vendor\\.js",
+    "vendors\\.js",
+    "chunk\\.js",
+    "bundle\\.js",
+    "react-dom\\.development\\.js",
+    "\\.min\\.js", // Any *.min.js
+  ].join("|")})`,
 
-    /** Empty array since we are only interested in linter crashes */
-    rulesUnderTesting: [],
+  /** Empty array since we are only interested in linter crashes */
+  rulesUnderTesting: [],
 
-    /** Maximum amount of tasks ran concurrently */
-    concurrentTasks: 2,
+  /** Maximum amount of tasks ran concurrently */
+  concurrentTasks: 2,
 
-    /** Optional boolean flag used to enable caching of cloned repositories. For CIs it's ideal to disable caching. Defauls to true. */
-    cache: false,
+  /** Optional boolean flag used to enable caching of cloned repositories. For CIs it's ideal to disable caching. Defauls to true. */
+  cache: false,
 
-    /** ESLint configuration */
-    eslintrc: {
-        root: true,
-        env: {
-            es6: true,
-        },
-        parser: '@typescript-eslint/parser',
-        parserOptions: {
-            ecmaVersion: 2020,
-            sourceType: 'module',
-            ecmaFeatures: {
-                jsx: true,
-            },
-        },
-        plugins: [
-            'jest-dom',
-        ],
-        extends: [
-            'plugin:jest-dom/recommended',
-        ],
-        rules: {
-            'jest-dom/prefer-in-document': 'error'
-        },
+  /** ESLint configuration */
+  eslintrc: {
+    root: true,
+    env: {
+      es6: true,
     },
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: "module",
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+    plugins: ["jest-dom"],
+    extends: ["plugin:jest-dom/all"],
+  },
 };

src/__tests__/index.test.js

@@ -9,7 +9,7 @@ it.each(Object.keys(rules))("%s should export required fields", (ruleName) => {
   const rule = rules[ruleName];
   expect(rule).toHaveProperty("create", expect.any(Function));
   expect(rule.meta.docs.url).not.toBeEmpty();
-  expect(rule.meta.docs.category).toBe("jest-dom");
+  expect(rule.meta.docs.category).toBe("Best Practices");
   expect(rule.meta.docs.description).not.toBeEmpty();
 });
 

src/__tests__/lib/rules/prefer-to-have-value.js

@@ -0,0 +1,79 @@
+/* eslint-disable no-template-curly-in-string */
+/**
+ * @fileoverview Prefer toBeEmptyDOMElement over checking innerHTML
+ * @author Ben Monro
+ */
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+import { RuleTester } from "eslint";
+import * as rule from "../../../rules/prefer-to-have-value";
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({ parserOptions: { ecmaVersion: 2015 } });
+
+const errors = [{ messageId: "use-to-have-value" }];
+ruleTester.run("prefer-empty", rule, {
+  valid: [
+    `expect(element).toHaveValue('foo')`,
+    `expect(element.value).toBeGreaterThan(2);`,
+    `expect(element.value).toBeLessThan(2);`,
+  ],
+  invalid: [
+    {
+      code: `expect(element).toHaveAttribute('value', 'foo')`,
+      errors,
+      output: `expect(element).toHaveValue('foo')`,
+    },
+    {
+      code: `expect(element).toHaveProperty("value", "foo")`,
+      errors,
+      output: `expect(element).toHaveValue("foo")`,
+    },
+    {
+      code: `expect(element).not.toHaveAttribute('value', 'foo')`,
+      errors,
+      output: `expect(element).not.toHaveValue('foo')`,
+    },
+    {
+      code: `expect(element).not.toHaveProperty("value", "foo")`,
+      errors,
+      output: `expect(element).not.toHaveValue("foo")`,
+    },
+    {
+      code: `expect(element.value).toBe('foo')`,
+      errors,
+      output: `expect(element).toHaveValue('foo')`,
+    },
+    {
+      code: `expect(element.value).toEqual('foo')`,
+      errors,
+      output: `expect(element).toHaveValue('foo')`,
+    },
+    {
+      code: `expect(element.value).toStrictEqual('foo')`,
+      errors,
+      output: `expect(element).toHaveValue('foo')`,
+    },
+    {
+      code: `expect(element.value).not.toBe('foo')`,
+      errors,
+      output: `expect(element).not.toHaveValue('foo')`,
+    },
+    {
+      code: `expect(element.value).not.toEqual('foo')`,
+      errors,
+      output: `expect(element).not.toHaveValue('foo')`,
+    },
+    {
+      code: `expect(element.value).not.toStrictEqual('foo')`,
+      errors,
+      output: `expect(element).not.toHaveValue('foo')`,
+    },
+  ],
+});

src/index.js

@@ -25,9 +25,22 @@ export const generateRecommendedConfig = (allRules) =>
     {}
   );
 
+export const generateAllRulesConfig = (allRules) =>
+  Object.entries(allRules).reduce(
+    (memo, [name]) => ({
+      ...memo,
+      ...{ [`jest-dom/${name}`]: "error" },
+    }),
+    {}
+  );
+
 export const configs = {
   recommended: {
     plugins: ["jest-dom"],
     rules: generateRecommendedConfig(rules),
   },
+  all: {
+    plugins: ["jest-dom"],
+    rules: generateAllRulesConfig(rules),
+  },
 };

src/rules/prefer-checked.js

@@ -8,7 +8,7 @@ import createBannedAttributeRule from "../createBannedAttributeRule";
 export const meta = {
   docs: {
     description: "prefer toBeChecked over checking attributes",
-    category: "jest-dom",
+    category: "Best Practices",
     recommended: true,
     url: "prefer-checked",
   },

src/rules/prefer-empty.js

@@ -6,7 +6,7 @@
 export const meta = {
   docs: {
     description: "Prefer toBeEmpty over checking innerHTML",
-    category: "jest-dom",
+    category: "Best Practices",
     recommended: true,
     url: "prefer-empty",
   },

src/rules/prefer-enabled-disabled.js

@@ -8,7 +8,7 @@ import createBannedAttributeRule from "../createBannedAttributeRule";
 export const meta = {
   docs: {
     description: "prefer toBeDisabled or toBeEnabled over checking attributes",
-    category: "jest-dom",
+    category: "Best Practices",
     recommended: true,
     url: "prefer-enabled-disabled",
   },

src/rules/prefer-focus.js

@@ -16,7 +16,7 @@ export const meta = {
   docs: {
     url: "prefer-focus",
     description: "prefer toHaveFocus over checking document.activeElement",
-    category: "jest-dom",
+    category: "Best Practices",
     recommended: true,
   },
   fixable: "code",

src/rules/prefer-in-document.js

@@ -8,7 +8,7 @@ import { queries } from "../queries";
 export const meta = {
   type: "suggestion",
   docs: {
-    category: "jest-dom",
+    category: "Best Practices",
     description:
       "Prefer .toBeInTheDocument() for asserting the existence of a DOM node",
     url: "prefer-in-document",

src/rules/prefer-required.js

@@ -8,7 +8,7 @@ import createBannedAttributeRule from "../createBannedAttributeRule";
 export const meta = {
   docs: {
     description: "prefer toBeRequired over checking properties",
-    category: "jest-dom",
+    category: "Best Practices",
     recommended: true,
     url: "prefer-required",
   },

src/rules/prefer-to-have-attribute.js

@@ -9,7 +9,7 @@
 
 export const meta = {
   docs: {
-    category: "jest-dom",
+    category: "Best Practices",
     description:
       "prefer toHaveAttribute over checking  getAttribute/hasAttribute ",
     url: "prefer-to-have-attribute",

src/rules/prefer-to-have-style.js

@@ -9,7 +9,7 @@
 const camelCase = (str) => str.replace(/-([a-z])/g, (c) => c[1].toUpperCase());
 export const meta = {
   docs: {
-    category: "jest-dom",
+    category: "Best Practices",
     url: "prefer-to-have-style",
     description: "prefer toHaveStyle over checking element style",
     recommended: true,

src/rules/prefer-to-have-text-content.js

@@ -5,7 +5,7 @@
 
 export const meta = {
   docs: {
-    category: "jest-dom",
+    category: "Best Practices",
     url: "prefer-to-have-text-content",
     description: "Prefer toHaveTextContent over checking element.textContent",
     recommended: true,