[Fix] button-has-type: improve error message when an identifier is used as the value

Fixes #1874.

Author: ljharb

lib/rules/button-has-type.js

@@ -71,16 +71,16 @@ module.exports = {
       });
     }
 
-    function checkValue(node, value) {
+    function checkValue(node, value, quote = x => `"${x}"`) {
       if (!(value in configuration)) {
         context.report({
           node: node,
-          message: `"${value}" is an invalid value for button type attribute`
+          message: `${quote(value)} is an invalid value for button type attribute`
         });
       } else if (!configuration[value]) {
         context.report({
           node: node,
-          message: `"${value}" is a forbidden value for button type attribute`
+          message: `${quote(value)} is a forbidden value for button type attribute`
         });
       }
     }
@@ -98,7 +98,12 @@ module.exports = {
           return;
         }
 
-        checkValue(node, getLiteralPropValue(typeProp));
+        const propValue = getLiteralPropValue(typeProp);
+        if (!propValue && typeProp.value && typeProp.value.expression) {
+          checkValue(node, typeProp.value.expression.name, x => `\`${x}\``);
+        } else {
+          checkValue(node, propValue);
+        }
       },
       CallExpression: function(node) {
         if (!isCreateElement(node, context)) {

tests/lib/rules/button-has-type.js

@@ -69,6 +69,12 @@ ruleTester.run('button-has-type', rule, {
         message: '"foo" is an invalid value for button type attribute'
       }]
     },
+    {
+      code: '<button type={foo}/>',
+      errors: [{
+        message: '`foo` is an invalid value for button type attribute'
+      }]
+    },
     {
       code: '<button type="reset"/>',
       options: [{reset: false}],