[Fix] button-has-type: improve message when non-static value is used

refs #1846
jsx-eslint · Apr 16, 2020 · aecff62 · aecff62
1 parent bea3b30
commit aecff62
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/docs/rules/button-has-type.md b/docs/rules/button-has-type.md
@@ -10,6 +10,7 @@ The following patterns are considered errors:
 ```jsx
 var Hello = <button>Hello</button>
 var Hello = <button type="foo">Hello</button>
+var Hello = <button type={foo}>Hello</button>
 
 var Hello = React.createElement('button', {}, 'Hello')
 var Hello = React.createElement('button', {type: 'foo'}, 'Hello')

diff --git a/lib/rules/button-has-type.js b/lib/rules/button-has-type.js
@@ -72,8 +72,8 @@ module.exports = {
       });
     }
 
-    function checkValue(node, value, quoteFn) {
-      const q = quoteFn || (x => `"${x}"`);
+    function checkValue(node, value) {
+      const q = x => `"${x}"`;
       if (!(value in configuration)) {
         context.report({
           node,
@@ -100,12 +100,16 @@ module.exports = {
           return;
         }
 
-        const propValue = getLiteralPropValue(typeProp);
-        if (!propValue && typeProp.value && typeProp.value.expression) {
-          checkValue(node, typeProp.value.expression.name, x => `\`${x}\``);
-        } else {
-          checkValue(node, propValue);
+        if (typeProp.value.type === 'JSXExpressionContainer') {
+          context.report({
+            node: typeProp,
+            message: 'The button type attribute must be specified by a static string'
+          });
+          return;
         }
+
+        const propValue = getLiteralPropValue(typeProp);
+        checkValue(node, propValue);
       },
       CallExpression(node) {
         if (!isCreateElement(node, context)) {

diff --git a/tests/lib/rules/button-has-type.js b/tests/lib/rules/button-has-type.js
@@ -73,7 +73,13 @@ ruleTester.run('button-has-type', rule, {
     {
       code: '<button type={foo}/>',
       errors: [{
-        message: '`foo` is an invalid value for button type attribute'
+        message: 'The button type attribute must be specified by a static string'
+      }]
+    },
+    {
+      code: '<button type={"foo"}/>',
+      errors: [{
+        message: 'The button type attribute must be specified by a static string'
       }]
     },
     {