[New]: jsx-no-literals: add validateProps option to ignore props …

…validation
jsx-eslint · Mar 8, 2020 · 122721f · 122721f
1 parent 6dd14b9
commit 122721f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 58 deletions.
diff --git a/docs/rules/jsx-no-literals.md b/docs/rules/jsx-no-literals.md
@@ -30,12 +30,12 @@ There are two options:
 
 * `noStrings`(`false` default) - Enforces no string literals used as children, wrapped or unwrapped.
 * `allowedStrings` - An array of unique string values that would otherwise warn, but will be ignored.
-* `validateProps`(`false` default) - Enforces no literals used in props, wrapped or unwrapped.
+* `ignoreProps`(`false` default) - When `true` the rule ignores literals used in props, wrapped or unwrapped.
 
 To use, you can specify as follows:
 
 ```js
-"react/jsx-no-literals": [<enabled>, {"noStrings": true, "allowedStrings": ["allowed"], "validateProps": true}]
+"react/jsx-no-literals": [<enabled>, {"noStrings": true, "allowedStrings": ["allowed"], "ignoreProps": false}]
 ```
 
 In this configuration, the following are considered warnings:

diff --git a/lib/rules/jsx-no-literals.js b/lib/rules/jsx-no-literals.js
@@ -38,7 +38,7 @@ module.exports = {
             type: 'string'
           }
         },
-        validateProps: {
+        ignoreProps: {
           type: 'boolean'
         }
       },
@@ -47,7 +47,7 @@ module.exports = {
   },
 
   create(context) {
-    const defaults = {noStrings: false, allowedStrings: [], validateProps: false};
+    const defaults = {noStrings: false, allowedStrings: [], ignoreProps: false};
     const config = Object.assign({}, defaults, context.options[0] || {});
     config.allowedStrings = new Set(config.allowedStrings.map(trimIfString));
 
@@ -114,16 +114,16 @@ module.exports = {
 
     return {
       Literal(node) {
-        if (getValidation(node) && (hasJSXElementParentOrGrandParent(node) || config.validateProps)) {
+        if (getValidation(node) && (hasJSXElementParentOrGrandParent(node) || !config.ignoreProps)) {
           reportLiteralNode(node);
         }
       },
 
       JSXAttribute(node) {
         const isNodeValueString = node.value && node.value && node.value.type === 'Literal' && typeof node.value.value === 'string';
 
-        if (config.noStrings && config.validateProps && isNodeValueString) {
-          const customMessage = 'Invalid attribute value';
+        if (config.noStrings && !config.ignoreProps && isNodeValueString) {
+          const customMessage = 'Invalid prop value';
           reportLiteralNode(node, customMessage);
         }
       },
@@ -141,7 +141,7 @@ module.exports = {
         const isParentJSXExpressionCont = parentType === 'JSXExpressionContainer';
         const isParentJSXElement = parentType === 'JSXElement' || grandParentType === 'JSXElement';
 
-        if (isParentJSXExpressionCont && config.noStrings && (isParentJSXElement || config.validateProps)) {
+        if (isParentJSXExpressionCont && config.noStrings && (isParentJSXElement || !config.ignoreProps)) {
           reportLiteralNode(node);
         }
       }

diff --git a/tests/lib/rules/jsx-no-literals.js b/tests/lib/rules/jsx-no-literals.js
@@ -35,6 +35,10 @@ function jsxMessage(str) {
   return `Missing JSX expression container around literal string: “${str}”`;
 }
 
+function invalidProp(str) {
+  return `Invalid prop value: “${str}”`;
+}
+
 const ruleTester = new RuleTester({parserOptions});
 ruleTester.run('jsx-no-literals', rule, {
 
@@ -140,29 +144,29 @@ ruleTester.run('jsx-no-literals', rule, {
         </Foo>
       `,
       parser: parsers.BABEL_ESLINT,
-      options: [{noStrings: true}]
+      options: [{noStrings: true, ignoreProps: true}]
     }, {
       code: `
         <Foo bar="test">
           {translate('my.translate.key')}
         </Foo>
       `,
       parser: parsers.BABEL_ESLINT,
-      options: [{noStrings: true}]
+      options: [{noStrings: true, ignoreProps: true}]
     }, {
       code: `
         <Foo bar="test">
           {intl.formatText(message)}
         </Foo>
       `,
-      options: [{noStrings: true}]
+      options: [{noStrings: true, ignoreProps: true}]
     }, {
       code: `
         <Foo bar="test">
           {translate('my.translate.key')}
         </Foo>
       `,
-      options: [{noStrings: true}]
+      options: [{noStrings: true, ignoreProps: true}]
     }, {
       code: '<Foo bar={true} />',
       options: [{noStrings: true}]
@@ -187,7 +191,7 @@ ruleTester.run('jsx-no-literals', rule, {
           }
         }
       `,
-      options: [{noStrings: true}]
+      options: [{noStrings: true, ignoreProps: true}]
     }, {
       code: `
         class Comp1 extends Component {
@@ -271,7 +275,7 @@ ruleTester.run('jsx-no-literals', rule, {
           }
         }      `,
       parser: parsers.BABEL_ESLINT,
-      options: [{noStrings: true, validateProps: true}]
+      options: [{noStrings: true, ignoreProps: false}]
     }
   ],
 
@@ -381,42 +385,33 @@ ruleTester.run('jsx-no-literals', rule, {
           {'Test'}
         </Foo>
       `,
-      parser: parsers.BABEL_ESLINT,
-      options: [{noStrings: true}],
-      errors: [{message: stringsMessage('\'Test\'')}]
-    }, {
-      code: `
-        <Foo bar="test">
-          {'Test'}
-        </Foo>
-      `,
-      options: [{noStrings: true}],
-      errors: [{message: stringsMessage('\'Test\'')}]
+      options: [{noStrings: true, ignoreProps: false}],
+      errors: [
+        {message: invalidProp('bar="test"')},
+        {message: stringsMessage('\'Test\'')}
+      ]
     }, {
       code: `
         <Foo bar="test">
           {'Test' + name}
         </Foo>
       `,
-      options: [{noStrings: true}],
-      errors: [{message: stringsMessage('\'Test\'')}]
-    }, {
-      code: `
-        <Foo bar="test">
-          Test
-        </Foo>
-      `,
-      parser: parsers.BABEL_ESLINT,
-      options: [{noStrings: true}],
-      errors: [{message: stringsMessage('Test')}]
+      options: [{noStrings: true, ignoreProps: false}],
+      errors: [
+        {message: invalidProp('bar="test"')},
+        {message: stringsMessage('\'Test\'')}
+      ]
     }, {
       code: `
         <Foo bar="test">
           Test
         </Foo>
       `,
-      options: [{noStrings: true}],
-      errors: [{message: stringsMessage('Test')}]
+      options: [{noStrings: true, ignoreProps: false}],
+      errors: [
+        {message: invalidProp('bar="test"')},
+        {message: stringsMessage('Test')}
+      ]
     }, {
       code: `
         <Foo>
@@ -427,33 +422,33 @@ ruleTester.run('jsx-no-literals', rule, {
       errors: [{message: stringsMessage('`Test`')}]
     }, {
       code: '<Foo bar={`Test`} />',
-      options: [{noStrings: true, validateProps: true}],
+      options: [{noStrings: true, ignoreProps: false}],
       errors: [{message: stringsMessage('`Test`')}]
     }, {
       code: '<Foo bar={`${baz}`} />',
-      options: [{noStrings: true, validateProps: true}],
+      options: [{noStrings: true, ignoreProps: false}],
       errors: [{message: stringsMessage('`${baz}`')}]
     }, {
       code: '<Foo bar={`Test ${baz}`} />',
-      options: [{noStrings: true, validateProps: true}],
+      options: [{noStrings: true, ignoreProps: false}],
       errors: [{message: stringsMessage('`Test ${baz}`')}]
     }, {
       code: '<Foo bar={`foo` + \'bar\'} />',
-      options: [{noStrings: true, validateProps: true}],
+      options: [{noStrings: true, ignoreProps: false}],
       errors: [
         {message: stringsMessage('`foo`')},
         {message: stringsMessage('\'bar\'')}
       ]
     }, {
       code: '<Foo bar={`foo` + `bar`} />',
-      options: [{noStrings: true, validateProps: true}],
+      options: [{noStrings: true, ignoreProps: false}],
       errors: [
         {message: stringsMessage('`foo`')},
         {message: stringsMessage('`bar`')}
       ]
     }, {
       code: '<Foo bar={\'foo\' + `bar`} />',
-      options: [{noStrings: true, validateProps: true}],
+      options: [{noStrings: true, ignoreProps: false}],
       errors: [
         {message: stringsMessage('\'foo\'')},
         {message: stringsMessage('`bar`')}
@@ -466,26 +461,14 @@ ruleTester.run('jsx-no-literals', rule, {
           }
         }
       `,
-      options: [{noStrings: true, allowedStrings: ['asd']}],
-      errors: [
-        {message: stringsMessage('asdf')}
-      ]
-    }, {
-      code: `
-        class Comp1 extends Component {
-          render() {
-            return <div bar={'foo'}>asdf</div>
-          }
-        }
-      `,
-      options: [{noStrings: true, allowedStrings: ['asd'], validateProps: true}],
+      options: [{noStrings: true, allowedStrings: ['asd'], ignoreProps: false}],
       errors: [
         {message: stringsMessage('\'foo\'')},
         {message: stringsMessage('asdf')}
       ]
     }, {
       code: '<Foo bar={\'bar\'} />',
-      options: [{noStrings: true, validateProps: true}],
+      options: [{noStrings: true, ignoreProps: false}],
       errors: [
         {message: stringsMessage('\'bar\'')}
       ]