Add autofixer

Author: camchenry

src/rules/__tests__/prefer-action-list-item-onselect.test.js

@@ -17,17 +17,34 @@ ruleTester.run('prefer-action-list-item-onselect', rule, {
     {code: `<ActionList.Item onSelect={() => console.log(1)} />`},
     {code: `<ActionList.Item onSelect={() => console.log(1)} onClick={() => console.log(1)} />`},
     {code: `<Other onClick={() => console.log(1)} />`},
+    {code: `<Button onClick={onSelect} />`},
+    {code: `<Button onSelect={onClick} />`},
     {code: `<ActionList.Item onClick={() => console.log(1)} onKeyDown={() => console.log(1)} />`},
     {code: `<ActionList.Item onClick={() => console.log(1)} onKeyUp={() => console.log(1)} />`},
+    // For now, we are not handling spread attributes as this is much less common
+    {code: `<ActionList.Item {...onClick} />`},
   ],
   invalid: [
     {
       code: `<ActionList.Item onClick={() => console.log(1)} />`,
       errors: [{messageId: 'prefer-action-list-item-onselect'}],
+      output: `<ActionList.Item onSelect={() => console.log(1)} />`,
     },
     {
       code: `<ActionList.Item aria-label="Edit item 1" onClick={() => console.log(1)} />`,
       errors: [{messageId: 'prefer-action-list-item-onselect'}],
+      output: `<ActionList.Item aria-label="Edit item 1" onSelect={() => console.log(1)} />`,
+    },
+    {
+      code: `<ActionList.Item aria-label="Edit item 1" onClick={onClick} />`,
+      errors: [{messageId: 'prefer-action-list-item-onselect'}],
+      output: `<ActionList.Item aria-label="Edit item 1" onSelect={onClick} />`,
+    },
+    // This is invalid, but we can fix it anyway
+    {
+      code: `<ActionList.Item aria-label="Edit item 1" onClick />`,
+      errors: [{messageId: 'prefer-action-list-item-onselect'}],
+      output: `<ActionList.Item aria-label="Edit item 1" onSelect />`,
     },
   ],
 })

src/rules/prefer-action-list-item-onselect.js

@@ -21,6 +21,8 @@ module.exports = {
   create(context) {
     return {
       JSXElement(node) {
+        // Only check components that have the name `ActionList.Item`. We don't check if this comes from Primer
+        // because the chance of conflict here is very low
         const isActionListItem =
           node.openingElement.name.type === 'JSXMemberExpression' &&
           node.openingElement.name.object.type === 'JSXIdentifier' &&
@@ -51,6 +53,16 @@ module.exports = {
         context.report({
           node: onClickAttribute,
           messageId: 'prefer-action-list-item-onselect',
+          fix: fixer => {
+            // Replace `onClick` with `onSelect`
+            if (onClickAttribute.type === 'JSXAttribute') {
+              return fixer.replaceTextRange(
+                [onClickAttribute.name.range[0], onClickAttribute.name.range[1]],
+                'onSelect',
+              )
+            }
+            return null
+          },
         })
       },
     }