Issue#11510: added verification check for misspelled propTypes (facebook#11524)

* added verification check for misspelled propTypes

* added flag to check if misspelled warning was shown to developer before

* added the condition to else if and improved the warning message

* moved  variable under dev section & initialized it to false

* added test to confirm the missmatch prop type warning in both  and  tests files

* removed eslint disable and split error into 2 lines

* changed expectDev to expect in tests

* added __DEV__ condition before both tests

Author: Zubair Ahmed

packages/react/src/ReactElementValidator.js

@@ -26,6 +26,8 @@ import ReactDebugCurrentFrame from './ReactDebugCurrentFrame';
 if (__DEV__) {
   var currentlyValidatingElement = null;
 
+  var propTypesMisspellWarningShown = false;
+
   var getDisplayName = function(element): string {
     if (element == null) {
       return '#empty';
@@ -212,11 +214,20 @@ function validatePropTypes(element) {
   }
   var name = componentClass.displayName || componentClass.name;
   var propTypes = componentClass.propTypes;
-
   if (propTypes) {
     currentlyValidatingElement = element;
     checkPropTypes(propTypes, element.props, 'prop', name, getStackAddendum);
     currentlyValidatingElement = null;
+  } else if (
+    componentClass.PropTypes !== undefined &&
+    !propTypesMisspellWarningShown
+  ) {
+    propTypesMisspellWarningShown = true;
+    warning(
+      false,
+      'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',
+      name || 'Unknown',
+    );
   }
   if (typeof componentClass.getDefaultProps === 'function') {
     warning(

packages/react/src/__tests__/ReactElementValidator-test.js

@@ -448,6 +448,29 @@ describe('ReactElementValidator', () => {
     }
   });
 
+  it('should warn if component declares PropTypes instead of propTypes', () => {
+    spyOn(console, 'error');
+    class MisspelledPropTypesComponent extends React.Component {
+      static PropTypes = {
+        prop: PropTypes.string,
+      };
+      render() {
+        return React.createElement('span', null, this.props.prop);
+      }
+    }
+
+    ReactTestUtils.renderIntoDocument(
+      React.createElement(MisspelledPropTypesComponent, {prop: 'Hi'}),
+    );
+    if (__DEV__) {
+      expect(console.error.calls.count()).toBe(1);
+      expect(console.error.calls.argsFor(0)[0]).toBe(
+        'Warning: Component MisspelledPropTypesComponent declared `PropTypes` ' +
+          'instead of `propTypes`. Did you misspell the property assignment?',
+      );
+    }
+  });
+
   it('should warn when accessing .type on an element factory', () => {
     spyOnDev(console, 'warn');
     function TestComponent() {

packages/react/src/__tests__/ReactJSXElementValidator-test.js

@@ -402,4 +402,26 @@ describe('ReactJSXElementValidator', () => {
       );
     }
   });
+
+  it('should warn if component declares PropTypes instead of propTypes', () => {
+    spyOn(console, 'error');
+    class MisspelledPropTypesComponent extends React.Component {
+      render() {
+        return <span>{this.props.prop}</span>;
+      }
+    }
+    MisspelledPropTypesComponent.PropTypes = {
+      prop: PropTypes.string,
+    };
+    ReactTestUtils.renderIntoDocument(
+      <MisspelledPropTypesComponent prop="hi" />,
+    );
+    if (__DEV__) {
+      expect(console.error.calls.count()).toBe(1);
+      expect(console.error.calls.argsFor(0)[0]).toBe(
+        'Warning: Component MisspelledPropTypesComponent declared `PropTypes` ' +
+          'instead of `propTypes`. Did you misspell the property assignment?',
+      );
+    }
+  });
 });