add cases to prop-value-shape lint rule

Author: lidord-wix

eslint-rules/lib/rules/prop-value-shape-deprecation.js

@@ -1,38 +1,36 @@
 const _ = require('lodash');
+const utils = require('../utils');
 
 const MAP_SCHEMA = {
   type: 'object',
   properties: {
-    component: {
-      type: 'string'
+    components: {
+      type: 'array',
+      items: {
+        type: 'string'
+      }
     },
-    props: {
+    propNames: {
+      type: 'array',
+      items: {
+        type: 'string'
+      }
+    },
+    shape: {
       type: 'array',
       items: {
         type: 'object',
-        required: ['prop', 'value'],
+        required: ['prop', 'message', 'fix'],
         properties: {
           prop: {
             type: 'string'
           },
-          value: {
-            type: 'array',
-            items: {
-              type: 'object',
-              required: ['prop', 'message', 'fix'],
-              properties: {
-                prop: {
-                  type: 'string'
-                },
-                message: {
-                  type: 'string'
-                },
-                fix: {
-                  type: 'object',
-                  additionalProperties: true
-                }
-              }
-            }
+          message: {
+            type: 'string'
+          },
+          fix: {
+            type: 'object',
+            additionalProperties: true
           }
         }
       }
@@ -59,39 +57,80 @@ module.exports = {
       try {
         const {deprecations} = _.get(context, 'options[0]');
         const nodeName = _.get(node, 'name.name');
-        const deprecation = nodeName && deprecations && _.find(deprecations, ['component', nodeName]);
-        if (deprecation.component && nodeName === deprecation.component) {
-          _.forEach(node.attributes, attribute => {
-            const attributeName = _.get(attribute, 'name.name');
-            const deprecationProps = _.get(deprecation, 'props');
-            const deprecationProp =
-              attributeName && deprecationProps && _.find(deprecationProps, ['prop', attributeName]);
-            const deprecationPropName = _.get(deprecationProp, 'prop');
-            if (deprecationPropName && attributeName === deprecationPropName) {
-              const attributeProperties = _.get(attribute, 'value.expression.properties');
-              for (let i = 0; i <= attributeProperties.length; i++) {
-                const propertyName = _.get(attributeProperties[i], 'key.name');
-                const origin =
-                  deprecationProp.value && propertyName && _.find(deprecationProp.value, ['prop', propertyName]);
-                if (origin.prop && propertyName === origin.prop) {
-                  const destination = _.get(origin, 'fix.propName');
-                  const message = `The shape of '${deprecationPropName}' prop of '${deprecation.component}' doesn't contain '${origin.prop}' anymore. Please use '${destination}' instead (fix is available).`;
-                  context.report({
-                    node,
-                    message,
-                    fix(fixer) {
-                      if (destination && attributeProperties[i].key) {
-                        return fixer.replaceText(attributeProperties[i].key, destination);
-                      }
+        _.forEach(deprecations, deprecation => {
+          if (_.includes(deprecation.components, nodeName)) {
+            _.forEach(node.attributes, attribute => {
+              const attributeName = _.get(attribute, 'name.name');
+              if (attribute.type === 'JSXSpreadAttribute') {
+                const spreadSource = utils.findValueNodeOfIdentifier(attribute.argument.name, context.getScope());
+                const spreadSourceName = _.get(spreadSource, 'properties[0].key.name');
+                checkAttributeProperties(
+                  spreadSource.properties[0].value.properties,
+                  spreadSourceName,
+                  deprecation,
+                  nodeName,
+                  node,
+                  context
+                );
+              } else if (_.includes(deprecation.propNames, attributeName)) {
+                const attributeType = _.get(attribute, 'value.expression.type');
+                if (attributeType === 'Identifier') {
+                  const passedProp = utils.findValueNodeOfIdentifier(
+                    attribute.value.expression.name,
+                    context.getScope()
+                  );
+                  if (passedProp && passedProp.properties) {
+                    checkAttributeProperties(
+                      passedProp.properties,
+                      attributeName,
+                      deprecation,
+                      nodeName,
+                      node,
+                      context
+                    );
+                  }
+                }
+                const attributeProps = _.get(attribute, 'value.expression.properties');
+                for (let index = 0; index < attributeProps.length; index++) {
+                  const spreadElementType = _.get(attribute, `value.expression.properties[${index}].type`);
+                  if (attributeType === 'ObjectExpression' && spreadElementType === 'ExperimentalSpreadProperty') {
+                    const spreadSource = utils.findValueNodeOfIdentifier(
+                      attribute.value.expression.properties[index].argument.name,
+                      context.getScope()
+                    );
+                    if (spreadSource && spreadSource.properties) {
+                      checkAttributeProperties(spreadSource.properties, attributeName, deprecation, nodeName, node, context);
                     }
-                  });
+                  }
                 }
+                const attributeProperties = _.get(attribute, 'value.expression.properties');
+                checkAttributeProperties(attributeProperties, attributeName, deprecation, nodeName, node, context);
+              }
+            });
+          }
+        });
+      } catch (err) {
+        console.log('Found error in: ', context.getFilename());
+      }
+    }
+
+    function checkAttributeProperties(attributeProperties, attributeName, deprecation, nodeName, node, context) {
+      for (let i = 0; i <= attributeProperties.length; i++) {
+        const propertyName = _.get(attributeProperties[i], 'key.name');
+        const origin = propertyName && _.find(deprecation.shape, ['prop', propertyName]);
+        if (origin && origin.prop && propertyName === origin.prop) {
+          const destination = _.get(origin, 'fix.propName');
+          const message = `The shape of '${attributeName}' prop of '${nodeName}' doesn't contain '${origin.prop}' anymore. Please use '${destination}' instead (fix is available).`;
+          context.report({
+            node,
+            message,
+            fix(fixer) {
+              if (destination && attributeProperties[i].key) {
+                return fixer.replaceText(attributeProperties[i].key, destination);
               }
             }
           });
         }
-      } catch (err) {
-        console.log('Found error in: ', context.getFilename());
       }
     }
 

eslint-rules/tests/lib/rules/prop-value-shape-deprecation.js

@@ -10,6 +10,63 @@ RuleTester.setDefaultConfig({
 const ruleTester = new RuleTester();
 
 const ruleOptions = [{deprecations: deprecationsJson}];
+const PassedPropExampleCode = `
+  const myProps = {
+    goodProp: goodValue,
+    imageSource: {uri: some_uri}
+  };
+
+  <Label avatar={myProps}/>
+`;
+const PassedPropExampleOutput = `
+  const myProps = {
+    goodProp: goodValue,
+    source: {uri: some_uri}
+  };
+
+  <Label avatar={myProps}/>
+`;
+
+const firstLevelSpreadCode = `
+const myProps = {
+  avatarProps: {
+    goodProp: goodValue,
+    imageSource: {uri: some_uri}
+  }
+};
+
+<Label goodProp={'goodValue'} {...myProps}/>
+`;
+
+const firstLevelSpreadOutput = `
+const myProps = {
+  avatarProps: {
+    goodProp: goodValue,
+    source: {uri: some_uri}
+  }
+};
+
+<Label goodProp={'goodValue'} {...myProps}/>
+`;
+
+const secondLevelSpreadCode = `
+const myProps = {
+  goodProp: goodValue,
+  imageSource: {uri: some_uri}
+};
+
+<Label avatar={{goodProp: goodValue, ...myProps}}/>
+`;
+
+const secondLevelSpreadOutput = `
+const myProps = {
+  goodProp: goodValue,
+  source: {uri: some_uri}
+};
+
+<Label avatar={{goodProp: goodValue, ...myProps}}/>
+`;
+
 
 ruleTester.run('prop-value-shape-deprecation', rule, {
   valid: [
@@ -21,9 +78,39 @@ ruleTester.run('prop-value-shape-deprecation', rule, {
   invalid: [
     {
       options: ruleOptions,
-      code: '<ListItem avatar={{imageSource: {uri: some_uri}}}/>',
+      code: '<ListItem avatar={{imageSource: {uri: some_uri}, someProp: someValue}}/>',
       errors: [{message: `The shape of 'avatar' prop of 'ListItem' doesn't contain 'imageSource' anymore. Please use 'source' instead (fix is available).`}],
-      output: '<ListItem avatar={{source: {uri: some_uri}}}/>'
+      output: '<ListItem avatar={{source: {uri: some_uri}, someProp: someValue}}/>'
+    },
+    {
+      options: ruleOptions,
+      code: '<ListItem avatar={{someProp: someValue, imageSource: {uri: some_uri}}}/>',
+      errors: [{message: `The shape of 'avatar' prop of 'ListItem' doesn't contain 'imageSource' anymore. Please use 'source' instead (fix is available).`}],
+      output: '<ListItem avatar={{someProp: someValue, source: {uri: some_uri}}}/>'
+    },
+    {
+      options: ruleOptions,
+      code: '<ListItem someProp={someValue} avatar={{imageSource: {uri: some_uri}}}/>',
+      errors: [{message: `The shape of 'avatar' prop of 'ListItem' doesn't contain 'imageSource' anymore. Please use 'source' instead (fix is available).`}],
+      output: '<ListItem someProp={someValue} avatar={{source: {uri: some_uri}}}/>'
+    },
+    {
+      options: ruleOptions,
+      code: PassedPropExampleCode,
+      errors: [{message: `The shape of 'avatar' prop of 'Label' doesn't contain 'imageSource' anymore. Please use 'source' instead (fix is available).`}],
+      output: PassedPropExampleOutput
+    },
+    {
+      options: ruleOptions,
+      code: firstLevelSpreadCode,
+      errors: [{message: `The shape of 'avatarProps' prop of 'Label' doesn't contain 'imageSource' anymore. Please use 'source' instead (fix is available).`}],
+      output: firstLevelSpreadOutput
+    },
+    {
+      options: ruleOptions,
+      code: secondLevelSpreadCode,
+      errors: [{message: `The shape of 'avatar' prop of 'Label' doesn't contain 'imageSource' anymore. Please use 'source' instead (fix is available).`}],
+      output: secondLevelSpreadOutput
     }
   ]
 });

eslint-rules/tests/prop-value-shape-deprecation.json

@@ -1,18 +1,14 @@
 [
   {
-    "component": "ListItem",
-    "props": [
+    "components": ["ListItem", "Label"],
+    "propNames": ["avatar", "avatarProps"],
+    "shape": [
       {
-        "prop": "avatar",
-        "value": [
-          {
-            "prop": "imageSource",
-            "message": "Please use the 'source' prop instead (fix is available).",
-            "fix": {
-                "propName": "source"
-            }
-          }
-        ]
+        "prop": "imageSource",
+        "message": "Please use the 'source' prop instead (fix is available).",
+        "fix": {
+          "propName": "source"
+        }
       }
     ]
   }