Add act() eslint rule and upgrade eslint (adobe#1054)

* Prevent warning about missing plugin * Upgrade eslint, fix errors * Fix conditional hook call * Add eslint plugin for act() in tests * Don't require act for userEvent * Actually use the imported act name * Apply autofixes * Remove unneeded acts around events * Update lint rule...
brunostasse · Oct 6, 2020 · f6c0660 · f6c0660
1 parent dc6d787
commit f6c0660
Show file tree

Hide file tree

Showing 63 changed files with 1,389 additions and 1,219 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,12 +5,12 @@ let rulesDirPlugin = require('eslint-plugin-rulesdir');
 rulesDirPlugin.RULES_DIR = './bin';
 
 module.exports = {
-  plugins: ['react', 'rulesdir', 'jsx-a11y', 'react-hooks', 'jest', 'monorepo'],
+  plugins: ['react', 'rulesdir', 'jsx-a11y', 'react-hooks', 'jest', 'monorepo', 'eslint-plugin-test-act'],
   extends: ['eslint:recommended'],
   parser: 'babel-eslint',
   parserOptions: {
     ecmaFeatures: {
-      "legacyDecorators": true
+      'legacyDecorators': true
     },
     sourceType: 'module'
   },
@@ -20,17 +20,24 @@ module.exports = {
     parser: '@typescript-eslint/parser',
     parserOptions: {
       ecmaFeatures: {
-        "jsx": true,
-        "legacyDecorators": true
+        'jsx': true,
+        'legacyDecorators': true
       },
-      "useJSXTextNode": true,
-      "project": "./tsconfig.json",
+      'useJSXTextNode': true,
+      'project': './tsconfig.json',
       sourceType: 'module'
     },
     rules: {
-      "no-unused-vars": OFF,
-      "@typescript-eslint/no-unused-vars": ERROR,
-      "@typescript-eslint/member-delimiter-style": [ERROR, {
+      'jsdoc/require-description-complete-sentence': [ERROR, {abbreviations: ['e.g', 'etc']}],
+      'jsdoc/check-alignment': ERROR,
+      'jsdoc/check-indentation': ERROR,
+      'jsdoc/check-tag-names': ERROR,
+      // enable this rule to see literally everything missing jsdocs, this rule needs some refinement but is good as a sanity check.
+      // 'jsdoc/require-jsdoc': [ERROR, {contexts:['TSInterfaceDeclaration TSPropertySignature', 'TSInterfaceDeclaration TSMethodSignature']}],
+      'jsdoc/require-description': [ERROR, {exemptedBy: ['deprecated'], checkConstructors: false}],
+      'no-unused-vars': OFF,
+      '@typescript-eslint/no-unused-vars': ERROR,
+      '@typescript-eslint/member-delimiter-style': [ERROR, {
         multiline: {
           delimiter: 'comma',
           requireLast: false
@@ -39,11 +46,12 @@ module.exports = {
           delimiter: 'comma',
           requireLast: false
         }
-      }],
+      }]
     }
   }, {
     files: ['**/test/**', '**/stories/**', '**/docs/**', '**/chromatic/**'],
     rules: {
+      'test-act/act-events-test': ERROR,
       'rulesdir/imports': OFF,
       'monorepo/no-internal-import': OFF,
       'jsdoc/require-jsdoc': OFF
@@ -65,22 +73,19 @@ module.exports = {
   globals: {
     'importSpectrumCSS': 'readonly',
     'jest': true,
-    'expect': true
+    'expect': true,
+    'JSX': 'readonly'
   },
   settings: {
     jsdoc: {
       ignorePrivate: true,
       publicFunctionsOnly: true
+    },
+    react: {
+      version: 'detect'
     }
   },
   rules: {
-    'jsdoc/require-description-complete-sentence': [ERROR, {abbreviations: ['e.g', 'etc']}],
-    'jsdoc/check-alignment': ERROR,
-    'jsdoc/check-indentation': ERROR,
-    'jsdoc/check-tag-names': ERROR,
-    // enable this rule to see literally everything missing jsdocs, this rule needs some refinement but is good as a sanity check.
-    // 'jsdoc/require-jsdoc': [ERROR, {contexts:['TSInterfaceDeclaration TSPropertySignature', 'TSInterfaceDeclaration TSMethodSignature']}],
-    'jsdoc/require-description': [ERROR, {exemptedBy: ['deprecated'], checkConstructors: false}],
     'comma-dangle': ERROR,
     'indent': OFF,
     'indent-legacy': [ERROR, ERROR, {SwitchCase: 1}],
@@ -234,8 +239,8 @@ module.exports = {
         ],
         li: ['menuitem', 'option', 'row', 'tab', 'treeitem'],
         table: ['grid'],
-        td: ['gridcell','columnheader','rowheader'],
-        th: ['columnheader','rowheader']
+        td: ['gridcell', 'columnheader', 'rowheader'],
+        th: ['columnheader', 'rowheader']
       }
     ],
     'jsx-a11y/no-noninteractive-tabindex': [

diff --git a/package.json b/package.json
@@ -84,11 +84,11 @@
     "@testing-library/user-event": "^12.1.3",
     "@types/react": "^16.9.23",
     "@types/storybook__react": "^4.0.1",
-    "@typescript-eslint/eslint-plugin": "^2.28.0",
-    "@typescript-eslint/parser": "^2.28.0",
+    "@typescript-eslint/eslint-plugin": "^4.3.0",
+    "@typescript-eslint/parser": "^4.3.0",
     "autoprefixer": "^9.6.0",
     "axe-core": "^3.0.3",
-    "babel-eslint": "^10.0.0",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.5",
     "babel-plugin-istanbul": "^5.0.0",
     "babel-plugin-macros": "^2.5.0",
@@ -102,14 +102,14 @@
     "cross-env": "^7.0.2",
     "cross-spawn": "^7.0.3",
     "css-loader": "^2.1.1",
-    "eslint": "^5.0.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jest": "^22.5.1",
-    "eslint-plugin-jsdoc": "^27.1.1",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint": "^7.10.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.0.2",
+    "eslint-plugin-jsdoc": "^30.6.2",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-monorepo": "^0.2.1",
-    "eslint-plugin-react": "^7.12.4",
-    "eslint-plugin-react-hooks": "^1.6.0",
+    "eslint-plugin-react": "^7.21.2",
+    "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-plugin-rulesdir": "^0.1.0",
     "fast-glob": "^3.1.0",
     "file-loader": "^0.9.0",

diff --git a/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx b/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx
@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, render} from '@testing-library/react';
 import {AriaCheckboxGroupProps, AriaCheckboxProps} from '@react-types/checkbox';
 import {CheckboxGroupState, useCheckboxGroupState} from '@react-stately/checkbox';
 import React, {useRef} from 'react';
+import {render} from '@testing-library/react';
 import {useCheckboxGroup, useCheckboxGroupItem} from '../';
 import userEvent from '@testing-library/user-event';
 
@@ -68,7 +68,7 @@ describe('useCheckboxGroup', () => {
     expect(checkboxes[2].checked).toBe(false);
 
     let dragons = getByLabelText('Dragons');
-    act(() => {userEvent.click(dragons);});
+    userEvent.click(dragons);
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
     expect(onChangeSpy).toHaveBeenCalledWith(['dragons']);
 
@@ -251,7 +251,7 @@ describe('useCheckboxGroup', () => {
     let checkboxes = getAllByRole('checkbox') as HTMLInputElement[];
     let dragons = getByLabelText('Dragons');
 
-    act(() => {userEvent.click(dragons);});
+    userEvent.click(dragons);
 
     expect(groupOnChangeSpy).toHaveBeenCalledTimes(0);
     expect(checkboxOnChangeSpy).toHaveBeenCalledTimes(0);

diff --git a/packages/@react-aria/focus/test/FocusScope.test.js b/packages/@react-aria/focus/test/FocusScope.test.js
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {fireEvent, render} from '@testing-library/react';
+import {act, fireEvent, render} from '@testing-library/react';
 import {FocusScope, useFocusManager} from '../';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -38,7 +38,7 @@ describe('FocusScope', function () {
       let input2 = getByTestId('input2');
       let input3 = getByTestId('input3');
 
-      input1.focus();
+      act(() => {input1.focus();});
       expect(document.activeElement).toBe(input1);
 
       fireEvent.keyDown(document.activeElement, {key: 'Tab'});
@@ -77,7 +77,7 @@ describe('FocusScope', function () {
       let input2 = getByTestId('input2');
       let input3 = getByTestId('input3');
 
-      input1.focus();
+      act(() => {input1.focus();});
       expect(document.activeElement).toBe(input1);
 
       fireEvent.keyDown(document.activeElement, {key: 'Tab'});
@@ -114,7 +114,7 @@ describe('FocusScope', function () {
       let input2 = getByTestId('input2');
       let input3 = getByTestId('input3');
 
-      input1.focus();
+      act(() => {input1.focus();});
       expect(document.activeElement).toBe(input1);
 
       fireEvent.keyDown(document.activeElement, {key: 'Tab'});
@@ -147,7 +147,7 @@ describe('FocusScope', function () {
 
       let input1 = getByTestId('input1');
 
-      input1.focus();
+      act(() => {input1.focus();});
       expect(document.activeElement).toBe(input1);
 
       fireEvent.keyDown(document.activeElement, {key: 'Tab', altKey: true});
@@ -177,7 +177,7 @@ describe('FocusScope', function () {
       let input5 = getByTestId('input5');
       let input6 = getByTestId('input6');
 
-      input1.focus();
+      act(() => {input1.focus();});
       expect(document.activeElement).toBe(input1);
 
       fireEvent.keyDown(document.activeElement, {key: 'Tab'});
@@ -198,7 +198,7 @@ describe('FocusScope', function () {
       fireEvent.keyDown(document.activeElement, {key: 'Tab', shiftKey: true});
       expect(document.activeElement).toBe(input1);
 
-      input4.focus();
+      act(() => {input4.focus();});
       expect(document.activeElement).toBe(input4);
 
       fireEvent.keyDown(document.activeElement, {key: 'Tab'});
@@ -236,18 +236,18 @@ describe('FocusScope', function () {
       let input2 = getByTestId('input2');
       let outside = getByTestId('outside');
 
-      input1.focus();
+      act(() => {input1.focus();});
       fireEvent.focusIn(input1); // jsdom doesn't fire this automatically
       expect(document.activeElement).toBe(input1);
 
       fireEvent.keyDown(document.activeElement, {key: 'Tab'});
       fireEvent.focusIn(input2);
       expect(document.activeElement).toBe(input2);
 
-      input2.blur();
+      act(() => {input2.blur();});
       expect(document.activeElement).toBe(input2);
 
-      outside.focus();
+      act(() => {outside.focus();});
       fireEvent.focusIn(outside);
       expect(document.activeElement).toBe(input2);
     });
@@ -265,15 +265,15 @@ describe('FocusScope', function () {
       let input1 = getByTestId('input1');
       let input2 = getByTestId('input2');
 
-      input1.focus();
+      act(() => {input1.focus();});
       fireEvent.focusIn(input1); // jsdom doesn't fire this automatically
       expect(document.activeElement).toBe(input1);
 
       fireEvent.keyDown(document.activeElement, {key: 'Tab'});
       fireEvent.focusIn(input2);
       expect(document.activeElement).toBe(input2);
 
-      input2.blur();
+      act(() => {input2.blur();});
       expect(document.activeElement).toBe(input2);
       fireEvent.focusOut(input2);
       expect(document.activeElement).toBe(input2);
@@ -300,7 +300,7 @@ describe('FocusScope', function () {
       let {getByTestId, rerender} = render(<Test />);
 
       let outside = getByTestId('outside');
-      outside.focus();
+      act(() => {outside.focus();});
 
       rerender(<Test show />);
 
@@ -333,15 +333,15 @@ describe('FocusScope', function () {
       let {getByTestId, rerender} = render(<Test />);
 
       let trigger = getByTestId('trigger');
-      trigger.focus();
+      act(() => {trigger.focus();});
 
       rerender(<Test show />);
 
       let input1 = getByTestId('input1');
       expect(document.activeElement).toBe(input1);
 
       let input3 = getByTestId('input3');
-      input3.focus();
+      act(() => {input3.focus();});
 
       fireEvent.keyDown(input3, {key: 'Tab'});
       expect(document.activeElement).toBe(getByTestId('after'));
@@ -368,7 +368,7 @@ describe('FocusScope', function () {
       let {getByTestId, rerender} = render(<Test />);
 
       let trigger = getByTestId('trigger');
-      trigger.focus();
+      act(() => {trigger.focus();});
 
       rerender(<Test show />);
 
@@ -400,15 +400,15 @@ describe('FocusScope', function () {
       let {getByTestId, rerender} = render(<Test />);
 
       let trigger = getByTestId('trigger');
-      trigger.focus();
+      act(() => {trigger.focus();});
 
       rerender(<Test show />);
 
       let input1 = getByTestId('input1');
       expect(document.activeElement).toBe(input1);
 
       let input3 = getByTestId('input3');
-      input3.focus();
+      act(() => {input3.focus();});
 
       fireEvent.keyDown(input3, {key: 'Tab'});
       expect(document.activeElement).toBe(getByTestId('after'));
@@ -471,7 +471,7 @@ describe('FocusScope', function () {
       let item2 = getByTestId('item2');
       let item3 = getByTestId('item3');
 
-      item1.focus();
+      act(() => {item1.focus();});
 
       fireEvent.click(item1);
       expect(document.activeElement).toBe(item2);
@@ -508,7 +508,7 @@ describe('FocusScope', function () {
       let item2 = getByTestId('item2');
       let item3 = getByTestId('item3');
 
-      item1.focus();
+      act(() => {item1.focus();});
 
       fireEvent.click(item1);
       expect(document.activeElement).toBe(item2);
@@ -544,7 +544,7 @@ describe('FocusScope', function () {
       let item1 = getByTestId('item1');
       let item3 = getByTestId('item3');
 
-      item1.focus();
+      act(() => {item1.focus();});
 
       fireEvent.click(item1);
       expect(document.activeElement).toBe(item3);
@@ -575,7 +575,7 @@ describe('FocusScope', function () {
       let item2 = getByTestId('item2');
       let item3 = getByTestId('item3');
 
-      item3.focus();
+      act(() => {item3.focus();});
 
       fireEvent.click(item3);
       expect(document.activeElement).toBe(item2);
@@ -612,7 +612,7 @@ describe('FocusScope', function () {
       let item2 = getByTestId('item2');
       let item3 = getByTestId('item3');
 
-      item3.focus();
+      act(() => {item3.focus();});
 
       fireEvent.click(item3);
       expect(document.activeElement).toBe(item2);
@@ -648,7 +648,7 @@ describe('FocusScope', function () {
       let item1 = getByTestId('item1');
       let item3 = getByTestId('item3');
 
-      item3.focus();
+      act(() => {item3.focus();});
 
       fireEvent.click(item3);
       expect(document.activeElement).toBe(item1);
@@ -681,14 +681,14 @@ describe('FocusScope', function () {
       let {getByTestId, rerender} = render(<Test />);
       // Set a focused node and make first FocusScope the active scope
       let input1 = getByTestId('input1');
-      input1.focus();
+      act(() => {input1.focus();});
       fireEvent.focusIn(input1);
       expect(document.activeElement).toBe(input1);
 
       rerender(<Test show />);
       expect(document.activeElement).toBe(input1);
       let input3 = getByTestId('input3');
-      input3.focus();
+      act(() => {input3.focus();});
       fireEvent.focusIn(input3);
       expect(document.activeElement).toBe(input3);
     });