Update prop-types rule to check props usage (fixes #4)

Author: yannickcr

docs/rules/prop-types.md

@@ -1,4 +1,4 @@
-# Prevent missing propTypes in a React component definition (prop-types)
+# Prevent missing props validation in a React component definition (prop-types)
 
 PropTypes improve the reusability of your component by validating the received data.
 
@@ -14,11 +14,26 @@ var Hello = React.createClass({
     return <div>Hello {this.props.name}</div>;
   }
 });
+
+var Hello = React.createClass({
+  propTypes: {
+    fistname: React.PropTypes.string.isRequired
+  },
+  render: function() {
+    return <div>Hello {this.props.fistname} {this.props.lastname}</div>; // lastname type is not defined in propTypes
+  }
+});
 ```
 
 The following patterns are not considered warnings:
 
 ```js
+var Hello = React.createClass({
+  render: function() {
+    return <div>Hello World</div>;
+  }
+});
+
 var Hello = React.createClass({
   propTypes: {
     name: React.PropTypes.string.isRequired

lib/rules/prop-types.js

@@ -1,5 +1,5 @@
 /**
- * @fileoverview Prevent missing propTypes in a React component definition
+ * @fileoverview Prevent missing props validation in a React component definition
  * @author Yannick Croissant
  */
 'use strict';
@@ -10,7 +10,8 @@
 
 module.exports = function(context) {
 
-  var hasPropTypes = false;
+  var declaredPropTypes = [];
+  var usedPropTypes = [];
 
   function isComponentDefinition(node) {
     return (
@@ -29,6 +30,13 @@ module.exports = function(context) {
 
   return {
 
+    'MemberExpression': function(node) {
+      if (node.object.type !== 'ThisExpression' || node.property.name !== 'props') {
+        return;
+      }
+      usedPropTypes.push(node.parent.property.name);
+    },
+
     'ObjectExpression': function(node) {
 
       if (!isComponentDefinition(node.parent)) {
@@ -37,8 +45,11 @@ module.exports = function(context) {
 
       node.properties.forEach(function(property) {
         var keyName = property.key.name || property.key.value;
-        if (keyName === 'propTypes') {
-          hasPropTypes = true;
+        if (keyName !== 'propTypes') {
+          return;
+        }
+        for (var i = 0, j = property.value.properties.length; i < j; i++) {
+          declaredPropTypes.push(property.value.properties[i].key.name);
         }
       });
     },
@@ -49,11 +60,14 @@ module.exports = function(context) {
         return;
       }
 
-      if (!hasPropTypes) {
-        context.report(node, 'Component definition is missing props validation');
+      for (var i = 0, j = usedPropTypes.length; i < j; i++) {
+        if (declaredPropTypes.indexOf(usedPropTypes[i]) === -1) {
+          context.report(node, '\'' + usedPropTypes[i] + '\' is missing in props validation');
+        }
       }
 
-      hasPropTypes = false;
+      declaredPropTypes.length = 0;
+      usedPropTypes.length = 0;
     }
   };
 

tests/lib/rules/prop-types.js

@@ -1,5 +1,5 @@
 /**
- * @fileoverview Prevent missing propTypes in a React component definition
+ * @fileoverview Prevent missing props validation in a React component definition
  * @author Yannick Croissant
  */
 'use strict';
@@ -32,6 +32,29 @@ eslintTester.addRuleTest('lib/rules/prop-types', {
             ecmaFeatures: {
               jsx: true
             }
+        }, {
+            code: '\
+              var Hello = React.createClass({\
+                propTypes: {\
+                  name: React.PropTypes.object.isRequired\
+                },\
+                render: function() {\
+                  return <div>Hello {this.props.name.firstname}</div>;\
+                }\
+              });',
+            ecmaFeatures: {
+              jsx: true
+            }
+        }, {
+            code: '\
+              var Hello = React.createClass({\
+                render: function() {\
+                  return <div>Hello World</div>;\
+                }\
+              });',
+            ecmaFeatures: {
+              jsx: true
+            }
         }
     ],
 
@@ -47,7 +70,30 @@ eslintTester.addRuleTest('lib/rules/prop-types', {
               jsx: true
             },
             errors: [{
-                message: 'Component definition is missing props validation'
+                message: '\'name\' is missing in props validation'
+            }]
+        }, {
+            code: '\
+              var Hello = React.createClass({\
+                propTypes: {\
+                  name: React.PropTypes.string.isRequired\
+                },\
+                render: function() {\
+                  return <div>Hello {this.props.name} and {this.props.propWithoutTypeDefinition}</div>;\
+                }\
+              });\
+              var Hello2 = React.createClass({\
+                render: function() {\
+                  return <div>Hello {this.props.name}</div>;\
+                }\
+              });',
+            ecmaFeatures: {
+              jsx: true
+            },
+            errors: [{
+                message: '\'propWithoutTypeDefinition\' is missing in props validation'
+            }, {
+                message: '\'name\' is missing in props validation'
             }]
         }
     ]