Merge pull request #431 from pdhoopr/fix-heading-has-content-components

Fix heading-has-content so it works for custom components

Author: jessebeach

__tests__/src/rules/heading-has-content-test.js

@@ -23,8 +23,13 @@ const expectedError = {
   type: 'JSXOpeningElement',
 };
 
+const components = [{
+  components: ['Heading', 'Title'],
+}];
+
 ruleTester.run('heading-has-content', rule, {
   valid: [
+    // DEFAULT ELEMENT TESTS
     { code: '<div />;' },
     { code: '<h1>Foo</h1>' },
     { code: '<h2>Foo</h2>' },
@@ -38,11 +43,25 @@ ruleTester.run('heading-has-content', rule, {
     { code: '<h1>{foo.bar}</h1>' },
     { code: '<h1 dangerouslySetInnerHTML={{ __html: "foo" }} />' },
     { code: '<h1 children={children} />' },
+    // CUSTOM ELEMENT TESTS FOR COMPONENTS OPTION
+    { code: '<Heading>Foo</Heading>', options: components },
+    { code: '<Title>Foo</Title>', options: components },
+    { code: '<Heading><Bar /></Heading>', options: components },
+    { code: '<Heading>{foo}</Heading>', options: components },
+    { code: '<Heading>{foo.bar}</Heading>', options: components },
+    { code: '<Heading dangerouslySetInnerHTML={{ __html: "foo" }} />', options: components },
+    { code: '<Heading children={children} />', options: components },
     { code: '<h1 aria-hidden />' },
   ].map(parserOptionsMapper),
   invalid: [
+    // DEFAULT ELEMENT TESTS
     { code: '<h1 />', errors: [expectedError] },
     { code: '<h1><Bar aria-hidden /></h1>', errors: [expectedError] },
     { code: '<h1>{undefined}</h1>', errors: [expectedError] },
+
+    // CUSTOM ELEMENT TESTS FOR COMPONENTS OPTION
+    { code: '<Heading />', errors: [expectedError], options: components },
+    { code: '<Heading><Bar aria-hidden /></Heading>', errors: [expectedError], options: components },
+    { code: '<Heading>{undefined}</Heading>', errors: [expectedError], options: components },
   ].map(parserOptionsMapper),
 });

src/rules/heading-has-content.js

@@ -36,7 +36,9 @@ module.exports = {
 
   create: context => ({
     JSXOpeningElement: (node) => {
-      const typeCheck = headings.concat(context.options[0]);
+      const options = context.options[0] || {};
+      const componentOptions = options.components || [];
+      const typeCheck = headings.concat(componentOptions);
       const nodeType = elementType(node);
 
       // Only check 'h*' elements and custom types.