Refactor value extraction into more readable components.

Author: beefancohen

src/rules/img-uses-alt.js

@@ -43,8 +43,9 @@ module.exports = context => ({
 
     // Check if alt prop is undefined.
     const altValue = getAttributeValue(hasAltProp);
+    const isNullValued = hasAltProp.value === null; // <img alt />
 
-    if (altValue || altValue === '') {
+    if ((altValue && !isNullValued) || altValue === '') {
       return;
     }
 

src/util/getAttributeValue.js

@@ -1,45 +1,6 @@
 'use strict';
 
-import buildTemplateLiteral from './buildTemplateLiteral';
-
-const getValue = value => {
-  if (value.type === 'Literal') {
-    return value.value;
-  } else if (value.type === 'Identifier') {
-    return value.name === "" ? undefined : value.name;
-  } else if (value.type === 'JSXElement') {
-    return undefined; // For now, just so things don't break.
-  }
-
-  const { expression } = value;
-  const type = expression ? expression.type : value.type;
-  const obj = expression || value;
-
-  switch (type) {
-    case 'Literal':
-      return obj.value;
-    case 'TemplateLiteral':
-      return buildTemplateLiteral(obj);
-    case 'Identifier':
-      return obj.name == 'undefined' ? undefined : obj.name;
-    case 'ArrowFunctionExpression':
-    case 'FunctionExpression':
-      return () => void 0;
-    case 'LogicalExpression':
-      const { operator, left, right } = obj;
-      const leftVal = getValue(left);
-      const rightVal = getValue(right);
-
-      return operator == '&&' ? leftVal && rightVal : leftVal || rightVal;
-    case 'MemberExpression':
-      return `${getValue(obj.object)}.${getValue(obj.property)}`;
-    case 'CallExpression':
-      return getValue(obj.callee);
-    default:
-      return undefined;
-  }
-
-};
+import getValue from './values';
 
 /**
  * Returns the value of a given attribute.
@@ -48,11 +9,18 @@ const getValue = value => {
  *
  * This function should return the most *closely* associated
  * value with the intention of the JSX.
+ *
+ * @param attribute - The JSXAttribute collected by AST parser.
  */
 const getAttributeValue = attribute => {
-  if (attribute.value === null) {
-    return null;
-  } else if (attribute.type === 'JSXAttribute') {
+  if (attribute.type === 'JSXAttribute') {
+    if (attribute.value === null) {
+      // Null valued attributes imply truthiness.
+      // For example: <div aria-hidden />
+      // See: https://facebook.github.io/react/docs/jsx-in-depth.html#boolean-attributes
+      return true;
+    }
+
     return getValue(attribute.value);
   }
 

src/util/values/Identifier.js

@@ -0,0 +1,7 @@
+const extract = value => {
+  const { name } = value;
+
+  return name == 'undefined' ? undefined : name;
+};
+
+export default extract;

src/util/values/JSXElement.js

@@ -0,0 +1,3 @@
+const extract = () => undefined;
+
+export default extract;

src/util/values/Literal.js

@@ -0,0 +1,3 @@
+const extract = value => value.value;
+
+export default extract;

src/util/values/expressions/CallExpression.js

@@ -0,0 +1,5 @@
+import getValue from './index';
+
+const extract = value => getValue(value.callee);
+
+export default extract;

src/util/values/expressions/FunctionExpression.js

@@ -0,0 +1,3 @@
+const extract = () => () => void 0;
+
+export default extract;

src/util/values/expressions/LogicalExpression.js

@@ -0,0 +1,11 @@
+import getValue from './index';
+
+const extract = value => {
+  const { operator, left, right } = value;
+  const leftVal = getValue(left);
+  const rightVal = getValue(right);
+
+  return operator == '&&' ? leftVal && rightVal : leftVal || rightVal;
+};
+
+export default extract;

src/util/values/expressions/MemberExpression.js

@@ -0,0 +1,5 @@
+import getValue from './index';
+
+const extract = value => `${getValue(value.object)}.${getValue(value.property)}`;
+
+export default extract;

src/util/values/expressions/TemplateLiteral.js

@@ -0,0 +1,5 @@
+import buildTemplateLiteral from '../../buildTemplateLiteral';
+
+const extract = value => buildTemplateLiteral(value);
+
+export default extract;