Skip to content

Commit 9db40ee

Browse files
authored
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.
1 parent 86f9c84 commit 9db40ee

File tree

4 files changed

+70
-72
lines changed

4 files changed

+70
-72
lines changed

README.md

+33-41
Original file line numberDiff line numberDiff line change
@@ -68,37 +68,25 @@ Then configure the rules you want to use under the rules section.
6868

6969
## Shareable configurations
7070

71-
### Recommended
71+
This plugin exports several recommended configurations that enforce good practices for specific Testing Library packages.
72+
You can find more info about enabled rules in the [Supported Rules section](#supported-rules) within the `Configurations` column.
7273

73-
This plugin exports a recommended configuration that enforces good
74-
Testing Library practices _(you can find more info about enabled rules in
75-
the [Supported Rules section](#supported-rules) within the `Configurations` column)_.
74+
### DOM Testing Library
75+
76+
Enforces recommended rules for DOM Testing Library.
7677

7778
To enable this configuration use the `extends` property in your
7879
`.eslintrc` config file:
7980

8081
```json
8182
{
82-
"extends": ["plugin:testing-library/recommended"]
83+
"extends": ["plugin:testing-library/dom"]
8384
}
8485
```
8586

86-
### Frameworks
87-
88-
Starting from the premise that
89-
[DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro)
90-
is the base for the rest of Testing Library frameworks wrappers, this
91-
plugin also exports different configuration for those frameworks that
92-
enforces good practices for specific rules that only apply to them _(you
93-
can find more info about enabled rules in
94-
the [Supported Rules section](#supported-rules) within the `Configurations` column)_.
95-
96-
**Note that frameworks configurations enable their specific rules +
97-
recommended rules.**
87+
### Angular
9888

99-
Available frameworks configurations are:
100-
101-
#### Angular
89+
Enforces recommended rules for Angular Testing Library.
10290

10391
To enable this configuration use the `extends` property in your
10492
`.eslintrc` config file:
@@ -109,7 +97,9 @@ To enable this configuration use the `extends` property in your
10997
}
11098
```
11199

112-
#### React
100+
### React
101+
102+
Enforces recommended rules for React Testing Library.
113103

114104
To enable this configuration use the `extends` property in your
115105
`.eslintrc` config file:
@@ -120,7 +110,9 @@ To enable this configuration use the `extends` property in your
120110
}
121111
```
122112

123-
#### Vue
113+
### Vue
114+
115+
Enforces recommended rules for Vue Testing Library.
124116

125117
To enable this configuration use the `extends` property in your
126118
`.eslintrc` config file:
@@ -133,24 +125,24 @@ To enable this configuration use the `extends` property in your
133125

134126
## Supported Rules
135127

136-
| Rule | Description | Configurations | Fixable |
137-
| ---------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------ |
138-
| [await-async-query](docs/rules/await-async-query.md) | Enforce async queries to have proper `await` | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | |
139-
| [await-async-utils](docs/rules/await-async-utils.md) | Enforce async utils to be awaited properly | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | |
140-
| [await-fire-event](docs/rules/await-fire-event.md) | Enforce async fire event methods to be awaited | ![vue-badge][] | |
141-
| [consistent-data-testid](docs/rules/consistent-data-testid.md) | Ensure `data-testid` values match a provided regex. | | |
142-
| [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][] | |
143-
| [no-container](docs/rules/no-container.md) | Disallow the use of `container` methods | ![angular-badge][] ![react-badge][] ![vue-badge][] | |
144-
| [no-debug](docs/rules/no-debug.md) | Disallow the use of `debug` | ![angular-badge][] ![react-badge][] ![vue-badge][] | |
145-
| [no-dom-import](docs/rules/no-dom-import.md) | Disallow importing from DOM Testing Library | ![angular-badge][] ![react-badge][] ![vue-badge][] | ![fixable-badge][] |
146-
| [no-manual-cleanup](docs/rules/no-manual-cleanup.md) | Disallow the use of `cleanup` | | |
147-
| [no-promise-in-fire-event](docs/rules/no-promise-in-fire-event.md) | Disallow the use of promises passed to a `fireEvent` method | | |
148-
| [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][] | |
149-
| [prefer-explicit-assert](docs/rules/prefer-explicit-assert.md) | Suggest using explicit assertions rather than just `getBy*` queries | | |
150-
| [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][] |
151-
| [prefer-presence-queries](docs/rules/prefer-presence-queries.md) | Enforce specific queries when checking element is present or not | | |
152-
| [prefer-screen-queries](docs/rules/prefer-screen-queries.md) | Suggest using screen while using queries | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | |
153-
| [prefer-wait-for](docs/rules/prefer-wait-for.md) | Use `waitFor` instead of deprecated wait methods | | ![fixable-badge][] |
128+
| Rule | Description | Configurations | Fixable |
129+
| ---------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------ |
130+
| [await-async-query](docs/rules/await-async-query.md) | Enforce async queries to have proper `await` | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | |
131+
| [await-async-utils](docs/rules/await-async-utils.md) | Enforce async utils to be awaited properly | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | |
132+
| [await-fire-event](docs/rules/await-fire-event.md) | Enforce async fire event methods to be awaited | ![vue-badge][] | |
133+
| [consistent-data-testid](docs/rules/consistent-data-testid.md) | Ensure `data-testid` values match a provided regex. | | |
134+
| [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][] | |
135+
| [no-container](docs/rules/no-container.md) | Disallow the use of `container` methods | ![angular-badge][] ![react-badge][] ![vue-badge][] | |
136+
| [no-debug](docs/rules/no-debug.md) | Disallow the use of `debug` | ![angular-badge][] ![react-badge][] ![vue-badge][] | |
137+
| [no-dom-import](docs/rules/no-dom-import.md) | Disallow importing from DOM Testing Library | ![angular-badge][] ![react-badge][] ![vue-badge][] | ![fixable-badge][] |
138+
| [no-manual-cleanup](docs/rules/no-manual-cleanup.md) | Disallow the use of `cleanup` | | |
139+
| [no-promise-in-fire-event](docs/rules/no-promise-in-fire-event.md) | Disallow the use of promises passed to a `fireEvent` method | | |
140+
| [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][] | |
141+
| [prefer-explicit-assert](docs/rules/prefer-explicit-assert.md) | Suggest using explicit assertions rather than just `getBy*` queries | | |
142+
| [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][] |
143+
| [prefer-presence-queries](docs/rules/prefer-presence-queries.md) | Enforce specific queries when checking element is present or not | | |
144+
| [prefer-screen-queries](docs/rules/prefer-screen-queries.md) | Suggest using screen while using queries | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | |
145+
| [prefer-wait-for](docs/rules/prefer-wait-for.md) | Use `waitFor` instead of deprecated wait methods | | ![fixable-badge][] |
154146

155147
[build-badge]: https://img.shields.io/travis/testing-library/eslint-plugin-testing-library?style=flat-square
156148
[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
166158
[gh-stars-url]: https://github.com/belco90/eslint-plugin-testing-library/stargazers
167159
[tweet-badge]: https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2FBelco90%2Feslint-plugin-testing-library
168160
[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
169-
[recommended-badge]: https://img.shields.io/badge/recommended-lightgrey?style=flat-square
161+
[dom-badge]: https://img.shields.io/badge/%F0%9F%90%99-DOM-black?style=flat-square
170162
[fixable-badge]: https://img.shields.io/badge/fixable-success?style=flat-square
171163
[angular-badge]: https://img.shields.io/badge/-Angular-black?style=flat-square&logo=angular&logoColor=white&labelColor=DD0031&color=black
172164
[react-badge]: https://img.shields.io/badge/-React-black?style=flat-square&logo=react&logoColor=white&labelColor=61DAFB&color=black

lib/index.ts

+28-22
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const rules = {
3434
'prefer-wait-for': preferWaitFor,
3535
};
3636

37-
const recommendedRules = {
37+
const domRules = {
3838
'testing-library/await-async-query': 'error',
3939
'testing-library/await-async-utils': 'error',
4040
'testing-library/no-await-sync-query': 'error',
@@ -44,40 +44,46 @@ const recommendedRules = {
4444
'testing-library/prefer-screen-queries': 'error',
4545
};
4646

47+
const angularRules = {
48+
...domRules,
49+
'testing-library/no-container': 'error',
50+
'testing-library/no-debug': 'warn',
51+
'testing-library/no-dom-import': ['error', 'angular'],
52+
};
53+
54+
const reactRules = {
55+
...domRules,
56+
'testing-library/no-container': 'error',
57+
'testing-library/no-debug': 'warn',
58+
'testing-library/no-dom-import': ['error', 'react'],
59+
};
60+
61+
const vueRules = {
62+
...domRules,
63+
'testing-library/await-fire-event': 'error',
64+
'testing-library/no-container': 'error',
65+
'testing-library/no-debug': 'warn',
66+
'testing-library/no-dom-import': ['error', 'vue'],
67+
};
68+
4769
export = {
4870
rules,
4971
configs: {
50-
recommended: {
72+
dom: {
5173
plugins: ['testing-library'],
52-
rules: recommendedRules,
74+
rules: domRules,
5375
},
5476
angular: {
5577
plugins: ['testing-library'],
56-
rules: {
57-
...recommendedRules,
58-
'testing-library/no-container': 'error',
59-
'testing-library/no-debug': 'warn',
60-
'testing-library/no-dom-import': ['error', 'angular'],
61-
},
78+
rules: angularRules,
6279
},
6380
react: {
6481
plugins: ['testing-library'],
65-
rules: {
66-
...recommendedRules,
67-
'testing-library/no-container': 'error',
68-
'testing-library/no-debug': 'warn',
69-
'testing-library/no-dom-import': ['error', 'react'],
70-
},
82+
rules: reactRules,
7183
},
7284
vue: {
7385
plugins: ['testing-library'],
74-
rules: {
75-
...recommendedRules,
76-
'testing-library/await-fire-event': 'error',
77-
'testing-library/no-container': 'error',
78-
'testing-library/no-debug': 'warn',
79-
'testing-library/no-dom-import': ['error', 'vue'],
80-
},
86+
rules: vueRules,
8187
},
8288
},
8389
};

tests/__snapshots__/index.test.ts.snap

+8-8
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ Object {
2323
}
2424
`;
2525

26-
exports[`should export proper "react" config 1`] = `
26+
exports[`should export proper "dom" config 1`] = `
2727
Object {
2828
"plugins": Array [
2929
"testing-library",
@@ -32,12 +32,6 @@ Object {
3232
"testing-library/await-async-query": "error",
3333
"testing-library/await-async-utils": "error",
3434
"testing-library/no-await-sync-query": "error",
35-
"testing-library/no-container": "error",
36-
"testing-library/no-debug": "warn",
37-
"testing-library/no-dom-import": Array [
38-
"error",
39-
"react",
40-
],
4135
"testing-library/no-promise-in-fire-event": "error",
4236
"testing-library/no-wait-for-empty-callback": "error",
4337
"testing-library/prefer-find-by": "error",
@@ -46,7 +40,7 @@ Object {
4640
}
4741
`;
4842

49-
exports[`should export proper "recommended" config 1`] = `
43+
exports[`should export proper "react" config 1`] = `
5044
Object {
5145
"plugins": Array [
5246
"testing-library",
@@ -55,6 +49,12 @@ Object {
5549
"testing-library/await-async-query": "error",
5650
"testing-library/await-async-utils": "error",
5751
"testing-library/no-await-sync-query": "error",
52+
"testing-library/no-container": "error",
53+
"testing-library/no-debug": "warn",
54+
"testing-library/no-dom-import": Array [
55+
"error",
56+
"react",
57+
],
5858
"testing-library/no-promise-in-fire-event": "error",
5959
"testing-library/no-wait-for-empty-callback": "error",
6060
"testing-library/prefer-find-by": "error",

tests/index.test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ it('should export all available rules', () => {
1010
expect(Object.keys(rules)).toEqual(availableRules);
1111
});
1212

13-
it.each(['recommended', 'angular', 'react', 'vue'])(
13+
it.each(['dom', 'angular', 'react', 'vue'])(
1414
'should export proper "%s" config',
1515
configName => {
1616
expect(configs[configName]).toMatchSnapshot();

0 commit comments

Comments
 (0)