From 4a1df3350ba3f9924dd0168972001da218c0bdab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mario=20Beltra=CC=81n=20Alarco=CC=81n?= Date: Sun, 21 Jun 2020 13:09:58 +0200 Subject: [PATCH 1/4] refactor: rename recommended config to dom BREAKING CHANGE: recommended config preset has been renamed to dom, so make sure you update it in your ESLint config file. --- README.md | 68 ++++++++++++-------------- lib/index.ts | 44 ++++++++++------- tests/__snapshots__/index.test.ts.snap | 14 +++--- tests/index.test.ts | 2 +- 4 files changed, 63 insertions(+), 65 deletions(-) diff --git a/README.md b/README.md index 549ec072..e4e242ae 100644 --- a/README.md +++ b/README.md @@ -68,37 +68,25 @@ Then configure the rules you want to use under the rules section. ## Shareable configurations -### Recommended +This plugin exports several recommended configurations that enforces good practices for specific Testing Library packages. +You can find more info about enabled rules in the [Supported Rules section](#supported-rules) within the `Configurations` column. -This plugin exports a recommended configuration that enforces good -Testing Library practices _(you can find more info about enabled rules in -the [Supported Rules section](#supported-rules) within the `Configurations` column)_. +### DOM Testing Library + +Enforces recommended rules for DOM Testing Library. To enable this configuration use the `extends` property in your `.eslintrc` config file: ```json { - "extends": ["plugin:testing-library/recommended"] + "extends": ["plugin:testing-library/dom"] } ``` -### Frameworks - -Starting from the premise that -[DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro) -is the base for the rest of Testing Library frameworks wrappers, this -plugin also exports different configuration for those frameworks that -enforces good practices for specific rules that only apply to them _(you -can find more info about enabled rules in -the [Supported Rules section](#supported-rules) within the `Configurations` column)_. - -**Note that frameworks configurations enable their specific rules + -recommended rules.** +### Angular -Available frameworks configurations are: - -#### Angular +Enforces recommended rules for Angular Testing Library. To enable this configuration use the `extends` property in your `.eslintrc` config file: @@ -109,7 +97,9 @@ To enable this configuration use the `extends` property in your } ``` -#### React +### React + +Enforces recommended rules for React Testing Library. To enable this configuration use the `extends` property in your `.eslintrc` config file: @@ -122,6 +112,8 @@ To enable this configuration use the `extends` property in your #### Vue +Enforces recommended rules for Vue Testing Library. + To enable this configuration use the `extends` property in your `.eslintrc` config file: @@ -133,22 +125,22 @@ To enable this configuration use the `extends` property in your ## Supported Rules -| Rule | Description | Configurations | Fixable | -| ---------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------ | -| [await-async-query](docs/rules/await-async-query.md) | Enforce async queries to have proper `await` | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | | -| [await-async-utils](docs/rules/await-async-utils.md) | Enforce async utils to be awaited properly | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | | -| [await-fire-event](docs/rules/await-fire-event.md) | Enforce async fire event methods to be awaited | ![vue-badge][] | | -| [consistent-data-testid](docs/rules/consistent-data-testid.md) | Ensure `data-testid` values match a provided regex. | | | -| [no-await-sync-query](docs/rules/no-await-sync-query.md) | Disallow unnecessary `await` for sync queries | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | | -| [no-debug](docs/rules/no-debug.md) | Disallow the use of `debug` | ![angular-badge][] ![react-badge][] ![vue-badge][] | | -| [no-dom-import](docs/rules/no-dom-import.md) | Disallow importing from DOM Testing Library | ![angular-badge][] ![react-badge][] ![vue-badge][] | ![fixable-badge][] | -| [no-manual-cleanup](docs/rules/no-manual-cleanup.md) | Disallow the use of `cleanup` | | | -| [no-wait-for-empty-callback](docs/rules/no-wait-for-empty-callback.md) | Disallow empty callbacks for `waitFor` and `waitForElementToBeRemoved` | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | | -| [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 | ![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][] | +| Rule | Description | Configurations | Fixable | +| ---------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------ | +| [await-async-query](docs/rules/await-async-query.md) | Enforce async queries to have proper `await` | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | | +| [await-async-utils](docs/rules/await-async-utils.md) | Enforce async utils to be awaited properly | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | | +| [await-fire-event](docs/rules/await-fire-event.md) | Enforce async fire event methods to be awaited | ![vue-badge][] | | +| [consistent-data-testid](docs/rules/consistent-data-testid.md) | Ensure `data-testid` values match a provided regex. | | | +| [no-await-sync-query](docs/rules/no-await-sync-query.md) | Disallow unnecessary `await` for sync queries | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | | +| [no-debug](docs/rules/no-debug.md) | Disallow the use of `debug` | ![angular-badge][] ![react-badge][] ![vue-badge][] | | +| [no-dom-import](docs/rules/no-dom-import.md) | Disallow importing from DOM Testing Library | ![angular-badge][] ![react-badge][] ![vue-badge][] | ![fixable-badge][] | +| [no-manual-cleanup](docs/rules/no-manual-cleanup.md) | Disallow the use of `cleanup` | | | +| [no-wait-for-empty-callback](docs/rules/no-wait-for-empty-callback.md) | Disallow empty callbacks for `waitFor` and `waitForElementToBeRemoved` | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | | +| [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 | ![dom-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 | ![dom-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 [build-url]: https://travis-ci.org/testing-library/eslint-plugin-testing-library @@ -164,7 +156,7 @@ To enable this configuration use the `extends` property in your [gh-stars-url]: https://github.com/belco90/eslint-plugin-testing-library/stargazers [tweet-badge]: https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2FBelco90%2Feslint-plugin-testing-library [tweet-url]: https://twitter.com/intent/tweet?url=https%3a%2f%2fgithub.com%2fbelco90%2feslint-plugin-testing-library&text=check%20out%20eslint-plugin-testing-library%20by%20@belcodev -[recommended-badge]: https://img.shields.io/badge/recommended-lightgrey?style=flat-square +[dom-badge]: https://img.shields.io/badge/dom-lightgrey?style=flat-square [fixable-badge]: https://img.shields.io/badge/fixable-success?style=flat-square [angular-badge]: https://img.shields.io/badge/-Angular-black?style=flat-square&logo=angular&logoColor=white&labelColor=DD0031&color=black [react-badge]: https://img.shields.io/badge/-React-black?style=flat-square&logo=react&logoColor=white&labelColor=61DAFB&color=black diff --git a/lib/index.ts b/lib/index.ts index 22996a13..f1862779 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -30,7 +30,7 @@ const rules = { 'prefer-wait-for': preferWaitFor, }; -const recommendedRules = { +const domRules = { 'testing-library/await-async-query': 'error', 'testing-library/await-async-utils': 'error', 'testing-library/no-await-sync-query': 'error', @@ -39,37 +39,43 @@ const recommendedRules = { 'testing-library/prefer-screen-queries': 'error', }; +const angularRules = { + ...domRules, + 'testing-library/no-debug': 'warn', + 'testing-library/no-dom-import': ['error', 'angular'], +}; + +const reactRules = { + ...domRules, + 'testing-library/no-debug': 'warn', + 'testing-library/no-dom-import': ['error', 'react'], +}; + +const vueRules = { + ...domRules, + 'testing-library/await-fire-event': 'error', + 'testing-library/no-debug': 'warn', + 'testing-library/no-dom-import': ['error', 'vue'], +}; + export = { rules, configs: { - recommended: { + dom: { plugins: ['testing-library'], - rules: recommendedRules, + rules: domRules, }, angular: { plugins: ['testing-library'], - rules: { - ...recommendedRules, - 'testing-library/no-debug': 'warn', - 'testing-library/no-dom-import': ['error', 'angular'], - }, + rules: angularRules, }, react: { plugins: ['testing-library'], - rules: { - ...recommendedRules, - 'testing-library/no-debug': 'warn', - 'testing-library/no-dom-import': ['error', 'react'], - }, + rules: reactRules, }, vue: { plugins: ['testing-library'], - rules: { - ...recommendedRules, - 'testing-library/await-fire-event': 'error', - 'testing-library/no-debug': 'warn', - 'testing-library/no-dom-import': ['error', 'vue'], - }, + rules: vueRules, }, }, }; diff --git a/tests/__snapshots__/index.test.ts.snap b/tests/__snapshots__/index.test.ts.snap index 17d3f1f9..21a4fc8c 100644 --- a/tests/__snapshots__/index.test.ts.snap +++ b/tests/__snapshots__/index.test.ts.snap @@ -21,7 +21,7 @@ Object { } `; -exports[`should export proper "react" config 1`] = ` +exports[`should export proper "dom" config 1`] = ` Object { "plugins": Array [ "testing-library", @@ -30,11 +30,6 @@ Object { "testing-library/await-async-query": "error", "testing-library/await-async-utils": "error", "testing-library/no-await-sync-query": "error", - "testing-library/no-debug": "warn", - "testing-library/no-dom-import": Array [ - "error", - "react", - ], "testing-library/no-wait-for-empty-callback": "error", "testing-library/prefer-find-by": "error", "testing-library/prefer-screen-queries": "error", @@ -42,7 +37,7 @@ Object { } `; -exports[`should export proper "recommended" config 1`] = ` +exports[`should export proper "react" config 1`] = ` Object { "plugins": Array [ "testing-library", @@ -51,6 +46,11 @@ Object { "testing-library/await-async-query": "error", "testing-library/await-async-utils": "error", "testing-library/no-await-sync-query": "error", + "testing-library/no-debug": "warn", + "testing-library/no-dom-import": Array [ + "error", + "react", + ], "testing-library/no-wait-for-empty-callback": "error", "testing-library/prefer-find-by": "error", "testing-library/prefer-screen-queries": "error", diff --git a/tests/index.test.ts b/tests/index.test.ts index 3dab08f8..ee1148c2 100644 --- a/tests/index.test.ts +++ b/tests/index.test.ts @@ -10,7 +10,7 @@ it('should export all available rules', () => { expect(Object.keys(rules)).toEqual(availableRules); }); -it.each(['recommended', 'angular', 'react', 'vue'])( +it.each(['dom', 'angular', 'react', 'vue'])( 'should export proper "%s" config', configName => { expect(configs[configName]).toMatchSnapshot(); From 05546f94564f462a85bc01b9c680922ed725b2b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mario=20Beltr=C3=A1n=20Alarc=C3=B3n?= Date: Sun, 21 Jun 2020 15:24:33 +0200 Subject: [PATCH 2/4] docs: fix typo Co-authored-by: Nick McCurdy --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e4e242ae..bb3e23ad 100644 --- a/README.md +++ b/README.md @@ -68,7 +68,7 @@ Then configure the rules you want to use under the rules section. ## Shareable configurations -This plugin exports several recommended configurations that enforces good practices for specific Testing Library packages. +This plugin exports several recommended configurations that enforce good practices for specific Testing Library packages. You can find more info about enabled rules in the [Supported Rules section](#supported-rules) within the `Configurations` column. ### DOM Testing Library From 0c2e3a14102709f9d91466976ae6c8c8dd108b24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mario=20Beltra=CC=81n=20Alarco=CC=81n?= Date: Sun, 21 Jun 2020 15:29:44 +0200 Subject: [PATCH 3/4] docs: fix Vue heading level --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 36a2621b..acdafbc3 100644 --- a/README.md +++ b/README.md @@ -110,7 +110,7 @@ To enable this configuration use the `extends` property in your } ``` -#### Vue +### Vue Enforces recommended rules for Vue Testing Library. From 9c0d26b483f446a4449b19df11ca3d36964bc4e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mario=20Beltra=CC=81n=20Alarco=CC=81n?= Date: Mon, 22 Jun 2020 10:23:39 +0200 Subject: [PATCH 4/4] docs: update dom badge --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index acdafbc3..c1f6ed98 100644 --- a/README.md +++ b/README.md @@ -157,7 +157,7 @@ To enable this configuration use the `extends` property in your [gh-stars-url]: https://github.com/belco90/eslint-plugin-testing-library/stargazers [tweet-badge]: https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2FBelco90%2Feslint-plugin-testing-library [tweet-url]: https://twitter.com/intent/tweet?url=https%3a%2f%2fgithub.com%2fbelco90%2feslint-plugin-testing-library&text=check%20out%20eslint-plugin-testing-library%20by%20@belcodev -[dom-badge]: https://img.shields.io/badge/dom-lightgrey?style=flat-square +[dom-badge]: https://img.shields.io/badge/%F0%9F%90%99-DOM-black?style=flat-square [fixable-badge]: https://img.shields.io/badge/fixable-success?style=flat-square [angular-badge]: https://img.shields.io/badge/-Angular-black?style=flat-square&logo=angular&logoColor=white&labelColor=DD0031&color=black [react-badge]: https://img.shields.io/badge/-React-black?style=flat-square&logo=react&logoColor=white&labelColor=61DAFB&color=black