feat: add no-global-regex-flag-in-query

timdeschryver · timdeschryver · commit 89caf8cfec7f · 2022-03-29T17:09:30.000+02:00
diff --git a/README.md b/README.md
@@ -198,6 +198,7 @@ To enable this configuration use the `extends` property in your
 | [`testing-library/no-container`](./docs/rules/no-container.md)                                       | Disallow the use of `container` methods                                                      |     | ![angular-badge][] ![react-badge][] ![vue-badge][]                |
 | [`testing-library/no-debugging-utils`](./docs/rules/no-debugging-utils.md)                           | Disallow the use of debugging utilities like `debug`                                         |     | ![angular-badge][] ![react-badge][] ![vue-badge][]                |
 | [`testing-library/no-dom-import`](./docs/rules/no-dom-import.md)                                     | Disallow importing from DOM Testing Library                                                  | 🔧  | ![angular-badge][] ![react-badge][] ![vue-badge][]                |
+| [`testing-library/no-global-regexp-flag-in-query`](./docs/rules/no-global-regexp-flag-in-query.md)   | Disallow the use of the global RegExp flag (/g) in queries                                   |     | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |
 | [`testing-library/no-manual-cleanup`](./docs/rules/no-manual-cleanup.md)                             | Disallow the use of `cleanup`                                                                |     |                                                                   |
 | [`testing-library/no-node-access`](./docs/rules/no-node-access.md)                                   | Disallow direct Node access                                                                  |     | ![angular-badge][] ![react-badge][] ![vue-badge][]                |
 | [`testing-library/no-promise-in-fire-event`](./docs/rules/no-promise-in-fire-event.md)               | Disallow the use of promises passed to a `fireEvent` method                                  |     | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |
diff --git a/docs/rules/no-global-regexp-flag-in-query.md b/docs/rules/no-global-regexp-flag-in-query.md
@@ -0,0 +1,31 @@
+# Disallow the use of the global RegExp flag (/g) in queries (`testing-library/no-global-regexp-flag-in-query`)
+
+Ensure that there are no global RegExp flags used when using queries.
+
+## Rule Details
+
+A RegExp instance that's using the global flag `/g` holds state and this might cause false-positives while querying for elements.
+
+Examples of **incorrect** code for this rule:
+
+```js
+screen.getByText(/hello/gi);
+```
+
+```js
+await screen.findByRole('button', { otherProp: true, name: /hello/g });
+```
+
+Examples of **correct** code for this rule:
+
+```js
+screen.getByText(/hello/i);
+```
+
+```js
+await screen.findByRole('button', { otherProp: true, name: /hello/ });
+```
+
+## Further Reading
+
+- [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex)
diff --git a/lib/configs/angular.ts b/lib/configs/angular.ts
@@ -11,6 +11,7 @@ export = {
     'testing-library/no-container': 'error',
     'testing-library/no-debugging-utils': 'error',
     'testing-library/no-dom-import': ['error', 'angular'],
+    'testing-library/no-global-regexp-flag-in-query': 'error',
     'testing-library/no-node-access': 'error',
     'testing-library/no-promise-in-fire-event': 'error',
     'testing-library/no-render-in-setup': 'error',
diff --git a/lib/configs/dom.ts b/lib/configs/dom.ts
@@ -8,6 +8,7 @@ export = {
     'testing-library/await-async-query': 'error',
     'testing-library/await-async-utils': 'error',
     'testing-library/no-await-sync-query': 'error',
+    'testing-library/no-global-regexp-flag-in-query': 'error',
     'testing-library/no-promise-in-fire-event': 'error',
     'testing-library/no-wait-for-empty-callback': 'error',
     'testing-library/no-wait-for-multiple-assertions': 'error',
diff --git a/lib/configs/react.ts b/lib/configs/react.ts
@@ -11,6 +11,7 @@ export = {
     'testing-library/no-container': 'error',
     'testing-library/no-debugging-utils': 'error',
     'testing-library/no-dom-import': ['error', 'react'],
+    'testing-library/no-global-regexp-flag-in-query': 'error',
     'testing-library/no-node-access': 'error',
     'testing-library/no-promise-in-fire-event': 'error',
     'testing-library/no-render-in-setup': 'error',
diff --git a/lib/configs/vue.ts b/lib/configs/vue.ts
@@ -12,6 +12,7 @@ export = {
     'testing-library/no-container': 'error',
     'testing-library/no-debugging-utils': 'error',
     'testing-library/no-dom-import': ['error', 'vue'],
+    'testing-library/no-global-regexp-flag-in-query': 'error',
     'testing-library/no-node-access': 'error',
     'testing-library/no-promise-in-fire-event': 'error',
     'testing-library/no-render-in-setup': 'error',
diff --git a/lib/node-utils/is-node-of-type.ts b/lib/node-utils/is-node-of-type.ts
@@ -59,3 +59,4 @@ export const isReturnStatement = ASTUtils.isNodeOfType(
 export const isFunctionExpression = ASTUtils.isNodeOfType(
   AST_NODE_TYPES.FunctionExpression
 );
+export const isIdentifier = ASTUtils.isNodeOfType(AST_NODE_TYPES.Identifier);
diff --git a/lib/rules/no-global-regexp-flag-in-query.ts b/lib/rules/no-global-regexp-flag-in-query.ts
@@ -0,0 +1,83 @@
+import { TSESTree } from '@typescript-eslint/utils';
+
+import { createTestingLibraryRule } from '../create-testing-library-rule';
+import {
+  isMemberExpression,
+  isIdentifier,
+  isCallExpression,
+  isProperty,
+  isObjectExpression,
+} from '../node-utils';
+
+export const RULE_NAME = 'no-global-regexp-flag-in-query';
+export type MessageIds = 'noGlobalRegExpFlagInQuery';
+type Options = [];
+
+export default createTestingLibraryRule<Options, MessageIds>({
+  name: RULE_NAME,
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Disallow the use of the global RegExp flag (/g) in queries',
+      recommendedConfig: {
+        dom: 'error',
+        angular: 'error',
+        react: 'error',
+        vue: 'error',
+      },
+    },
+    messages: {
+      noGlobalRegExpFlagInQuery:
+        'Avoid using the global RegExp flag (/g) in queries',
+    },
+    schema: [],
+  },
+  defaultOptions: [],
+  create(context, _, helpers) {
+    function lint(
+      regexpNode: TSESTree.Literal,
+      identifier: TSESTree.Identifier
+    ) {
+      if (helpers.isQuery(identifier)) {
+        context.report({
+          node: regexpNode,
+          messageId: 'noGlobalRegExpFlagInQuery',
+        });
+      }
+    }
+
+    return {
+      [`CallExpression[callee.type=MemberExpression] > Literal[regex.flags=/g/].arguments`](
+        node: TSESTree.Literal
+      ) {
+        if (
+          isCallExpression(node.parent) &&
+          isMemberExpression(node.parent.callee) &&
+          isIdentifier(node.parent.callee.property)
+        ) {
+          lint(node, node.parent.callee.property);
+        }
+      },
+      [`CallExpression[callee.type=Identifier] > Literal[regex.flags=/g/].arguments`](
+        node: TSESTree.Literal
+      ) {
+        if (isCallExpression(node.parent) && isIdentifier(node.parent.callee)) {
+          lint(node, node.parent.callee);
+        }
+      },
+      [`ObjectExpression:has(Property>[name="name"]) Literal[regex.flags=/g/]`](
+        node: TSESTree.Literal
+      ) {
+        if (
+          isProperty(node.parent) &&
+          isObjectExpression(node.parent.parent) &&
+          isCallExpression(node.parent.parent.parent) &&
+          isMemberExpression(node.parent.parent.parent.callee) &&
+          isIdentifier(node.parent.parent.parent.callee.property)
+        ) {
+          lint(node, node.parent.parent.parent.callee.property);
+        }
+      },
+    };
+  },
+});
diff --git a/tests/__snapshots__/index.test.ts.snap b/tests/__snapshots__/index.test.ts.snap
@@ -16,6 +16,7 @@ Object {
         "error",
         "angular",
       ],
+      "testing-library/no-global-regexp-flag-in-query": "error",
       "testing-library/no-node-access": "error",
       "testing-library/no-promise-in-fire-event": "error",
       "testing-library/no-render-in-setup": "error",
@@ -38,6 +39,7 @@ Object {
       "testing-library/await-async-query": "error",
       "testing-library/await-async-utils": "error",
       "testing-library/no-await-sync-query": "error",
+      "testing-library/no-global-regexp-flag-in-query": "error",
       "testing-library/no-promise-in-fire-event": "error",
       "testing-library/no-wait-for-empty-callback": "error",
       "testing-library/no-wait-for-multiple-assertions": "error",
@@ -63,6 +65,7 @@ Object {
         "error",
         "react",
       ],
+      "testing-library/no-global-regexp-flag-in-query": "error",
       "testing-library/no-node-access": "error",
       "testing-library/no-promise-in-fire-event": "error",
       "testing-library/no-render-in-setup": "error",
@@ -93,6 +96,7 @@ Object {
         "error",
         "vue",
       ],
+      "testing-library/no-global-regexp-flag-in-query": "error",
       "testing-library/no-node-access": "error",
       "testing-library/no-promise-in-fire-event": "error",
       "testing-library/no-render-in-setup": "error",
diff --git a/tests/index.test.ts b/tests/index.test.ts
@@ -8,7 +8,7 @@ import plugin from '../lib';
 const execAsync = util.promisify(exec);
 const generateConfigs = () => execAsync(`npm run generate:configs`);
 
-const numberOfRules = 26;
+const numberOfRules = 27;
 const ruleNames = Object.keys(plugin.rules);
 
 // eslint-disable-next-line jest/expect-expect
diff --git a/tests/lib/rules/no-global-regexp-flag-in-query.test.ts b/tests/lib/rules/no-global-regexp-flag-in-query.test.ts
@@ -0,0 +1,96 @@
+import rule, {
+  RULE_NAME,
+} from '../../../lib/rules/no-global-regexp-flag-in-query';
+import { createRuleTester } from '../test-utils';
+
+const ruleTester = createRuleTester();
+
+ruleTester.run(RULE_NAME, rule, {
+  valid: [
+    `
+        import { screen } from '@testing-library/dom'
+        screen.getByText(/hello/)
+    `,
+    `
+        import { screen } from '@testing-library/dom'
+        screen.getByText(/hello/i)
+    `,
+    `
+        import { screen } from '@testing-library/dom'
+        screen.getByText('hello')
+    `,
+
+    `
+        import { screen } from '@testing-library/dom'
+        screen.findByRole('button', {name: /hello/})
+    `,
+    `
+        import { screen } from '@testing-library/dom'
+        screen.findByRole('button', {name: /hello/i})
+    `,
+    `
+        import { screen } from '@testing-library/dom'
+        screen.findByRole('button', {name: 'hello'})
+    `,
+    `
+        const utils = render(<Component/>)
+        utils.findByRole('button', {name: /hello/i})
+    `,
+    `
+        const {queryAllByPlaceholderText} = render(<Component/>)
+        queryAllByPlaceholderText(/hello/i)
+    `,
+  ],
+  invalid: [
+    {
+      code: `
+        import { screen } from '@testing-library/dom'
+        screen.getByText(/hello/g)`,
+      errors: [
+        {
+          messageId: 'noGlobalRegExpFlagInQuery',
+        },
+      ],
+    },
+    {
+      code: `
+          import { screen } from '@testing-library/dom'
+          screen.findByRole('button', {name: /hello/g})`,
+      errors: [
+        {
+          messageId: 'noGlobalRegExpFlagInQuery',
+        },
+      ],
+    },
+    {
+      code: `
+            import { screen } from '@testing-library/dom'
+            screen.findByRole('button', {otherProp: true, name: /hello/g})`,
+      errors: [
+        {
+          messageId: 'noGlobalRegExpFlagInQuery',
+        },
+      ],
+    },
+    {
+      code: `
+            const utils = render(<Component/>)
+            utils.findByRole('button', {name: /hello/ig})`,
+      errors: [
+        {
+          messageId: 'noGlobalRegExpFlagInQuery',
+        },
+      ],
+    },
+    {
+      code: `
+            const {queryAllByLabelText} = render(<Component/>)
+            queryAllByLabelText(/hello/ig)`,
+      errors: [
+        {
+          messageId: 'noGlobalRegExpFlagInQuery',
+        },
+      ],
+    },
+  ],
+});
