feat: recommend prefer-screen-queries

testing-library · Jun 17, 2020 · 877751f · 877751f
1 parent 185180a
commit 877751f
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -23,7 +23,9 @@
 [![Tweet][tweet-badge]][tweet-url]
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-24-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 ## Installation
@@ -145,7 +147,7 @@ To enable this configuration use the `extends` property in your
 | [prefer-explicit-assert](docs/rules/prefer-explicit-assert.md)         | Suggest using explicit assertions rather than just `getBy*` queries        |                                                                           |                    |
 | [prefer-find-by](docs/rules/prefer-find-by.md)                         | Suggest using `findBy*` methods instead of the `waitFor` + `getBy` queries | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | ![fixable-badge][] |
 | [prefer-presence-queries](docs/rules/prefer-presence-queries.md)       | Enforce specific queries when checking element is present or not           |                                                                           |                    |
-| [prefer-screen-queries](docs/rules/prefer-screen-queries.md)           | Suggest using screen while using queries                                   |                                                                           |                    |
+| [prefer-screen-queries](docs/rules/prefer-screen-queries.md)           | Suggest using screen while using queries                                   | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |                    |
 | [prefer-wait-for](docs/rules/prefer-wait-for.md)                       | Use `waitFor` instead of deprecated wait methods                           |                                                                           | ![fixable-badge][] |
 
 [build-badge]: https://img.shields.io/travis/testing-library/eslint-plugin-testing-library?style=flat-square
@@ -212,6 +214,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
diff --git a/lib/index.ts b/lib/index.ts
@@ -35,6 +35,7 @@ const recommendedRules = {
   'testing-library/await-async-utils': 'error',
   'testing-library/no-await-sync-query': 'error',
   'testing-library/prefer-find-by': 'error',
+  'testing-library/prefer-screen-queries': 'error',
 };
 
 export = {

diff --git a/lib/rules/prefer-screen-queries.ts b/lib/rules/prefer-screen-queries.ts
@@ -21,7 +21,7 @@ export default ESLintUtils.RuleCreator(getDocsUrl)<Options, MessageIds>({
     docs: {
       description: 'Suggest using screen while using queries',
       category: 'Best Practices',
-      recommended: false,
+      recommended: 'error',
     },
     messages: {
       preferScreenQueries:
@@ -46,28 +46,39 @@ export default ESLintUtils.RuleCreator(getDocsUrl)<Options, MessageIds>({
     const queriesRegex = new RegExp(ALL_QUERIES_COMBINATIONS_REGEXP);
     const queriesDestructuredInWithinDeclaration: string[] = [];
     // use an array as within might be used more than once in a test
-    const withinDeclaredVariables : string[] = []
+    const withinDeclaredVariables: string[] = [];
 
     return {
       VariableDeclarator(node) {
-        const isWithinFunction = isCallExpression(node.init) && isIdentifier(node.init.callee) && node.init.callee.name === 'within';
+        const isWithinFunction =
+          isCallExpression(node.init) &&
+          isIdentifier(node.init.callee) &&
+          node.init.callee.name === 'within';
 
         if (!isWithinFunction) {
-          return
+          return;
         }
 
         if (isObjectPattern(node.id)) {
           // save the destructured query methods
           const identifiers = node.id.properties
-            .filter(property => isProperty(property) && isIdentifier(property.key) && queriesRegex.test(property.key.name))
-            .map((property: TSESTree.Property) => (property.key as TSESTree.Identifier).name);
+            .filter(
+              property =>
+                isProperty(property) &&
+                isIdentifier(property.key) &&
+                queriesRegex.test(property.key.name)
+            )
+            .map(
+              (property: TSESTree.Property) =>
+                (property.key as TSESTree.Identifier).name
+            );
 
           queriesDestructuredInWithinDeclaration.push(...identifiers);
-          return
+          return;
         }
 
         if (isIdentifier(node.id)) {
-          withinDeclaredVariables.push(node.id.name)
+          withinDeclaredVariables.push(node.id.name);
         }
       },
       [`CallExpression > Identifier[name=/^${ALL_QUERIES_COMBINATIONS_REGEXP}$/]`](
@@ -84,16 +95,15 @@ export default ESLintUtils.RuleCreator(getDocsUrl)<Options, MessageIds>({
       [`MemberExpression > Identifier[name=/^${ALL_QUERIES_COMBINATIONS_REGEXP}$/]`](
         node: TSESTree.Identifier
       ) {
-
         function isIdentifierAllowed(name: string) {
-          return ['screen', ...withinDeclaredVariables].includes(name)
+          return ['screen', ...withinDeclaredVariables].includes(name);
         }
 
         if (
           isIdentifier(node) &&
           isMemberExpression(node.parent) &&
           isCallExpression(node.parent.object) &&
-          isIdentifier(node.parent.object.callee) && 
+          isIdentifier(node.parent.object.callee) &&
           node.parent.object.callee.name !== 'within'
         ) {
           reportInvalidUsage(node);

diff --git a/tests/__snapshots__/index.test.ts.snap b/tests/__snapshots__/index.test.ts.snap
@@ -15,6 +15,7 @@ Object {
       "angular",
     ],
     "testing-library/prefer-find-by": "error",
+    "testing-library/prefer-screen-queries": "error",
   },
 }
 `;
@@ -34,6 +35,7 @@ Object {
       "react",
     ],
     "testing-library/prefer-find-by": "error",
+    "testing-library/prefer-screen-queries": "error",
   },
 }
 `;
@@ -48,6 +50,7 @@ Object {
     "testing-library/await-async-utils": "error",
     "testing-library/no-await-sync-query": "error",
     "testing-library/prefer-find-by": "error",
+    "testing-library/prefer-screen-queries": "error",
   },
 }
 `;
@@ -68,6 +71,7 @@ Object {
       "vue",
     ],
     "testing-library/prefer-find-by": "error",
+    "testing-library/prefer-screen-queries": "error",
   },
 }
 `;