feat(no-node-access): add rule

with few test cases

Author: thebinaryfelix

lib/index.ts

@@ -7,6 +7,7 @@ import noContainer from './rules/no-container';
 import noDebug from './rules/no-debug';
 import noDomImport from './rules/no-dom-import';
 import noManualCleanup from './rules/no-manual-cleanup';
+import noNodeAccess from './rules/no-node-access';
 import noWaitForEmptyCallback from './rules/no-wait-for-empty-callback';
 import noPromiseInFireEvent from './rules/no-promise-in-fire-event';
 import preferExplicitAssert from './rules/prefer-explicit-assert';
@@ -25,6 +26,7 @@ const rules = {
   'no-debug': noDebug,
   'no-dom-import': noDomImport,
   'no-manual-cleanup': noManualCleanup,
+  'no-node-access': noNodeAccess,
   'no-promise-in-fire-event': noPromiseInFireEvent,
   'no-wait-for-empty-callback': noWaitForEmptyCallback,
   'prefer-explicit-assert': preferExplicitAssert,
@@ -49,13 +51,15 @@ const angularRules = {
   'testing-library/no-container': 'error',
   'testing-library/no-debug': 'warn',
   'testing-library/no-dom-import': ['error', 'angular'],
+  'testing-library/no-node-access': 'error',
 };
 
 const reactRules = {
   ...domRules,
   'testing-library/no-container': 'error',
   'testing-library/no-debug': 'warn',
   'testing-library/no-dom-import': ['error', 'react'],
+  'testing-library/no-node-access': 'error',
 };
 
 const vueRules = {
@@ -64,6 +68,7 @@ const vueRules = {
   'testing-library/no-container': 'error',
   'testing-library/no-debug': 'warn',
   'testing-library/no-dom-import': ['error', 'vue'],
+  'testing-library/no-node-access': 'error',
 };
 
 export = {

lib/rules/no-node-access.ts

@@ -0,0 +1,82 @@
+import { ESLintUtils, TSESTree } from '@typescript-eslint/experimental-utils';
+import { isIdentifier, isMemberExpression, isLiteral } from '../node-utils';
+import {
+  getDocsUrl,
+  ALL_QUERIES_METHODS,
+  PROPERTIES_RETURNING_NODES,
+  METHODS_RETURNING_NODES,
+} from '../utils';
+
+export const RULE_NAME = 'no-node-access';
+
+const ALL_RETURNING_NODES = [
+  ...PROPERTIES_RETURNING_NODES,
+  ...METHODS_RETURNING_NODES,
+];
+
+export default ESLintUtils.RuleCreator(getDocsUrl)({
+  name: RULE_NAME,
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow the use of Node methods',
+      category: 'Best Practices',
+      recommended: 'error',
+    },
+    messages: {
+      noNodeAccess:
+        'Avoid direct Node access. Prefer using the methods from Testing Library."',
+    },
+    fixable: null,
+    schema: [],
+  },
+  defaultOptions: [],
+
+  create(context) {
+    const variablesWithNodes: string[] = [];
+
+    function identifyVariablesWithNodes(node: TSESTree.MemberExpression) {
+      const methodCalled = ALL_QUERIES_METHODS.filter(
+        methodName =>
+          isIdentifier(node.property) && node.property.name.includes(methodName)
+      );
+      const returnsNodeElement = Boolean(methodCalled.length);
+
+      const callExpression = node.parent as TSESTree.CallExpression;
+      const variableDeclarator = callExpression.parent as TSESTree.VariableDeclarator;
+      const variableName =
+        isIdentifier(variableDeclarator.id) && variableDeclarator.id.name;
+
+      if (returnsNodeElement) {
+        variablesWithNodes.push(variableName);
+      }
+    }
+
+    function showErrorForNodeAccess(node: TSESTree.Identifier) {
+      if (variablesWithNodes.includes(node.name)) {
+        if (
+          isMemberExpression(node.parent) &&
+          isLiteral(node.parent.property) &&
+          typeof node.parent.property.value === 'number'
+        ) {
+          context.report({
+            node: node,
+            messageId: 'noNodeAccess',
+          });
+        }
+        isMemberExpression(node.parent) &&
+          isIdentifier(node.parent.property) &&
+          ALL_RETURNING_NODES.includes(node.parent.property.name) &&
+          context.report({
+            node: node,
+            messageId: 'noNodeAccess',
+          });
+      }
+    }
+
+    return {
+      ['VariableDeclarator > CallExpression > MemberExpression']: identifyVariablesWithNodes,
+      ['MemberExpression > Identifier']: showErrorForNodeAccess,
+    };
+  },
+});

tests/__snapshots__/index.test.ts.snap

@@ -15,6 +15,7 @@ Object {
       "error",
       "angular",
     ],
+    "testing-library/no-node-access": "error",
     "testing-library/no-promise-in-fire-event": "error",
     "testing-library/no-wait-for-empty-callback": "error",
     "testing-library/prefer-find-by": "error",
@@ -55,6 +56,7 @@ Object {
       "error",
       "react",
     ],
+    "testing-library/no-node-access": "error",
     "testing-library/no-promise-in-fire-event": "error",
     "testing-library/no-wait-for-empty-callback": "error",
     "testing-library/prefer-find-by": "error",
@@ -79,6 +81,7 @@ Object {
       "error",
       "vue",
     ],
+    "testing-library/no-node-access": "error",
     "testing-library/no-promise-in-fire-event": "error",
     "testing-library/no-wait-for-empty-callback": "error",
     "testing-library/prefer-find-by": "error",

tests/lib/rules/no-node-access.test.ts

@@ -11,16 +11,16 @@ ruleTester.run(RULE_NAME, rule, {
   valid: [
     {
       code: `
-        const buttonText = screen.getByText('submit');
-      `,
+      const buttonText = screen.getByText('submit');
+    `,
     },
     {
       code: `
-        const obj = {
-            firstChild: <div>child</div>
-        }
-        obj.firstChild
-      `,
+      const obj = {
+        firstChild: <div>child</div>
+      }
+      obj.firstChild
+    `,
     },
   ],
   invalid: [
@@ -49,5 +49,30 @@ ruleTester.run(RULE_NAME, rule, {
         },
       ],
     },
+    {
+      code: `
+        function getExampleDOM() {
+            const container = document.createElement('div');
+            container.innerHTML = \`
+                <label for="username">Username</label>
+                <input id="username" />
+                <button>Print Username</button>
+                <label for="password">Password</label>
+                <input id="password" />
+                <button>Print password</button>
+                <button type="submit">Submit</button>
+            \`;
+            return container;
+        }
+        const exampleDOM = getExampleDOM();
+        const submitButton = screen.getByText(exampleDOM, 'Submit');
+        const previousSibling = submitButton.previousSibling
+      `,
+      errors: [
+        {
+          messageId: 'noNodeAccess',
+        },
+      ],
+    },
   ],
 });