Add auto-fixer for rule self-closing-comp. Update documentation and update tests.

Author: pl12133

README.md

@@ -103,7 +103,7 @@ Finally, enable all of the rules that you would like to use.  Use [our preset](#
 * [react/require-extension](docs/rules/require-extension.md): Restrict file extensions that may be required
 * [react/require-optimization](docs/rules/require-optimization.md): Enforce React components to have a shouldComponentUpdate method
 * [react/require-render-return](docs/rules/require-render-return.md): Enforce ES5 or ES6 class for returning value in render function
-* [react/self-closing-comp](docs/rules/self-closing-comp.md): Prevent extra closing tags for components without children
+* [react/self-closing-comp](docs/rules/self-closing-comp.md): Prevent extra closing tags for components without children (fixable)
 * [react/sort-comp](docs/rules/sort-comp.md): Enforce component methods order
 * [react/sort-prop-types](docs/rules/sort-prop-types.md): Enforce propTypes declarations alphabetical sorting
 

docs/rules/self-closing-comp.md

@@ -2,6 +2,8 @@
 
 Components without children can be self-closed to avoid unnecessary extra closing tag.
 
+**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+
 ## Rule Details
 
 The following patterns are considered warnings:

lib/rules/self-closing-comp.js

@@ -15,6 +15,7 @@ module.exports = {
       category: 'Stylistic Issues',
       recommended: false
     },
+    fixable: 'code',
 
     schema: [{
       type: 'object',
@@ -75,7 +76,17 @@ module.exports = {
         }
         context.report({
           node: node,
-          message: 'Empty components are self-closing'
+          message: 'Empty components are self-closing',
+          fix: function(fixer) {
+            // Represents the last character of the JSXOpeningElement, the '>' character
+            var openingElementEnding = node.end - 1;
+            // Represents the last character of the JSXClosingElement, the '>' character
+            var closingElementEnding = node.parent.closingElement.end;
+
+            // Replace />.*<\/.*>/ with '/>'
+            var range = [openingElementEnding, closingElementEnding];
+            return fixer.replaceTextRange(range, '/>');
+          }
         });
       }
     };

tests/lib/rules/self-closing-comp.js

@@ -107,73 +107,84 @@ ruleTester.run('self-closing-comp', rule, {
   invalid: [
     {
       code: 'var contentContainer = <div className="content"></div>;',
+      output: 'var contentContainer = <div className="content"/>;',
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var contentContainer = <div className="content"></div>;',
+      output: 'var contentContainer = <div className="content"/>;',
       options: [],
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var HelloJohn = <Hello name="John"></Hello>;',
+      output: 'var HelloJohn = <Hello name="John"/>;',
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var HelloJohn = <Hello name="John">\n</Hello>;',
+      output: 'var HelloJohn = <Hello name="John"/>;',
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var HelloJohn = <Hello name="John"> </Hello>;',
+      output: 'var HelloJohn = <Hello name="John"/>;',
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     },
     {
       code: 'var HelloJohn = <Hello name="John"></Hello>;',
+      output: 'var HelloJohn = <Hello name="John"/>;',
       options: [],
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var HelloJohn = <Hello name="John">\n</Hello>;',
+      output: 'var HelloJohn = <Hello name="John"/>;',
       options: [],
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var HelloJohn = <Hello name="John"> </Hello>;',
+      output: 'var HelloJohn = <Hello name="John"/>;',
       options: [],
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var contentContainer = <div className="content"></div>;',
+      output: 'var contentContainer = <div className="content"/>;',
       options: [{html: true}],
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var contentContainer = <div className="content">\n</div>;',
+      output: 'var contentContainer = <div className="content"/>;',
       options: [{html: true}],
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var contentContainer = <div className="content"> </div>;',
+      output: 'var contentContainer = <div className="content"/>;',
       options: [{html: true}],
       parserOptions: parserOptions,
       errors: [{