From 3d7e73c19577ad3d3cd5cc3fa1e0eaa97cffb1ae Mon Sep 17 00:00:00 2001
From: Patrick Ahmetovic <patrick.ahmetovic@gmail.com>
Date: Fri, 20 Jan 2023 09:37:11 +0100
Subject: [PATCH 1/4] feat(consistent-data-testid): add support for custom
message in the rule configuration
---
lib/rules/consistent-data-testid.ts | 28 +++++++++++++--
.../lib/rules/consistent-data-testid.test.ts | 36 +++++++++++++++++++
2 files changed, 61 insertions(+), 3 deletions(-)
diff --git a/lib/rules/consistent-data-testid.ts b/lib/rules/consistent-data-testid.ts
index e71bcb5e..32521df3 100644
--- a/lib/rules/consistent-data-testid.ts
+++ b/lib/rules/consistent-data-testid.ts
@@ -2,11 +2,14 @@ import { createTestingLibraryRule } from '../create-testing-library-rule';
import { isJSXAttribute, isLiteral } from '../node-utils';
export const RULE_NAME = 'consistent-data-testid';
-export type MessageIds = 'consistentDataTestId';
+export type MessageIds =
+ | 'consistentDataTestId'
+ | 'consistentDataTestIdCustomMessage';
export type Options = [
{
testIdAttribute?: string[] | string;
testIdPattern: string;
+ customMessage?: string;
}
];
@@ -28,6 +31,7 @@ export default createTestingLibraryRule<Options, MessageIds>({
},
messages: {
consistentDataTestId: '`{{attr}}` "{{value}}" should match `{{regex}}`',
+ consistentDataTestIdCustomMessage: '`{{message}}`',
},
schema: [
{
@@ -53,6 +57,10 @@ export default createTestingLibraryRule<Options, MessageIds>({
},
],
},
+ customMessage: {
+ default: '',
+ type: 'string',
+ },
},
},
],
@@ -61,6 +69,7 @@ export default createTestingLibraryRule<Options, MessageIds>({
{
testIdPattern: '',
testIdAttribute: 'data-testid',
+ customMessage: '',
},
],
detectionOptions: {
@@ -69,7 +78,7 @@ export default createTestingLibraryRule<Options, MessageIds>({
create: (context, [options]) => {
const { getFilename } = context;
- const { testIdPattern, testIdAttribute: attr } = options;
+ const { testIdPattern, testIdAttribute: attr, customMessage } = options;
function getFileNameData() {
const splitPath = getFilename().split('/');
@@ -100,6 +109,18 @@ export default createTestingLibraryRule<Options, MessageIds>({
}
}
+ function getErrorMessageId(): MessageIds {
+ if (customMessage === undefined) {
+ return 'consistentDataTestId';
+ }
+
+ if (customMessage === '') {
+ return 'consistentDataTestId';
+ }
+
+ return 'consistentDataTestIdCustomMessage';
+ }
+
return {
JSXIdentifier: (node) => {
if (
@@ -118,11 +139,12 @@ export default createTestingLibraryRule<Options, MessageIds>({
if (value && typeof value === 'string' && !regex.test(value)) {
context.report({
node,
- messageId: 'consistentDataTestId',
+ messageId: getErrorMessageId(),
data: {
attr: node.name,
value,
regex,
+ message: customMessage,
},
});
}
diff --git a/tests/lib/rules/consistent-data-testid.test.ts b/tests/lib/rules/consistent-data-testid.test.ts
index cb7487c1..76b9337f 100644
--- a/tests/lib/rules/consistent-data-testid.test.ts
+++ b/tests/lib/rules/consistent-data-testid.test.ts
@@ -283,6 +283,7 @@ const invalidTestCases: InvalidTestCase[] = [
attr: 'data-testid',
value: 'Awesome__CoolStuff',
regex: '/error/',
+ message: '',
},
},
],
@@ -312,6 +313,7 @@ const invalidTestCases: InvalidTestCase[] = [
attr: 'data-testid',
value: 'Nope',
regex: '/matchMe/',
+ message: '',
},
},
],
@@ -342,6 +344,7 @@ const invalidTestCases: InvalidTestCase[] = [
attr: 'my-custom-attr',
value: 'WrongComponent__cool',
regex: '/^Parent(__([A-Z]+[a-z]*?)+)*$/',
+ message: '',
},
},
],
@@ -380,6 +383,7 @@ const invalidTestCases: InvalidTestCase[] = [
attr: 'another-custom-attr',
value: 'wrong',
regex: '/^right$/',
+ message: '',
},
},
],
@@ -409,6 +413,38 @@ const invalidTestCases: InvalidTestCase[] = [
attr: 'data-testid',
value: 'WrongComponent__cool',
regex: '/^Parent(__([A-Z]+[a-z]*?)+)*$/',
+ message: '',
+ },
+ },
+ ],
+ },
+ {
+ code: `
+ import React from 'react';
+
+ const TestComponent = props => {
+ return (
+ <div data-testid="snake_case_value">
+ Hello
+ </div>
+ )
+ };
+ `,
+ options: [
+ {
+ testIdPattern: '^([a-z][a-z0-9]*)(-[a-z0-9]+)*$', //kebab-case
+ customMessage: 'Please use kebab-cased data-testid values.',
+ },
+ ],
+ filename: '/my/cool/__tests__/Parent/index.js',
+ errors: [
+ {
+ messageId: 'consistentDataTestIdCustomMessage',
+ data: {
+ attr: 'data-testid',
+ value: 'snake_case_value',
+ regex: '^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
+ message: 'Please use kebab-cased data-testid values.',
},
},
],
From 4525f49854bfd39c2c14056fc9b1472d9e17ea9e Mon Sep 17 00:00:00 2001
From: Patrick Ahmetovic <patrick.ahmetovic@prescreen.io>
Date: Fri, 20 Jan 2023 15:13:14 +0100
Subject: [PATCH 2/4] feat(consistent-data-testid): update docs
---
docs/rules/consistent-data-testid.md | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/docs/rules/consistent-data-testid.md b/docs/rules/consistent-data-testid.md
index 0cfc3406..3c3668ee 100644
--- a/docs/rules/consistent-data-testid.md
+++ b/docs/rules/consistent-data-testid.md
@@ -34,6 +34,7 @@ const baz = (props) => <div>...</div>;
| ----------------- | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
| `testIdPattern` | Yes | None | A regex used to validate the format of the `data-testid` value. `{fileName}` can optionally be used as a placeholder and will be substituted with the name of the file OR the name of the files parent directory in the case when the file name is `index.js` OR empty string in the case of dynamically changing routes (that contain square brackets) with `Gatsby.js` or `Next.js` | `^{fileName}(\_\_([A-Z]+[a-z]_?)+)_\$` |
| `testIdAttribute` | No | `data-testid` | A string (or array of strings) used to specify the attribute used for querying by ID. This is only required if data-testid has been explicitly overridden in the [RTL configuration](https://testing-library.com/docs/dom-testing-library/api-queries#overriding-data-testid) | `data-my-test-attribute`, `["data-testid", "testId"]` |
+| `customMessage` | No | `''` | A string used to display a custom message whenever warnings/errors are reported. | `A custom message` |
## Example
@@ -59,6 +60,17 @@ const baz = (props) => <div>...</div>;
}
```
+```json
+{
+ "testing-library/consistent-data-testid": [
+ 2,
+ {
+ "customMessage": "A custom message"
+ }
+ ]
+}
+```
+
## Notes
- If you are using Gatsby.js's [client-only routes](https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/#syntax-client-only-routes) or Next.js's [dynamic routes](https://nextjs.org/docs/routing/dynamic-routes) and therefore have square brackets (`[]`) in the filename (e.g. `../path/to/[component].js`), the `{fileName}` placeholder will be replaced with an empty string. This is because a linter cannot know what the dynamic content will be at run time.
From 84f18fe3bd388cab5d70065b5b1306b0fb8bafad Mon Sep 17 00:00:00 2001
From: Patrick Ahmetovic <patrick.ahmetovic@prescreen.io>
Date: Mon, 23 Jan 2023 13:21:17 +0100
Subject: [PATCH 3/4] feat(consistent-data-testid): use undefined as default
value for customMessage
---
docs/rules/consistent-data-testid.md | 2 +-
lib/rules/consistent-data-testid.ts | 8 ++------
2 files changed, 3 insertions(+), 7 deletions(-)
diff --git a/docs/rules/consistent-data-testid.md b/docs/rules/consistent-data-testid.md
index 3c3668ee..fb7f9940 100644
--- a/docs/rules/consistent-data-testid.md
+++ b/docs/rules/consistent-data-testid.md
@@ -34,7 +34,7 @@ const baz = (props) => <div>...</div>;
| ----------------- | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
| `testIdPattern` | Yes | None | A regex used to validate the format of the `data-testid` value. `{fileName}` can optionally be used as a placeholder and will be substituted with the name of the file OR the name of the files parent directory in the case when the file name is `index.js` OR empty string in the case of dynamically changing routes (that contain square brackets) with `Gatsby.js` or `Next.js` | `^{fileName}(\_\_([A-Z]+[a-z]_?)+)_\$` |
| `testIdAttribute` | No | `data-testid` | A string (or array of strings) used to specify the attribute used for querying by ID. This is only required if data-testid has been explicitly overridden in the [RTL configuration](https://testing-library.com/docs/dom-testing-library/api-queries#overriding-data-testid) | `data-my-test-attribute`, `["data-testid", "testId"]` |
-| `customMessage` | No | `''` | A string used to display a custom message whenever warnings/errors are reported. | `A custom message` |
+| `customMessage` | No | `undefined` | A string used to display a custom message whenever warnings/errors are reported. | `A custom message` |
## Example
diff --git a/lib/rules/consistent-data-testid.ts b/lib/rules/consistent-data-testid.ts
index 32521df3..7760776c 100644
--- a/lib/rules/consistent-data-testid.ts
+++ b/lib/rules/consistent-data-testid.ts
@@ -58,7 +58,7 @@ export default createTestingLibraryRule<Options, MessageIds>({
],
},
customMessage: {
- default: '',
+ default: undefined,
type: 'string',
},
},
@@ -69,7 +69,7 @@ export default createTestingLibraryRule<Options, MessageIds>({
{
testIdPattern: '',
testIdAttribute: 'data-testid',
- customMessage: '',
+ customMessage: undefined,
},
],
detectionOptions: {
@@ -114,10 +114,6 @@ export default createTestingLibraryRule<Options, MessageIds>({
return 'consistentDataTestId';
}
- if (customMessage === '') {
- return 'consistentDataTestId';
- }
-
return 'consistentDataTestIdCustomMessage';
}
From 5edd4bf78220432eeea6f525483907ac7a3a070b Mon Sep 17 00:00:00 2001
From: Patrick Ahmetovic <patrick.ahmetovic@prescreen.io>
Date: Mon, 23 Jan 2023 13:22:14 +0100
Subject: [PATCH 4/4] feat(consistent-data-testid): add comment to test case
---
tests/lib/rules/consistent-data-testid.test.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/tests/lib/rules/consistent-data-testid.test.ts b/tests/lib/rules/consistent-data-testid.test.ts
index 76b9337f..7edaf7c6 100644
--- a/tests/lib/rules/consistent-data-testid.test.ts
+++ b/tests/lib/rules/consistent-data-testid.test.ts
@@ -419,7 +419,7 @@ const invalidTestCases: InvalidTestCase[] = [
],
},
{
- code: `
+ code: ` // test for custom message
import React from 'react';
const TestComponent = props => {