add check for input type button

department-of-veterans-affairs · Nov 1, 2023 · e7685ce · e7685ce
1 parent 5f1143c
commit e7685ce
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/packages/eslint-plugin/lib/rules/prefer-button-component.js b/packages/eslint-plugin/lib/rules/prefer-button-component.js
@@ -1,6 +1,6 @@
 const jsxAstUtils = require('jsx-ast-utils');
 
-const { elementType } = jsxAstUtils;
+const { elementType, getProp, getLiteralPropValue } = jsxAstUtils;
 
 const MESSAGE =
   'The <va-button> Web Component should be used to instead of the button HTML element.';
@@ -14,13 +14,18 @@ module.exports = {
   create(context) {
     return {
       JSXElement(node) {
-        // Exit early if we aren't on a button
-        if (elementType(node.openingElement) !== 'button') return;
+        const anchorNode = node.openingElement;
+        const typeProp = getProp(anchorNode.attributes, 'type');
 
-        context.report({
-          node,
-          message:  MESSAGE,
-        })
+        // Only display if we are on a button or input with type button
+        if (elementType(anchorNode) === 'button' || 
+          (elementType(anchorNode) === 'input' && getLiteralPropValue(typeProp) === 'button')){
+
+          context.report({
+            node,
+            message:  MESSAGE,
+          })
+        }
       },
     };
   },

diff --git a/packages/eslint-plugin/tests/lib/rules/prefer-button-component.js b/packages/eslint-plugin/tests/lib/rules/prefer-button-component.js
@@ -90,5 +90,31 @@ ruleTester.run('prefer-button-component', rule, {
         },
       ],
     },
+    {
+      code: `
+        const button = () => (
+          <input type="button">Click me</input>
+        )
+      `,
+      errors: [
+        {
+          message:
+            'The <va-button> Web Component should be used to instead of the button HTML element.'
+        },
+      ],
+    },
+    {
+      code: `
+        const button = () => (
+          <input type="button" value="Click me" />
+        )
+      `,
+      errors: [
+        {
+          message:
+            'The <va-button> Web Component should be used to instead of the button HTML element.'
+        },
+      ],
+    },
   ],
 });