[no-typo] rule enhancement checking for a correct prop type spelling

Author: DianaSuvorova

docs/rules/no-typos.md

@@ -1,13 +1,13 @@
-# Prevents common casing typos (react/no-typos)
+# Prevents common typos (react/no-typos)
 
 Ensure no casing typos were made declaring static class properties and lifecycle methods.
+Checks that declared `propTypes`, `contextTypes` and `childContextTypes` is supported by [react-props](https://github.com/facebook/prop-types)
 
 ## Rule Details
 
-This rule checks whether the declared static class properties and lifecycle methods related to React components
-do not contain any typos.
+This rule checks whether the declared static class properties and lifecycle methods related to React components do not contain any typos.
 
-It currently makes sure that the following class properties have
+It makes sure that the following class properties have
 no casing typos:
 
 * propTypes
@@ -73,6 +73,13 @@ class MyComponent extends React.Component {
 class MyComponent extends React.Component {
   componentdidupdate() {}
 }
+
+class MyComponent extends React.Component {
+  static propTypes = {
+    a: PropTypes.typo
+  }
+}
+
 ```
 
 The following patterns are not considered warnings:
@@ -105,4 +112,10 @@ class MyComponent extends React.Component {
 class MyComponent extends React.Component {
   componentDidUpdate() {}
 }
+
+class MyComponent extends React.Component {
+  static propTypes = {
+    a: PropTypes.bool.isRequired
+  }
+}
 ```

lib/rules/no-typos.js

@@ -21,18 +21,69 @@ const LIFECYCLE_METHODS = [
   'render'
 ];
 
+const PROP_TYPES = Object.keys(require('prop-types'));
+
 module.exports = {
   meta: {
     docs: {
-      description: 'Prevent common casing typos',
+      description: 'Prevent common typos',
       category: 'Stylistic Issues',
       recommended: false
     },
     schema: []
   },
 
   create: Components.detect((context, components, utils) => {
+    function checkValidPropTypeQualfier(node) {
+      if (node.name !== 'isRequired') {
+        context.report({
+          node: node,
+          message: `Typo in prop type chain qualifier: ${node.name}`
+        });
+      }
+    }
+
+    function checkValidPropType(node) {
+      if (node.name && !PROP_TYPES.some(propTypeName => propTypeName === node.name)) {
+        context.report({
+          node: node,
+          message: `Typo in declared prop type: ${node.name}`
+        });
+      }
+    }
+
+    /* eslint-disable no-use-before-define */
+    function checkValidProp(node) {
+      if (node && node.type === 'MemberExpression' && node.object.type === 'MemberExpression') {
+        checkValidPropType(node.object.property);
+        checkValidPropTypeQualfier(node.property);
+      } else if (node && node.type === 'MemberExpression' && node.object.type === 'Identifier') {
+        checkValidPropType(node.property);
+      } else if (node && node.type === 'CallExpression') {
+        const callee = node.callee;
+        if (callee.type === 'MemberExpression' && callee.property.name === 'shape') {
+          checkValidPropObject(node.arguments[0]);
+        } else if (callee.type === 'MemberExpression' && callee.property.name === 'oneOfType') {
+          const args = node.arguments[0];
+          if (args && args.type === 'ArrayExpression') {
+            args.elements.forEach(el => checkValidProp(el));
+          }
+        }
+      }
+    }
+
+    function checkValidPropObject (node) {
+      if (node.type === 'ObjectExpression') {
+        node.properties.forEach(prop => checkValidProp(prop.value));
+      }
+    }
+    /* eslint-enable no-use-before-define */
+
     function reportErrorIfClassPropertyCasingTypo(node, propertyName) {
+      if (propertyName === 'propTypes' || propertyName === 'contextTypes' || propertyName === 'childContextTypes') {
+        const propsNode = node && node.parent && node.parent.type === 'AssignmentExpression' && node.parent.right;
+        checkValidPropObject(propsNode);
+      }
       STATIC_CLASS_PROPERTIES.forEach(CLASS_PROP => {
         if (propertyName && CLASS_PROP.toLowerCase() === propertyName.toLowerCase() && CLASS_PROP !== propertyName) {
           context.report({

package.json

@@ -26,7 +26,8 @@
   "dependencies": {
     "doctrine": "^2.0.0",
     "has": "^1.0.1",
-    "jsx-ast-utils": "^2.0.0"
+    "jsx-ast-utils": "^2.0.0",
+    "prop-types": "^15.5.10"
   },
   "devDependencies": {
     "babel-eslint": "^7.2.3",

tests/lib/rules/no-typos.js

@@ -26,7 +26,6 @@ const ERROR_MESSAGE_LIFECYCLE_METHOD = 'Typo in component lifecycle method decla
 
 const ruleTester = new RuleTester();
 ruleTester.run('no-typos', rule, {
-
   valid: [{
     code: [
       'class First {',
@@ -38,8 +37,7 @@ ruleTester.run('no-typos', rule, {
     ].join('\n'),
     parser: 'babel-eslint',
     parserOptions: parserOptions
-  },
-  {
+  }, {
     code: [
       'class First {}',
       'First.PropTypes = {key: "myValue"};',
@@ -248,6 +246,86 @@ ruleTester.run('no-typos', rule, {
       }
       function a() {}
     `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions
+  }, {
+    code: `class Component extends React.Component {};
+     Component.propTypes = {
+       a: PropTypes.number.isRequired
+     }
+   `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions
+  }, {
+    code: `class Component extends React.Component {};
+     Component.propTypes = {
+       e: PropTypes.shape({
+         ea: PropTypes.string,
+       })
+     }
+   `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions
+  }, {
+    code: `class Component extends React.Component {};
+     Component.propTypes = {
+       a: PropTypes.string,
+       b: PropTypes.string.isRequired,
+       c: PropTypes.shape({
+         d: PropTypes.string,
+         e: PropTypes.number.isRequired,
+       }).isRequired
+     }
+   `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions
+  }, {
+    code: `class Component extends React.Component {};
+    Component.propTypes = {
+       a: PropTypes.oneOfType([
+         PropTypes.string,
+         PropTypes.number
+       ])
+     }
+   `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions
+  }, {
+    code: `class Component extends React.Component {};
+    Component.propTypes = {
+       a: PropTypes.oneOf([
+         'hello',
+         'hi'
+       ])
+     }
+   `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions
+  }, {
+    code: `class Component extends React.Component {};
+     Component.childContextTypes = {
+       a: PropTypes.string,
+       b: PropTypes.string.isRequired,
+       c: PropTypes.shape({
+         d: PropTypes.string,
+         e: PropTypes.number.isRequired,
+       }).isRequired
+     }
+   `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions
+  }, {
+    code: `class Component extends React.Component {};
+     Component.contextTypes = {
+       a: PropTypes.string,
+       b: PropTypes.string.isRequired,
+       c: PropTypes.shape({
+         d: PropTypes.string,
+         e: PropTypes.number.isRequired,
+       }).isRequired
+     }
+   `,
+    parser: 'babel-eslint',
     parserOptions: parserOptions
   }],
 
@@ -552,5 +630,106 @@ ruleTester.run('no-typos', rule, {
       message: ERROR_MESSAGE_LIFECYCLE_METHOD,
       type: 'MethodDefinition'
     }]
+  }, {
+    code: `class Component extends React.Component {};
+     Component.propTypes = {
+        a: PropTypes.Number.isRequired
+     }
+   `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Typo in declared prop type: Number'
+    }]
+  }, {
+    code: `class Component extends React.Component {};
+     Component.propTypes = {
+        a: PropTypes.number.isrequired
+     }
+   `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Typo in prop type chain qualifier: isrequired'
+    }]
+  }, {
+    code: `class Component extends React.Component {};
+     Component.propTypes = {
+        a: PropTypes.Number
+     }
+   `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Typo in declared prop type: Number'
+    }]
+  }, {
+    code: `class Component extends React.Component {};
+    Component.propTypes = {
+       a: PropTypes.shape({
+         b: PropTypes.String,
+         c: PropTypes.number.isRequired,
+       })
+    }
+   `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Typo in declared prop type: String'
+    }]
+  }, {
+    code: `class Component extends React.Component {};
+    Component.propTypes = {
+       a: PropTypes.oneOfType([
+         PropTypes.bools,
+         PropTypes.number,
+       ])
+     }
+   `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Typo in declared prop type: bools'
+    }]
+  }, {
+    code: `class Component extends React.Component {};
+      Component.propTypes = {
+        a: PropTypes.bools,
+        b: PropTypes.Array,
+        c: PropTypes.function,
+        d: PropTypes.objectof,
+      }
+    `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Typo in declared prop type: bools'
+    }, {
+      message: 'Typo in declared prop type: Array'
+    }, {
+      message: 'Typo in declared prop type: function'
+    }, {
+      message: 'Typo in declared prop type: objectof'
+    }]
+  }, {
+    code: `class Component extends React.Component {};
+      Component.childContextTypes = {
+        a: PropTypes.bools,
+        b: PropTypes.Array,
+        c: PropTypes.function,
+        d: PropTypes.objectof,
+      }
+    `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Typo in declared prop type: bools'
+    }, {
+      message: 'Typo in declared prop type: Array'
+    }, {
+      message: 'Typo in declared prop type: function'
+    }, {
+      message: 'Typo in declared prop type: objectof'
+    }]
   }]
 });