fix(to-have-text-content): improved handling non literals and regex in autofix (#65)

Author: benmonro

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-template-curly-in-string */
 /**
  * @fileoverview Prefer toHaveTextContent over checking element.textContent
  * @author Ben Monro
@@ -14,7 +15,7 @@ import * as rule from "../../../rules/prefer-to-have-text-content";
 // Tests
 //------------------------------------------------------------------------------
 
-const ruleTester = new RuleTester();
+const ruleTester = new RuleTester({ parserOptions: { ecmaVersion: 2015 } });
 ruleTester.run("prefer-to-have-text-content", rule, {
   valid: [
     `expect(string).toBe("foo")`,
@@ -93,6 +94,47 @@ ruleTester.run("prefer-to-have-text-content", rule, {
       ],
       output: `expect(container.firstChild).toHaveTextContent(/foo/)`,
     },
+    {
+      code: `expect(container.textContent).toContain(FOO.bar)`,
+      errors: [
+        {
+          message:
+            "Use toHaveTextContent instead of asserting on DOM node attributes",
+        },
+      ],
+      output: `expect(container).toHaveTextContent(new RegExp(FOO.bar))`,
+    },
+    {
+      code: `expect(container.textContent).not.toContain(FOO.bar)`,
+      errors: [
+        {
+          message:
+            "Use toHaveTextContent instead of asserting on DOM node attributes",
+        },
+      ],
+      output: `expect(container).not.toHaveTextContent(new RegExp(FOO.bar))`,
+    },
+    {
+      code: "expect(container.textContent).toContain(`${FOO.bar} baz`)",
+      errors: [
+        {
+          message:
+            "Use toHaveTextContent instead of asserting on DOM node attributes",
+        },
+      ],
+      output:
+        "expect(container).toHaveTextContent(new RegExp(`${FOO.bar} baz`))",
+    },
+    {
+      code: `expect(container.textContent).toContain(bazify(FOO.bar))`,
+      errors: [
+        {
+          message:
+            "Use toHaveTextContent instead of asserting on DOM node attributes",
+        },
+      ],
+      output: `expect(container).toHaveTextContent(new RegExp(bazify(FOO.bar)))`,
+    },
     {
       code: 'expect(element.textContent).toMatch("foo")',
       errors: [
@@ -103,6 +145,27 @@ ruleTester.run("prefer-to-have-text-content", rule, {
       ],
       output: `expect(element).toHaveTextContent(/foo/)`,
     },
+    {
+      code: "expect(element.textContent).toMatch(/foo bar/)",
+      errors: [
+        {
+          message:
+            "Use toHaveTextContent instead of asserting on DOM node attributes",
+        },
+      ],
+      output: "expect(element).toHaveTextContent(/foo bar/)",
+    },
+    {
+      code: "expect(element.textContent).not.toMatch(/foo bar/)",
+      errors: [
+        {
+          message:
+            "Use toHaveTextContent instead of asserting on DOM node attributes",
+        },
+      ],
+      output: "expect(element).not.toHaveTextContent(/foo bar/)",
+    },
+
     {
       code: 'expect(element.textContent).not.toMatch("foo")',
       errors: [

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

@@ -16,17 +16,31 @@ export const create = (context) => ({
     node
   ) {
     const expectedArg = node.parent.parent.parent.arguments[0];
+
+    const expectedArgSource = context.getSourceCode().getText(expectedArg);
     context.report({
       node: node.parent,
       message: `Use toHaveTextContent instead of asserting on DOM node attributes`,
-      fix: (fixer) => [
-        fixer.removeRange([node.property.range[0] - 1, node.property.range[1]]),
-        fixer.replaceTextRange(
-          node.parent.parent.property.range,
-          "toHaveTextContent"
-        ),
-        fixer.replaceTextRange(expectedArg.range, `/${expectedArg.value}/`),
-      ],
+      fix: (fixer) => {
+        return [
+          fixer.removeRange([
+            node.property.range[0] - 1,
+            node.property.range[1],
+          ]),
+          fixer.replaceTextRange(
+            node.parent.parent.property.range,
+            "toHaveTextContent"
+          ),
+          fixer.replaceTextRange(
+            expectedArg.range,
+            expectedArg.type === "Literal"
+              ? expectedArg.regex
+                ? expectedArgSource
+                : `/${expectedArg.value}/`
+              : `new RegExp(${expectedArgSource})`
+          ),
+        ];
+      },
     });
   },
   [`MemberExpression[property.name='textContent'][parent.callee.name='expect'][parent.parent.property.name=/toBe$|to(Strict)?Equal/]`](
@@ -63,6 +77,7 @@ export const create = (context) => ({
     node
   ) {
     const expectedArg = node.parent.parent.parent.parent.arguments[0];
+    const expectedArgSource = context.getSourceCode().getText(expectedArg);
     context.report({
       node: node.parent,
       message: `Use toHaveTextContent instead of asserting on DOM node attributes`,
@@ -72,7 +87,14 @@ export const create = (context) => ({
           node.parent.parent.parent.property.range,
           "toHaveTextContent"
         ),
-        fixer.replaceTextRange(expectedArg.range, `/${expectedArg.value}/`),
+        fixer.replaceTextRange(
+          expectedArg.range,
+          expectedArg.type === "Literal"
+            ? expectedArg.regex
+              ? expectedArgSource
+              : `/${expectedArg.value}/`
+            : `new RegExp(${expectedArgSource})`
+        ),
       ],
     });
   },