Fix x-has-content rules to check for children prop (#92)

beefancohen · web-flow · commit 07ed61973779 · 2016-09-12T11:51:57.000-04:00
* [fix] - check for children prop in x-has-content rules.

* Fix lint.

* Fix tests.
diff --git a/src/rules/anchor-has-content.js b/src/rules/anchor-has-content.js
@@ -7,7 +7,7 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { elementType, hasProp } from 'jsx-ast-utils';
+import { elementType, hasAnyProp } from 'jsx-ast-utils';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 
 const errorMessage =
@@ -40,15 +40,15 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       const typeCheck = anchors.concat(context.options[0]);
       const nodeType = elementType(node);
 
       // Only check anchor elements and custom types.
       if (typeCheck.indexOf(nodeType) === -1) {
         return;
       }
-      const isAccessible = node.parent.children.some(child => {
+      const isAccessible = node.parent.children.some((child) => {
         switch (child.type) {
           case 'Literal':
             return Boolean(child.value);
@@ -65,7 +65,7 @@ module.exports = {
           default:
             return false;
         }
-      }) || hasProp(node.attributes, 'dangerouslySetInnerHTML');
+      }) || hasAnyProp(node.attributes, ['dangerouslySetInnerHTML', 'children']);
 
 
       if (isAccessible) {
diff --git a/src/rules/aria-props.js b/src/rules/aria-props.js
@@ -11,7 +11,7 @@ import { propName } from 'jsx-ast-utils';
 import ariaAttributes from '../util/attributes/ARIA';
 import getSuggestion from '../util/getSuggestion';
 
-const errorMessage = name => {
+const errorMessage = (name) => {
   const dictionary = Object.keys(ariaAttributes).map(aria => aria.toLowerCase());
   const suggestions = getSuggestion(name, dictionary);
   const message = `${name}: This attribute is an invalid ARIA attribute.`;
@@ -33,7 +33,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXAttribute: attribute => {
+    JSXAttribute: (attribute) => {
       const name = propName(attribute);
       const normalizedName = name ? name.toUpperCase() : '';
 
diff --git a/src/rules/aria-proptypes.js b/src/rules/aria-proptypes.js
@@ -60,7 +60,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXAttribute: attribute => {
+    JSXAttribute: (attribute) => {
       const name = propName(attribute);
       const normalizedName = name ? name.toUpperCase() : '';
 
diff --git a/src/rules/aria-role.js b/src/rules/aria-role.js
@@ -22,7 +22,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXAttribute: attribute => {
+    JSXAttribute: (attribute) => {
       const name = propName(attribute);
       const normalizedName = name ? name.toUpperCase() : '';
 
diff --git a/src/rules/aria-unsupported-elements.js b/src/rules/aria-unsupported-elements.js
@@ -26,7 +26,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       const nodeType = elementType(node);
       const nodeAttrs = DOM[nodeType] || {};
       const {
@@ -40,7 +40,7 @@ module.exports = {
 
       const invalidAttributes = Object.keys(ARIA).concat('ROLE');
 
-      node.attributes.forEach(prop => {
+      node.attributes.forEach((prop) => {
         if (prop.type === 'JSXSpreadAttribute') {
           return;
         }
diff --git a/src/rules/click-events-have-key-events.js b/src/rules/click-events-have-key-events.js
@@ -24,7 +24,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       const props = node.attributes;
       if (getProp(props, 'onclick') === undefined) {
         return;
diff --git a/src/rules/heading-has-content.js b/src/rules/heading-has-content.js
@@ -7,7 +7,7 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { elementType, hasProp } from 'jsx-ast-utils';
+import { elementType, hasAnyProp } from 'jsx-ast-utils';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 
 const errorMessage =
@@ -44,7 +44,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       const typeCheck = headings.concat(context.options[0]);
       const nodeType = elementType(node);
 
@@ -53,7 +53,7 @@ module.exports = {
         return;
       }
 
-      const isAccessible = node.parent.children.some(child => {
+      const isAccessible = node.parent.children.some((child) => {
         switch (child.type) {
           case 'Literal':
             return Boolean(child.value);
@@ -70,7 +70,7 @@ module.exports = {
           default:
             return false;
         }
-      }) || hasProp(node.attributes, 'dangerouslySetInnerHTML');
+      }) || hasAnyProp(node.attributes, ['dangerouslySetInnerHTML', 'children']);
 
 
       if (isAccessible) {
diff --git a/src/rules/href-no-hash.js b/src/rules/href-no-hash.js
@@ -34,7 +34,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       const typeCheck = ['a'].concat(context.options[0]);
       const nodeType = elementType(node);
 
diff --git a/src/rules/html-has-lang.js b/src/rules/html-has-lang.js
@@ -21,7 +21,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       const type = elementType(node);
 
       if (type && type !== 'html') {
diff --git a/src/rules/img-has-alt.js b/src/rules/img-has-alt.js
@@ -31,7 +31,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       const typeCheck = ['img'].concat(context.options[0]);
       const nodeType = elementType(node);
 
diff --git a/src/rules/img-redundant-alt.js b/src/rules/img-redundant-alt.js
@@ -42,7 +42,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       let REDUNDANT_WORDS_EXTENDED;
 
       if (context.options[0]) {
diff --git a/src/rules/label-has-for.js b/src/rules/label-has-for.js
@@ -34,7 +34,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       const typeCheck = ['label'].concat(context.options[0]);
       const nodeType = elementType(node);
 
diff --git a/src/rules/lang.js b/src/rules/lang.js
@@ -23,7 +23,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXAttribute: node => {
+    JSXAttribute: (node) => {
       const name = propName(node);
       if (name && name.toUpperCase() !== 'LANG') {
         return;
diff --git a/src/rules/mouse-events-have-key-events.js b/src/rules/mouse-events-have-key-events.js
@@ -24,7 +24,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       const attributes = node.attributes;
 
       // Check onmouseover / onfocus pairing.
diff --git a/src/rules/no-access-key.js b/src/rules/no-access-key.js
@@ -23,7 +23,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       const accessKey = getProp(node.attributes, 'accesskey');
       const accessKeyValue = getPropValue(accessKey);
 
diff --git a/src/rules/no-marquee.js b/src/rules/no-marquee.js
@@ -22,7 +22,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       const isMarquee = elementType(node) === 'marquee';
 
       if (isMarquee) {
diff --git a/src/rules/no-onchange.js b/src/rules/no-onchange.js
@@ -28,7 +28,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       const nodeType = elementType(node);
 
       if (applicableTypes.indexOf(nodeType) === -1) {
diff --git a/src/rules/no-static-element-interactions.js b/src/rules/no-static-element-interactions.js
@@ -24,7 +24,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       const props = node.attributes;
       const type = elementType(node);
 
diff --git a/src/rules/onclick-has-focus.js b/src/rules/onclick-has-focus.js
@@ -26,7 +26,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       const { attributes } = node;
       if (getProp(attributes, 'onClick') === undefined) {
         return;
diff --git a/src/rules/onclick-has-role.js b/src/rules/onclick-has-role.js
@@ -25,7 +25,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       const attributes = node.attributes;
       if (getProp(attributes, 'onclick') === undefined) {
         return;
diff --git a/src/rules/role-has-required-aria-props.js b/src/rules/role-has-required-aria-props.js
@@ -25,7 +25,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXAttribute: attribute => {
+    JSXAttribute: (attribute) => {
       const name = propName(attribute);
       const normalizedName = name ? name.toUpperCase() : '';
 
@@ -46,7 +46,7 @@ module.exports = {
       const validRoles = normalizedValues
         .filter(val => Object.keys(validRoleTypes).indexOf(val) > -1);
 
-      validRoles.forEach(role => {
+      validRoles.forEach((role) => {
         const { requiredProps } = validRoleTypes[role];
 
         if (requiredProps.length > 0) {
diff --git a/src/rules/role-supports-aria-props.js b/src/rules/role-supports-aria-props.js
@@ -32,7 +32,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXOpeningElement: node => {
+    JSXOpeningElement: (node) => {
       // If role is not explicitly defined, then try and get its implicit role.
       const type = elementType(node);
       const role = getProp(node.attributes, 'role');
@@ -51,7 +51,7 @@ module.exports = {
       const invalidAriaPropsForRole = Object.keys(ARIA)
         .filter(attribute => propertySet.indexOf(attribute) === -1);
 
-      node.attributes.forEach(prop => {
+      node.attributes.forEach((prop) => {
         if (prop.type === 'JSXSpreadAttribute') {
           return;
         }
diff --git a/src/rules/scope.js b/src/rules/scope.js
@@ -22,7 +22,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXAttribute: node => {
+    JSXAttribute: (node) => {
       const name = propName(node);
       if (name && name.toUpperCase() !== 'SCOPE') {
         return;
diff --git a/src/rules/tabindex-no-positive.js b/src/rules/tabindex-no-positive.js
@@ -21,7 +21,7 @@ module.exports = {
   },
 
   create: context => ({
-    JSXAttribute: attribute => {
+    JSXAttribute: (attribute) => {
       const name = propName(attribute);
       const normalizedName = name ? name.toUpperCase() : '';
 
diff --git a/src/util/isInteractiveElement.js b/src/util/isInteractiveElement.js
@@ -4,15 +4,15 @@ import DOMElements from './attributes/DOM';
 
 // Map of tagNames to functions that return whether that element is interactive or not.
 const interactiveMap = {
-  a: attributes => {
+  a: (attributes) => {
     const href = getPropValue(getProp(attributes, 'href'));
     const tabIndex = getTabIndex(getProp(attributes, 'tabIndex'));
     return href !== undefined || tabIndex !== undefined;
   },
   // This is same as `a` interactivity function
   area: attributes => interactiveMap.a(attributes),
   button: () => true,
-  input: attributes => {
+  input: (attributes) => {
     const typeAttr = getLiteralPropValue(getProp(attributes, 'type'));
     return typeAttr ? typeAttr.toUpperCase() !== 'HIDDEN' : true;
   },
diff --git a/tests/index.js b/tests/index.js
@@ -9,7 +9,7 @@ const rules = fs.readdirSync(path.resolve(__dirname, '../src/rules/'))
   .map(f => path.basename(f, '.js'));
 
 describe('all rule files should be exported by the plugin', () => {
-  rules.forEach(ruleName => {
+  rules.forEach((ruleName) => {
     it(`should export ${ruleName}`, () => {
       assert.equal(
         plugin.rules[ruleName],
diff --git a/tests/src/rules/anchor-has-content.js b/tests/src/rules/anchor-has-content.js
@@ -37,6 +37,7 @@ ruleTester.run('anchor-has-content', rule, {
     { code: '<a>{foo}</a>', parserOptions },
     { code: '<a>{foo.bar}</a>', parserOptions },
     { code: '<a dangerouslySetInnerHTML={{ __html: "foo" }} />', parserOptions },
+    { code: '<a children={children} />', parserOptions },
   ],
   invalid: [
     { code: '<a />', errors: [expectedError], parserOptions },
diff --git a/tests/src/rules/aria-props.js b/tests/src/rules/aria-props.js
@@ -25,7 +25,7 @@ const parserOptions = {
 
 const ruleTester = new RuleTester();
 
-const errorMessage = name => {
+const errorMessage = (name) => {
   const dictionary = Object.keys(ariaAttributes).map(aria => aria.toLowerCase());
   const suggestions = getSuggestion(name, dictionary);
   const message = `${name}: This attribute is an invalid ARIA attribute.`;
diff --git a/tests/src/rules/aria-proptypes.js b/tests/src/rules/aria-proptypes.js
@@ -24,7 +24,7 @@ const parserOptions = {
 
 const ruleTester = new RuleTester();
 
-const errorMessage = name => {
+const errorMessage = (name) => {
   const { type, values: permittedValues } = ariaAttributes[name.toUpperCase()];
 
   switch (type) {
diff --git a/tests/src/rules/aria-role.js b/tests/src/rules/aria-role.js
@@ -39,7 +39,7 @@ const createTests = roles => roles.map(role => ({
 }));
 
 const validTests = createTests(validRoles);
-const invalidTests = createTests(invalidRoles).map(test => {
+const invalidTests = createTests(invalidRoles).map((test) => {
   const invalidTest = assign({}, test);
   invalidTest.errors = [errorMessage];
   return invalidTest;
diff --git a/tests/src/rules/aria-unsupported-elements.js b/tests/src/rules/aria-unsupported-elements.js
@@ -32,7 +32,7 @@ Try removing the prop '${invalidProp}'.`,
 });
 
 // Generate valid test cases
-const roleValidityTests = Object.keys(DOM).map(element => {
+const roleValidityTests = Object.keys(DOM).map((element) => {
   const isReserved = DOM[element].reserved || false;
   const role = isReserved ? '' : 'role';
 
@@ -42,7 +42,7 @@ const roleValidityTests = Object.keys(DOM).map(element => {
   };
 });
 
-const ariaValidityTests = Object.keys(DOM).map(element => {
+const ariaValidityTests = Object.keys(DOM).map((element) => {
   const isReserved = DOM[element].reserved || false;
   const aria = isReserved ? '' : 'aria-hidden';
 
diff --git a/tests/src/rules/heading-has-content.js b/tests/src/rules/heading-has-content.js
@@ -42,6 +42,7 @@ ruleTester.run('heading-has-content', rule, {
     { code: '<h1>{foo}</h1>', parserOptions },
     { code: '<h1>{foo.bar}</h1>', parserOptions },
     { code: '<h1 dangerouslySetInnerHTML={{ __html: "foo" }} />', parserOptions },
+    { code: '<h1 children={children} />', parserOptions },
   ],
   invalid: [
     { code: '<h1 />', errors: [expectedError], parserOptions },
diff --git a/tests/src/rules/role-has-required-aria-props.js b/tests/src/rules/role-has-required-aria-props.js
diff --git a/tests/src/util/getSuggestion.js b/tests/src/util/getSuggestion.js
