feat(no-dom-import): suggest proper framework to import from (testing-library#14)

* feat: suggest proper framework to import from

* fix: report error depending on dom library's name

* docs: add docs on no-dom-import framework option

* feat: add fixer for no-dom-import when option is specified

Author: thomaslombart

docs/rules/no-dom-import.md

@@ -57,6 +57,20 @@ const { fireEvent } = require('react-testing-library');
 const { fireEvent } = require('@testing-library/react');
 ```
 
+## Options
+
+This rule has an option in case you want to tell the user which framework to use.
+
+### Example
+
+```json
+{
+  "testing-library/no-dom-import": ["error", "react"]
+}
+```
+
+With the configuration above, if the user imports from `@testing-library/dom` or `dom-testing-library` instead of the used framework, ESLint will tell the user to import from `@testing-library/react` or `react-testing-library`.
+
 ## Further Reading
 
 - [Angular Testing Library API](https://testing-library.com/docs/angular-testing-library/api)

lib/index.js

@@ -21,15 +21,27 @@ module.exports = {
     },
     angular: {
       plugins: ['testing-library'],
-      rules: { ...recommendedRules, 'testing-library/no-debug': 'warn' },
+      rules: {
+        ...recommendedRules,
+        'testing-library/no-debug': 'warn',
+        'testing/library/no-dom-import': ['error', 'angular'],
+      },
     },
     react: {
       plugins: ['testing-library'],
-      rules: { ...recommendedRules, 'testing-library/no-debug': 'warn' },
+      rules: {
+        ...recommendedRules,
+        'testing-library/no-debug': 'warn',
+        'testing/library/no-dom-import': ['error', 'react'],
+      },
     },
     vue: {
       plugins: ['testing-library'],
-      rules: { ...recommendedRules, 'testing-library/no-debug': 'warn' },
+      rules: {
+        ...recommendedRules,
+        'testing-library/no-debug': 'warn',
+        'testing/library/no-dom-import': ['error', 'vue'],
+      },
     },
   },
 };

lib/rules/no-dom-import.js

@@ -18,35 +18,78 @@ module.exports = {
     },
     messages: {
       noDomImport:
-        'import from DOM Testing Library is restricted, import from corresponding Testing library framework instead',
+        'import from DOM Testing Library is restricted, import from corresponding Testing Library framework instead',
+      noDomImportFramework:
+        'import from DOM Testing Library is restricted, import from {{module}} instead',
     },
-    fixable: null,
-    schema: [],
+    fixable: 'code',
+    schema: [
+      {
+        type: 'string',
+      },
+    ],
   },
 
   create: function(context) {
+    const framework = context.options[0];
+
     return {
       ImportDeclaration(node) {
-        if (DOM_TESTING_LIBRARY_MODULES.includes(node.source.value)) {
-          context.report({
-            node,
-            messageId: 'noDomImport',
-          });
+        const domModuleName = DOM_TESTING_LIBRARY_MODULES.find(
+          module => module === node.source.value
+        );
+
+        if (domModuleName) {
+          report(context, node, domModuleName);
         }
       },
 
       [`CallExpression > Identifier[name="require"]`](node) {
         const { arguments: args } = node.parent;
 
-        if (
-          args.some(args => DOM_TESTING_LIBRARY_MODULES.includes(args.value))
-        ) {
-          context.report({
-            node,
-            messageId: 'noDomImport',
-          });
+        const literalNodeDomModuleName = args.find(args =>
+          DOM_TESTING_LIBRARY_MODULES.includes(args.value)
+        );
+
+        if (literalNodeDomModuleName) {
+          report(context, node, literalNodeDomModuleName.value);
         }
       },
     };
+
+    function report(context, node, moduleName) {
+      if (framework) {
+        const isRequire = node.name === 'require';
+        const correctModuleName = moduleName.replace('dom', framework);
+        context.report({
+          node,
+          messageId: 'noDomImportFramework',
+          data: {
+            module: correctModuleName,
+          },
+          fix(fixer) {
+            if (isRequire) {
+              const name = node.parent.arguments[0];
+              // Replace the module name with the raw module name as we can't predict which punctuation the user is going to use
+              return fixer.replaceText(
+                name,
+                name.raw.replace(moduleName, correctModuleName)
+              );
+            } else {
+              const name = node.source;
+              return fixer.replaceText(
+                name,
+                name.raw.replace(moduleName, correctModuleName)
+              );
+            }
+          },
+        });
+      } else {
+        context.report({
+          node,
+          messageId: 'noDomImport',
+        });
+      }
+    }
   },
 };

tests/__snapshots__/index.test.js.snap

@@ -9,6 +9,10 @@ Object {
     "testing-library/await-async-query": "error",
     "testing-library/no-await-sync-query": "error",
     "testing-library/no-debug": "warn",
+    "testing/library/no-dom-import": Array [
+      "error",
+      "angular",
+    ],
   },
 }
 `;
@@ -22,6 +26,10 @@ Object {
     "testing-library/await-async-query": "error",
     "testing-library/no-await-sync-query": "error",
     "testing-library/no-debug": "warn",
+    "testing/library/no-dom-import": Array [
+      "error",
+      "react",
+    ],
   },
 }
 `;
@@ -47,6 +55,10 @@ Object {
     "testing-library/await-async-query": "error",
     "testing-library/no-await-sync-query": "error",
     "testing-library/no-debug": "warn",
+    "testing/library/no-dom-import": Array [
+      "error",
+      "vue",
+    ],
   },
 }
 `;

tests/lib/rules/no-dom-import.js

@@ -34,6 +34,30 @@ ruleTester.run('no-dom-import', rule, {
           messageId: 'noDomImport',
         },
       ],
+      output: 'import { fireEvent } from "dom-testing-library"',
+    },
+    {
+      code: 'import { fireEvent } from "dom-testing-library"',
+      options: ['react'],
+      errors: [
+        {
+          message:
+            'import from DOM Testing Library is restricted, import from react-testing-library instead',
+        },
+      ],
+      output: `import { fireEvent } from "react-testing-library"`,
+    },
+    // Single quote or double quotes should not be replaced
+    {
+      code: `import { fireEvent } from 'dom-testing-library'`,
+      options: ['react'],
+      errors: [
+        {
+          message:
+            'import from DOM Testing Library is restricted, import from react-testing-library instead',
+        },
+      ],
+      output: `import { fireEvent } from 'react-testing-library'`,
     },
     {
       code: 'import * as testing from "dom-testing-library"',
@@ -91,6 +115,17 @@ ruleTester.run('no-dom-import', rule, {
         },
       ],
     },
+    {
+      code: 'const { fireEvent } = require("@testing-library/dom")',
+      options: ['vue'],
+      errors: [
+        {
+          message:
+            'import from DOM Testing Library is restricted, import from @testing-library/vue instead',
+        },
+      ],
+      output: 'const { fireEvent } = require("@testing-library/vue")',
+    },
     {
       code: 'require("dom-testing-library")',
       errors: [