[new] boolean-prop-naming: add option to validate shape prop names

jsx-eslint · Apr 10, 2019 · 157332f · 157332f
1 parent 60b4b31
commit 157332f
Show file tree

Hide file tree

Showing 3 changed files with 168 additions and 17 deletions.
diff --git a/docs/rules/boolean-prop-naming.md b/docs/rules/boolean-prop-naming.md
@@ -30,7 +30,12 @@ var Hello = createReactClass({
 
 ```js
 ...
-"react/boolean-prop-naming": [<enabled>, { "propTypeNames": Array<string>, "rule": <string>, "message": <string> }]
+"react/boolean-prop-naming": [<enabled>, { 
+  "propTypeNames": Array<string>, 
+  "rule": <string>, 
+  "message": <string>, 
+  "validateNested": <boolean> 
+}]
 ...
 ```
 
@@ -86,3 +91,11 @@ And the failure would look like so:
 ```
 It is better if your prop (something) matches this pattern: (^is[A-Z]([A-Za-z0-9]?)+)
 ```
+
+### `validateNested`
+
+This value is boolean. It tells if nested props should be validated as well. By default this is set to false but you can change it to true, to validate deeper layers of object:
+
+```jsx
+"react/boolean-prop-naming": ["error", { "validateNested": true }]
+```
diff --git a/lib/rules/boolean-prop-naming.js b/lib/rules/boolean-prop-naming.js
@@ -41,6 +41,10 @@ module.exports = {
         message: {
           minLength: 1,
           type: 'string'
+        },
+        validateNested: {
+          default: false,
+          type: 'boolean'
         }
       },
       type: 'object'
@@ -104,6 +108,64 @@ module.exports = {
       return node.key.name;
     }
 
+    /**
+     * Checks if prop is declared in flow way
+     * @param {Object} prop Property object, single prop type declaration
+     * @returns {Boolean}
+     */
+    function flowCheck(prop) {
+      return (
+        prop.type === 'ObjectTypeProperty' &&
+        prop.value.type === 'BooleanTypeAnnotation' &&
+        rule.test(getPropName(prop)) === false
+      );
+    }
+
+    /**
+     * Checks if prop is declared in regular way
+     * @param {Object} prop Property object, single prop type declaration
+     * @returns {Boolean}
+     */
+    function regularCheck(prop) {
+      const propKey = getPropKey(prop);
+      return (
+        propKey &&
+        propTypeNames.indexOf(propKey) >= 0 &&
+        rule.test(getPropName(prop)) === false
+      );
+    }
+
+    /**
+     * Checks if prop is nested
+     * @param {Object} prop Property object, single prop type declaration
+     * @returns {Boolean}
+     */
+    function nestedPropTypes(prop) {
+      return (
+        prop.type === 'Property' &&
+        prop.value.type === 'CallExpression'
+      );
+    }
+
+    /**
+     * Runs recursive check on all proptypes
+     * @param {Array} proptypes A list of Property object (for each proptype defined)
+     * @param {Function} addInvalidProp callback to run for each error
+     */
+    function runCheck(proptypes, addInvalidProp) {
+      proptypes = proptypes || [];
+
+      proptypes.forEach(prop => {
+        if (config.validateNested && nestedPropTypes(prop)) {
+          runCheck(prop.value.arguments[0].properties, addInvalidProp);
+          return;
+        }
+        if (flowCheck(prop) || regularCheck(prop)) {
+          addInvalidProp(prop);
+        }
+      });
+    }
+
     /**
      * Checks and mark props with invalid naming
      * @param {Object} node The component node we're testing
@@ -113,22 +175,8 @@ module.exports = {
       const component = components.get(node) || node;
       const invalidProps = component.invalidProps || [];
 
-      (proptypes || []).forEach(prop => {
-        const propKey = getPropKey(prop);
-        const flowCheck = (
-          prop.type === 'ObjectTypeProperty' &&
-          prop.value.type === 'BooleanTypeAnnotation' &&
-          rule.test(getPropName(prop)) === false
-        );
-        const regularCheck = (
-          propKey &&
-          propTypeNames.indexOf(propKey) >= 0 &&
-          rule.test(getPropName(prop)) === false
-        );
-
-        if (flowCheck || regularCheck) {
-          invalidProps.push(prop);
-        }
+      runCheck(proptypes, prop => {
+        invalidProps.push(prop);
       });
 
       components.set(node, {

diff --git a/tests/lib/rules/boolean-prop-naming.js b/tests/lib/rules/boolean-prop-naming.js
@@ -373,6 +373,46 @@ ruleTester.run('boolean-prop-naming', rule, {
       rule: '^is[A-Z]([A-Za-z0-9]?)+'
     }],
     parser: 'babel-eslint'
+  }, {
+    code: `
+      class Hello extends React.Component {
+        render() {
+          return (
+            <div />
+          );
+        }
+      }
+
+      Hello.propTypes = {
+        isSomething: PropTypes.bool.isRequired,
+        nested: PropTypes.shape({
+          isWorking: PropTypes.bool
+        })
+      };
+    `
+  }, {
+    code: `
+      class Hello extends React.Component {
+        render() {
+          return (
+            <div />
+          );
+        }
+      }
+
+      Hello.propTypes = {
+        isSomething: PropTypes.bool.isRequired,
+        nested: PropTypes.shape({
+          nested: PropTypes.shape({
+            isWorking: PropTypes.bool
+          })
+        })
+      };
+    `,
+    options: [{
+      rule: '^is[A-Z]([A-Za-z0-9]?)+',
+      validateNested: true
+    }]
   }],
 
   invalid: [{
@@ -807,5 +847,55 @@ ruleTester.run('boolean-prop-naming', rule, {
     errors: [{
       message: 'Prop name (something) doesn\'t match rule (^is[A-Z]([A-Za-z0-9]?)+)'
     }]
+  }, {
+    code: `
+      class Hello extends React.Component {
+        render() {
+          return (
+            <div />
+          );
+        }
+      }
+
+      Hello.propTypes = {
+        isSomething: PropTypes.bool.isRequired,
+        nested: PropTypes.shape({
+          failingItIs: PropTypes.bool
+        })
+      };
+    `,
+    options: [{
+      rule: '^is[A-Z]([A-Za-z0-9]?)+',
+      validateNested: true
+    }],
+    errors: [{
+      message: 'Prop name (failingItIs) doesn\'t match rule (^is[A-Z]([A-Za-z0-9]?)+)'
+    }]
+  }, {
+    code: `
+      class Hello extends React.Component {
+        render() {
+          return (
+            <div />
+          );
+        }
+      }
+
+      Hello.propTypes = {
+        isSomething: PropTypes.bool.isRequired,
+        nested: PropTypes.shape({
+          nested: PropTypes.shape({
+            failingItIs: PropTypes.bool
+          })
+        })
+      };
+    `,
+    options: [{
+      rule: '^is[A-Z]([A-Za-z0-9]?)+',
+      validateNested: true
+    }],
+    errors: [{
+      message: 'Prop name (failingItIs) doesn\'t match rule (^is[A-Z]([A-Za-z0-9]?)+)'
+    }]
   }]
 });