From 877751f0ba5b3c158244b1025a6fb735c4587185 Mon Sep 17 00:00:00 2001 From: Nick McCurdy Date: Tue, 16 Jun 2020 22:55:50 -0400 Subject: [PATCH] feat: recommend prefer-screen-queries --- README.md | 5 +++- lib/index.ts | 1 + lib/rules/prefer-screen-queries.ts | 32 +++++++++++++++++--------- tests/__snapshots__/index.test.ts.snap | 4 ++++ 4 files changed, 30 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 4bbd7abd..40d88022 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,9 @@ [![Tweet][tweet-badge]][tweet-url] + [![All Contributors](https://img.shields.io/badge/all_contributors-24-orange.svg?style=flat-square)](#contributors-) + ## 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 + 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 index 3cc5ec21..9600ced1 100644 --- 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 index ce671366..b13d7578 100644 --- a/lib/rules/prefer-screen-queries.ts +++ b/lib/rules/prefer-screen-queries.ts @@ -21,7 +21,7 @@ export default ESLintUtils.RuleCreator(getDocsUrl)({ 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)({ 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)({ [`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 index fedc3c05..70b95396 100644 --- 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", }, } `;