diff --git a/README.md b/README.md index a7efc643..203d34ce 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 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. -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: @@ -120,7 +110,9 @@ To enable this configuration use the `extends` property in your } ``` -#### Vue +### Vue + +Enforces recommended rules for Vue Testing Library. To enable this configuration use the `extends` property in your `.eslintrc` config file: @@ -133,24 +125,24 @@ 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-container](docs/rules/no-container.md) | Disallow the use of `container` methods | ![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-promise-in-fire-event](docs/rules/no-promise-in-fire-event.md) | Disallow the use of promises passed to a `fireEvent` method | | | -| [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-container](docs/rules/no-container.md) | Disallow the use of `container` methods | ![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-promise-in-fire-event](docs/rules/no-promise-in-fire-event.md) | Disallow the use of promises passed to a `fireEvent` method | | | +| [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 @@ -166,7 +158,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/%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 diff --git a/lib/index.ts b/lib/index.ts index 80b806f4..d9ea7a77 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -34,7 +34,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', @@ -44,40 +44,46 @@ const recommendedRules = { 'testing-library/prefer-screen-queries': 'error', }; +const angularRules = { + ...domRules, + 'testing-library/no-container': 'error', + 'testing-library/no-debug': 'warn', + 'testing-library/no-dom-import': ['error', 'angular'], +}; + +const reactRules = { + ...domRules, + 'testing-library/no-container': 'error', + 'testing-library/no-debug': 'warn', + 'testing-library/no-dom-import': ['error', 'react'], +}; + +const vueRules = { + ...domRules, + 'testing-library/await-fire-event': 'error', + 'testing-library/no-container': '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-container': 'error', - 'testing-library/no-debug': 'warn', - 'testing-library/no-dom-import': ['error', 'angular'], - }, + rules: angularRules, }, react: { plugins: ['testing-library'], - rules: { - ...recommendedRules, - 'testing-library/no-container': 'error', - '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-container': '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 3c50ac6a..b86f6a5c 100644 --- a/tests/__snapshots__/index.test.ts.snap +++ b/tests/__snapshots__/index.test.ts.snap @@ -23,7 +23,7 @@ Object { } `; -exports[`should export proper "react" config 1`] = ` +exports[`should export proper "dom" config 1`] = ` Object { "plugins": Array [ "testing-library", @@ -32,12 +32,6 @@ Object { "testing-library/await-async-query": "error", "testing-library/await-async-utils": "error", "testing-library/no-await-sync-query": "error", - "testing-library/no-container": "error", - "testing-library/no-debug": "warn", - "testing-library/no-dom-import": Array [ - "error", - "react", - ], "testing-library/no-promise-in-fire-event": "error", "testing-library/no-wait-for-empty-callback": "error", "testing-library/prefer-find-by": "error", @@ -46,7 +40,7 @@ Object { } `; -exports[`should export proper "recommended" config 1`] = ` +exports[`should export proper "react" config 1`] = ` Object { "plugins": Array [ "testing-library", @@ -55,6 +49,12 @@ Object { "testing-library/await-async-query": "error", "testing-library/await-async-utils": "error", "testing-library/no-await-sync-query": "error", + "testing-library/no-container": "error", + "testing-library/no-debug": "warn", + "testing-library/no-dom-import": Array [ + "error", + "react", + ], "testing-library/no-promise-in-fire-event": "error", "testing-library/no-wait-for-empty-callback": "error", "testing-library/prefer-find-by": "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();