feat: Add auto fix capability to onClick rule when data-test-id attri…

…bute is missing (#8) * feat: Add auto fix capability to onClick rule when data-test-id attribute is missing (#1) * feat: Add auto fix capability to onClick rule when data-test-id attribute is missing. * cleaned up parserOptionsMapper from onClick rule and used the generic parserOptionMapper instead * removed unused code Co-authored-by: Boima Konuwa <[email protected]> * fix: Allow multipart jsx node names Co-authored-by: Boima Konuwa <[email protected]> Co-authored-by: Chris Garcia <[email protected]>
davidcalhoun · Jan 26, 2021 · 0d136bb · 0d136bb
1 parent 73bc12d
commit 0d136bb
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 16 deletions.
diff --git a/lib/rules/onClick.js b/lib/rules/onClick.js
@@ -21,7 +21,7 @@ module.exports = {
             recommended: true,
             url: 'https://github.com/davidcalhoun/eslint-plugin-test-selectors/tree/master/docs/rules/onClick.md'
         },
-        fixable: null,
+        fixable: 'code',
         schema: defaultRuleSchema
     },
 
@@ -42,7 +42,20 @@ module.exports = {
 
                 context.report({
                     node,
-                    message: getError(errors.onClick.message, testAttribute)
+                    message: getError(errors.onClick.message, testAttribute),
+                    fix: function fix(fixer) {
+                        const { nanoid } = require('nanoid');
+                        const suggestedId = nanoid();
+                        const namePositionEnd = node.name.range[1];
+                        const attributeText = `${ testAttribute }="${ suggestedId }"`;
+                        const start = namePositionEnd - 1;
+                        const end = start + 1;
+
+                        return fixer.insertTextAfterRange(
+                            [start, end],
+                            ` ${ attributeText }`
+                        );
+                    },
                 });
             }
         };

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,12 +22,14 @@
   },
   "dependencies": {
     "jsx-ast-utils": "^3.2.0",
+    "nanoid": "^3.1.18",
     "requireindex": "^1.2.0"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
     "eslint": "^7.16.0",
-    "mocha": "^8.2.1"
+    "mocha": "^8.2.1",
+    "mock-require": "^3.0.3"
   },
   "engines": {
     "node": ">=0.10.0"

diff --git a/tests/lib/rules/onClick.js b/tests/lib/rules/onClick.js
@@ -9,11 +9,21 @@ const {
     errors
 } = require('../../../lib/constants');
 const { getError } = require('../../../lib/utils');
+const nanoidMock = require('mock-require');
 
 const { onClick } = errors;
 
 const onClickError = getError(onClick.message, defaults.testAttribute);
 
+nanoidMock('nanoid', {
+    nanoid: function () {
+        return 'AbYK0YPm2OWYiMaFPKLbp';
+    },
+});
+
+const id = require('nanoid');
+const suggestedId = id.nanoid();
+
 const ruleTester = new RuleTester();
 ruleTester.run('onClick', rule, {
     valid: [
@@ -31,12 +41,46 @@ ruleTester.run('onClick', rule, {
     ].map(parserOptionsMapper),
 
     invalid: [
-        { code: '<div onClick={ this.handleClick } />', errors: [onClickError] },
-        { code: '<div onClick={ this.handleClick }>foo</div>', errors: [onClickError] },
-        { code: '<Bar onClick={ this.handleClick } />', errors: [onClickError] },
-        { code: '<Bar onClick={ this.handleClick }>foo</Bar>', errors: [onClickError] },
-        { code: '<Bar onClick={ () => handleClick() }>foo</Bar>', errors: [onClickError] },
-        { code: '<Bar onClick={ () => handleClick() } disabled={ foo }>foo</Bar>', errors: [onClickError] },
-        { code: '<Bar onClick={ () => handleClick() } readonly={ foo }>foo</Bar>', errors: [onClickError] }
+        {
+            code: '<div onClick={ this.handleClick } />',
+            errors: [onClickError],
+            output: `<div data-test-id="${ suggestedId }" onClick={ this.handleClick } />`,
+        },
+        {
+            code: '<div onClick={ this.handleClick }>foo</div>',
+            errors: [onClickError],
+            output: `<div data-test-id="${ suggestedId }" onClick={ this.handleClick }>foo</div>`,
+        },
+        {
+            code: '<Bar onClick={ this.handleClick } />',
+            errors: [onClickError],
+            output: `<Bar data-test-id="${ suggestedId }" onClick={ this.handleClick } />`,
+        },
+        {
+            code: '<Bar onClick={ this.handleClick }>foo</Bar>',
+            errors: [onClickError],
+            output: `<Bar data-test-id="${ suggestedId }" onClick={ this.handleClick }>foo</Bar>`,
+        },
+        {
+            code: '<Bar onClick={ () => handleClick() }>foo</Bar>',
+            errors: [onClickError],
+            output: `<Bar data-test-id="${ suggestedId }" onClick={ () => handleClick() }>foo</Bar>`,
+        },
+        {
+            code: '<Bar onClick={ () => handleClick() } disabled={ foo }>foo</Bar>',
+            errors: [onClickError],
+            output: `<Bar data-test-id="${ suggestedId }" onClick={ () => handleClick() } disabled={ foo }>foo</Bar>`,
+        },
+        {
+            code: '<Bar onClick={ () => handleClick() } readonly={ foo }>foo</Bar>',
+            errors: [onClickError],
+            output: `<Bar data-test-id="${ suggestedId }" onClick={ () => handleClick() } readonly={ foo }>foo</Bar>`,
+        },
+        {
+            code: '<Foo.Bar onClick={ () => handleClick() } readonly={ foo }>foo</Foo.Bar>',
+            errors: [onClickError],
+            output:
+              `<Foo.Bar data-test-id="${ suggestedId }" onClick={ () => handleClick() } readonly={ foo }>foo</Foo.Bar>`,
+        },
     ].map(parserOptionsMapper)
 });
diff --git a/tests/parserOptionsMapper.js b/tests/parserOptionsMapper.js
@@ -8,16 +8,23 @@ const defaultParserOptions = {
 module.exports = function({
   code,
   errors,
+  output,
   options = [],
   parserOptions = {},
 }) {
-  return {
+  const defaultOptions = {
     code,
     errors,
     options,
     parserOptions: {
       ...defaultParserOptions,
       ...parserOptions,
     }
-  };
+  }
+
+  if (output) {
+    defaultOptions.output = output; 
+  }
+
+  return defaultOptions;
 }