feat: Added prefer-to-have-text-content (#37)

* add .vscode to git ignore

* formatting

* added toHaveTextContent rule

* added toHaveTextContent rule

* formatting

* -u

* handling not

* handling not

* whitespace

* updated readme

Co-authored-by: Ben Monro <[email protected]>

Author: benmonro

.eslintrc.json

@@ -6,17 +6,16 @@
         "commonjs": true,
         "es6": true,
         "node": true
-        // "jest/globals": true
     },
     "plugins": [
         "eslint-plugin",
         "prettier"
     ],
     "extends": [
-        "plugin:eslint-plugin/recommended"
+        "plugin:eslint-plugin/recommended",
+        "prettier"
     ],
     "rules": {
-        "prettier/prettier": "error",
         "no-var": "error"
     }
-}
+}

.gitignore

@@ -2,3 +2,4 @@ node_modules
 coverage
 yarn.lock
 package-lock.json
+.vscode

.prettierrc.json

@@ -74,6 +74,7 @@ Name | ✔️ | 🛠 | Description
 [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-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-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
 <!-- __END AUTOGENERATED TABLE__ -->
 
 ## Contributors ✨

README.md

@@ -1,12 +1,12 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
-const path = require('path');
-const rules = require('..').rules;
+const fs = require("fs");
+const path = require("path");
+const rules = require("..").rules;
 
-const README_LOCATION = path.resolve(__dirname, '..', 'README.md');
-const BEGIN_TABLE_MARKER = '<!-- __BEGIN AUTOGENERATED TABLE__ -->\n';
-const END_TABLE_MARKER = '\n<!-- __END AUTOGENERATED TABLE__ -->';
+const README_LOCATION = path.resolve(__dirname, "..", "README.md");
+const BEGIN_TABLE_MARKER = "<!-- __BEGIN AUTOGENERATED TABLE__ -->\n";
+const END_TABLE_MARKER = "\n<!-- __END AUTOGENERATED TABLE__ -->";
 
 const expectedTableLines = Object.keys(rules)
   .sort()
@@ -17,19 +17,19 @@ const expectedTableLines = Object.keys(rules)
       lines.push(
         [
           `[${ruleId}](https://github.com/testing-library/eslint-plugin-jest-dom/blob/master/docs/rules/${ruleId}.md)`,
-          rule.meta.docs.recommended ? '✔️' : '',
-          rule.meta.fixable ? '🛠' : '',
-          rule.meta.docs.description,
-        ].join(' | ')
+          rule.meta.docs.recommended ? "✔️" : "",
+          rule.meta.fixable ? "🛠" : "",
+          rule.meta.docs.description
+        ].join(" | ")
       );
 
       return lines;
     },
-    ['Name | ✔️ | 🛠 | Description', '----- | ----- | ----- | -----']
+    ["Name | ✔️ | 🛠 | Description", "----- | ----- | ----- | -----"]
   )
-  .join('\n');
+  .join("\n");
 
-const readmeContents = fs.readFileSync(README_LOCATION, 'utf8');
+const readmeContents = fs.readFileSync(README_LOCATION, "utf8");
 
 if (!readmeContents.includes(BEGIN_TABLE_MARKER)) {
   throw new Error(

build/generate-readme-table.js

@@ -0,0 +1,40 @@
+# Prefer toHaveTextContent over checking element.textContent (prefer-to-have-text-content)
+
+Please describe the origin of the rule here.
+
+## Rule Details
+
+This rule aims to prevent checking of the `textContent` DOM node attribute in tests and prefer `toHaveTextContent` instead.
+
+Examples of **incorrect** code for this rule:
+
+```js
+    expect(element.textContent).toBe("foo")
+    expect(container.firstChild.textContent).toBe("foo")
+    expect(getByText('foo').textContent).toBe("foo")
+    expect(screen.getByText('foo').textContent).toBe("foo")
+    expect(element.textContent).toEqual("foo")
+    expect(element.textContent).toContain("foo")
+    expect(element.textContent).not.toBe("foo")
+    expect(element.textContent).not.toContain("foo")
+
+```
+
+Examples of **correct** code for this rule:
+
+```js
+
+
+    expect(string).toBe("foo"),
+    expect(element).toHaveTextContent("foo"),
+    expect(container.lastNode).toBe("foo")
+
+```
+
+## When Not To Use It
+
+Don't use this rule if you don't care about the added readability and improvements that `toHaveTextContent` offers to your expects.
+
+## Further Reading
+
+* [Docs on toHaveContent](https://github.com/testing-library/jest-dom#tohavetextcontent)

docs/rules/prefer-to-have-text-content.md

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

jest.config.js

@@ -2,7 +2,7 @@ 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 === '') &&
+      node.arguments[1].value === "") &&
       !negated
       ? preferred
       : negatedPreferred;
@@ -15,7 +15,7 @@ module.exports = ({ preferred, negatedPreferred, attributes }) => context => {
     [`CallExpression[callee.property.name=/${preferred}|${negatedPreferred}/][callee.object.property.name='not'][callee.object.object.callee.name='expect']`](
       node
     ) {
-      if (negatedPreferred.startsWith('toBe')) {
+      if (negatedPreferred.startsWith("toBe")) {
         const incorrectFunction = node.callee.property.name;
 
         const correctFunction =
@@ -28,7 +28,7 @@ module.exports = ({ preferred, negatedPreferred, attributes }) => context => {
               [node.callee.object.property.range[0], node.range[1]],
               `${correctFunction}()`
             );
-          },
+          }
         });
       }
     },
@@ -37,14 +37,14 @@ module.exports = ({ preferred, negatedPreferred, attributes }) => context => {
       node
     ) {
       const {
-        arguments: [{ property, property: { name } = {} }],
+        arguments: [{ property, property: { name } = {} }]
       } = node.callee.object;
       const matcher = node.callee.property.name;
       const matcherArg = node.arguments.length && node.arguments[0].value;
       if (attributes.some(attr => attr === name)) {
         const isNegated =
-          matcher.endsWith('Falsy') ||
-          ((matcher === 'toBe' || matcher === 'toEqual') &&
+          matcher.endsWith("Falsy") ||
+          ((matcher === "toBe" || matcher === "toEqual") &&
             matcherArg !== true);
         const correctFunction = getCorrectFunctionFor(
           node.callee.object,
@@ -59,9 +59,9 @@ module.exports = ({ preferred, negatedPreferred, attributes }) => context => {
               fixer.replaceTextRange(
                 [node.callee.property.range[0], node.range[1]],
                 `${correctFunction}()`
-              ),
+              )
             ];
-          },
+          }
         });
       }
     },
@@ -81,7 +81,7 @@ module.exports = ({ preferred, negatedPreferred, attributes }) => context => {
               [node.callee.object.property.range[0], node.range[1]],
               `${correctFunction}()`
             );
-          },
+          }
         });
       }
     },
@@ -95,7 +95,7 @@ module.exports = ({ preferred, negatedPreferred, attributes }) => context => {
 
         const message = `Use ${correctFunction}() instead of ${incorrectFunction}(${node.arguments
           .map(({ raw }) => raw)
-          .join(', ')})`;
+          .join(", ")})`;
         context.report({
           node: node.callee.property,
           message,
@@ -104,11 +104,11 @@ module.exports = ({ preferred, negatedPreferred, attributes }) => context => {
               fixer.replaceTextRange(
                 [node.callee.property.range[0], node.range[1]],
                 `${correctFunction}()`
-              ),
+              )
             ];
-          },
+          }
         });
       }
-    },
+    }
   };
 };

lib/createBannedAttributeRule.js

@@ -2,34 +2,34 @@
  * @fileoverview lint rules for use with jest-dom
  * @author Ben Monro
  */
-'use strict';
+"use strict";
 
 //------------------------------------------------------------------------------
 // Requirements
 //------------------------------------------------------------------------------
 
-let requireIndex = require('requireindex');
+let requireIndex = require("requireindex");
 
 //------------------------------------------------------------------------------
 // Plugin Definition
 //------------------------------------------------------------------------------
 
 // import all rules in lib/rules
-module.exports.rules = requireIndex(__dirname + '/rules');
+module.exports.rules = requireIndex(__dirname + "/rules");
 
 module.exports.generateRecommendedConfig = rules => {
   return Object.entries(rules).reduce(
     (memo, [name, rule]) =>
       rule.meta.docs.recommended
-        ? { ...memo, [`jest-dom/${name}`]: 'error' }
+        ? { ...memo, [`jest-dom/${name}`]: "error" }
         : memo,
     {}
   );
 };
 
 module.exports.configs = {
   recommended: {
-    plugins: ['jest-dom'],
-    rules: module.exports.generateRecommendedConfig(module.exports.rules),
-  },
+    plugins: ["jest-dom"],
+    rules: module.exports.generateRecommendedConfig(module.exports.rules)
+  }
 };

lib/index.js

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