refactor: rename recommended config to dom (#184)

BREAKING CHANGE: `recommended` config preset has been renamed to `dom`, so make sure to update it in your ESLint config file if you were using `recommended` preset.
testing-library · Jun 22, 2020 · 9db40ee · 9db40ee
1 parent 86f9c84
commit 9db40ee
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 72 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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();