[eslint config] [patch] Fixed handle and on ordering in `sort-com…

…p` rule - fixes #2116
airbnb · Sep 23, 2020 · d3c7b84 · d3c7b84
1 parent b30b0e4
commit d3c7b84
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js
@@ -244,6 +244,7 @@ module.exports = {
         'static-methods',
         'instance-variables',
         'lifecycle',
+        '/^handle.+$/',
         '/^on.+$/',
         'getters',
         'setters',

diff --git a/packages/eslint-config-airbnb/test/test-react-order.js b/packages/eslint-config-airbnb/test/test-react-order.js
@@ -33,7 +33,7 @@ ${body}}
 `;
 }
 
-test('validate react prop order', (t) => {
+test('validate react methods order', (t) => {
   t.test('make sure our eslintrc has React and JSX linting dependencies', (t) => {
     t.plan(2);
     t.deepEqual(reactRules.plugins, ['react']);
@@ -44,6 +44,8 @@ test('validate react prop order', (t) => {
     t.plan(3);
     const result = lint(wrapComponent(`
   componentDidMount() {}
+  handleSubmit() {}
+  onButtonAClick() {}
   setFoo() {}
   getFoo() {}
   setBar() {}
@@ -88,4 +90,47 @@ test('validate react prop order', (t) => {
     t.ok(result.errorCount, 'fails');
     t.deepEqual(result.messages.map((msg) => msg.ruleId), ['react/sort-comp'], 'fails due to sort');
   });
+
+  t.test('order: when handler method with `handle` prefix after method with `on` prefix', (t) => {
+    t.plan(2);
+    const result = lint(wrapComponent(`
+  componentDidMount() {}
+  onButtonAClick() {}
+  handleSubmit() {}
+  setFoo() {}
+  getFoo() {}
+  render() { return <div />; }
+`));
+
+    t.ok(result.errorCount, 'fails');
+    t.deepEqual(result.messages.map((msg) => msg.ruleId), ['react/sort-comp'], 'fails due to sort');
+  });
+
+  t.test('order: when lifecycle methods after event handler methods', (t) => {
+    t.plan(2);
+    const result = lint(wrapComponent(`
+  handleSubmit() {}
+  componentDidMount() {}
+  setFoo() {}
+  getFoo() {}
+  render() { return <div />; }
+`));
+
+    t.ok(result.errorCount, 'fails');
+    t.deepEqual(result.messages.map((msg) => msg.ruleId), ['react/sort-comp'], 'fails due to sort');
+  });
+
+  t.test('order: when event handler methods after getters and setters', (t) => {
+    t.plan(2);
+    const result = lint(wrapComponent(`
+  componentDidMount() {}
+  setFoo() {}
+  getFoo() {}
+  handleSubmit() {}
+  render() { return <div />; }
+`));
+
+    t.ok(result.errorCount, 'fails');
+    t.deepEqual(result.messages.map((msg) => msg.ruleId), ['react/sort-comp'], 'fails due to sort');
+  });
 });
diff --git a/react/README.md b/react/README.md
@@ -667,7 +667,8 @@ We don’t recommend using indexes for keys if the order of items may change.
   1. `componentWillUpdate`
   1. `componentDidUpdate`
   1. `componentWillUnmount`
-  1. *clickHandlers or eventHandlers* like `onClickSubmit()` or `onChangeDescription()`
+  1. *event handlers starting with 'handle'* like `handleSubmit()` or `handleChangeDescription()`
+  1. *event handlers starting with 'on'* like `onClickSubmit()` or `onChangeDescription()`
   1. *getter methods for `render`* like `getSelectReason()` or `getFooterContent()`
   1. *optional render methods* like `renderNavigation()` or `renderProfilePicture()`
   1. `render`