From a3c6d7e38ef04750b22ef068b6ed7d0400cd6a44 Mon Sep 17 00:00:00 2001
From: Alex Zherdev <alex.zherdev@gmail.com>
Date: Tue, 12 Jun 2018 19:10:27 -0700
Subject: [PATCH] [Fix] `sort-prop-types`: Support propType shape in a variable
 for sortShapeProp

Resolves #1749
---
 lib/rules/sort-prop-types.js       |  11 ++-
 tests/lib/rules/sort-prop-types.js | 132 +++++++++++++++++++++++++++++
 2 files changed, 142 insertions(+), 1 deletion(-)

diff --git a/lib/rules/sort-prop-types.js b/lib/rules/sort-prop-types.js
index 84fd8adc13..8589d317fc 100644
--- a/lib/rules/sort-prop-types.js
+++ b/lib/rules/sort-prop-types.js
@@ -270,7 +270,16 @@ module.exports = {
         if (!sortShapeProp || !isShapeProp(node) || !(node.arguments && node.arguments[0])) {
           return;
         }
-        checkSorted(node.arguments[0].properties);
+
+        const firstArg = node.arguments[0];
+        if (firstArg.properties) {
+          checkSorted(firstArg.properties);
+        } else if (firstArg.type === 'Identifier') {
+          const variable = variableUtil.findVariableByName(context, firstArg.name);
+          if (variable && variable.properties) {
+            checkSorted(variable.properties);
+          }
+        }
       },
 
       ClassProperty(node) {
diff --git a/tests/lib/rules/sort-prop-types.js b/tests/lib/rules/sort-prop-types.js
index 7632f86800..769f14802a 100644
--- a/tests/lib/rules/sort-prop-types.js
+++ b/tests/lib/rules/sort-prop-types.js
@@ -428,6 +428,45 @@ ruleTester.run('sort-prop-types', rule, {
     options: [{
       ignoreCase: true
     }]
+  }, {
+    code: `
+      const shape = {
+        a: PropTypes.any,
+        b: PropTypes.bool,
+        c: PropTypes.any,
+      };
+      class Component extends React.Component {
+        static propTypes = {
+          x: PropTypes.shape(shape),
+        };
+        render() {
+          return <div />;
+        }
+      }
+    `,
+    options: [{
+      sortShapeProp: true
+    }],
+    parser: 'babel-eslint'
+  }, {
+    code: `
+      const shape = {
+        a: PropTypes.any,
+        b: PropTypes.bool,
+        c: PropTypes.any,
+      };
+      class Component extends React.Component {
+        render() {
+          return <div />;
+        }
+      }
+      Component.propTypes = {
+        x: PropTypes.shape(shape)
+      };
+    `,
+    options: [{
+      sortShapeProp: true
+    }]
   }],
 
   invalid: [{
@@ -1615,5 +1654,98 @@ ruleTester.run('sort-prop-types', rule, {
         1: PropTypes.any,
       };
     `
+  }, {
+    code: `
+      const shape = {
+        c: PropTypes.any,
+        a: PropTypes.any,
+        b: PropTypes.bool,
+      };
+      class Component extends React.Component {
+        static propTypes = {
+          x: PropTypes.shape(shape),
+        };
+
+        render() {
+          return <div />;
+        }
+      }
+    `,
+    options: [{
+      sortShapeProp: true
+    }],
+    parser: 'babel-eslint',
+    errors: [{
+      message: ERROR_MESSAGE,
+      line: 4,
+      column: 9,
+      type: 'Property'
+    }, {
+      message: ERROR_MESSAGE,
+      line: 5,
+      column: 9,
+      type: 'Property'
+    }],
+    output: `
+      const shape = {
+        a: PropTypes.any,
+        b: PropTypes.bool,
+        c: PropTypes.any,
+      };
+      class Component extends React.Component {
+        static propTypes = {
+          x: PropTypes.shape(shape),
+        };
+
+        render() {
+          return <div />;
+        }
+      }
+    `
+  }, {
+    code: `
+      const shape = {
+        c: PropTypes.any,
+        a: PropTypes.any,
+        b: PropTypes.bool,
+      };
+      class Component extends React.Component {
+        render() {
+          return <div />;
+        }
+      }
+      Component.propTypes = {
+        x: PropTypes.shape(shape)
+      };
+    `,
+    options: [{
+      sortShapeProp: true
+    }],
+    errors: [{
+      message: ERROR_MESSAGE,
+      line: 4,
+      column: 9,
+      type: 'Property'
+    }, {
+      message: ERROR_MESSAGE,
+      line: 5,
+      column: 9,
+      type: 'Property'
+    }],
+    output: `
+      const shape = {
+        a: PropTypes.any,
+        b: PropTypes.bool,
+        c: PropTypes.any,
+      };
+      class Component extends React.Component {
+        render() {
+          return <div />;
+        }
+      }
+      Component.propTypes = {
+        x: PropTypes.shape(shape)
+      };
+    `
   }]
 });