Fix name calculation for classes in functions (fixes #264)

jsx-eslint · Oct 21, 2015 · 9f4b4e6 · 9f4b4e6
1 parent b84ec2b
commit 9f4b4e6
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 3 deletions.
diff --git a/lib/rules/prop-types.js b/lib/rules/prop-types.js
@@ -575,7 +575,7 @@ module.exports = function(context) {
           markPropTypesAsUsed(node);
           break;
         case 'declaration':
-          var component = componentList.getByName(node.object.name);
+          var component = componentList.getByName(context.getSource(node.object));
           if (!component) {
             return;
           }

diff --git a/lib/util/component.js b/lib/util/component.js
@@ -74,8 +74,8 @@ function isStatelessFunctionComponent(context, node) {
 function getIdentifiers(node) {
   var name = [];
   var loopNode = node;
-  var namePart = [];
-  while (loopNode) {
+  var namePart;
+  while (loopNode && (!name.length || loopNode.type !== 'FunctionDeclaration')) {
     namePart = (loopNode.id && loopNode.id.name) || (loopNode.key && loopNode.key.name);
     if (namePart) {
       name.unshift(namePart);

diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js
@@ -818,6 +818,34 @@ ruleTester.run('prop-types', rule, {
         '};'
       ].join('\n'),
       parser: 'babel-eslint'
+    }, {
+      code: [
+        'function HelloComponent() {',
+        '  class Hello extends React.Component {',
+        '    render() {',
+        '      return <div>Hello {this.props.name}</div>;',
+        '    }',
+        '  }',
+        '  Hello.propTypes = { name: React.PropTypes.string };',
+        '  return Hello;',
+        '}',
+        'module.exports = HelloComponent();'
+      ].join('\n'),
+      parser: 'babel-eslint'
+    }, {
+      code: [
+        'function HelloComponent() {',
+        '  var Hello = React.createClass({',
+        '    propTypes: { name: React.PropTypes.string },',
+        '    render: function() {',
+        '      return <div>Hello {this.props.name}</div>;',
+        '    }',
+        '  });',
+        '  return Hello;',
+        '}',
+        'module.exports = HelloComponent();'
+      ].join('\n'),
+      parser: 'babel-eslint'
     }
   ],
 
@@ -1326,6 +1354,38 @@ ruleTester.run('prop-types', rule, {
         {message: '\'source\' is missing in props validation for Hello'},
         {message: '\'source.uri\' is missing in props validation for Hello'}
       ]
+    }, {
+      code: [
+        'function HelloComponent() {',
+        '  class Hello extends React.Component {',
+        '    render() {',
+        '      return <div>Hello {this.props.name}</div>;',
+        '    }',
+        '  }',
+        '  return Hello;',
+        '}',
+        'module.exports = HelloComponent();'
+      ].join('\n'),
+      parser: 'babel-eslint',
+      errors: [
+        {message: '\'name\' is missing in props validation for Hello'}
+      ]
+    }, {
+      code: [
+        'function HelloComponent() {',
+        '  var Hello = React.createClass({',
+        '    render: function() {',
+        '      return <div>Hello {this.props.name}</div>;',
+        '    }',
+        '  });',
+        '  return Hello;',
+        '}',
+        'module.exports = HelloComponent();'
+      ].join('\n'),
+      parser: 'babel-eslint',
+      errors: [
+        {message: '\'name\' is missing in props validation for Hello'}
+      ]
     }
   ]
 });