feat(rule): add no-await-sync-events rule

docs/rules/no-await-sync-events.md

@@ -0,0 +1,53 @@
+# Disallow unnecessary `await` for sync events (no-await-sync-events)
+
+Ensure that sync events are not awaited unnecessarily.
+
+## Rule Details
+
+Functions in the event object provided by Testing Library, including
+fireEvent and userEvent, do NOT return Promise, with an exception of
+`userEvent.type`. Some examples are:
+
+- `fireEvent.click`
+- `fireEvent.select`
+- `userEvent.tab`
+- `userEvent.hover`
+
+This rule aims to prevent users from waiting for those function calls.
+
+Examples of **incorrect** code for this rule:
+
+```js
+const foo = async () => {
+  // ...
+  await fireEvent.click(button);
+  // ...
+};
+
+const bar = () => {
+  // ...
+  await userEvent.tab();
+  // ...
+};
+```
+
+Examples of **correct** code for this rule:
+
+```js
+const foo = () => {
+  // ...
+  fireEvent.click(button);
+  // ...
+};
+
+const bar = () => {
+  // ...
+  userEvent.tab();
+  // ...
+};
+```
+
+## Notes
+
+There is another rule `await-fire-event`, which is only in Vue Testing
+Library. Please do not confuse with this rule.

lib/index.ts

@@ -2,6 +2,7 @@ import awaitAsyncQuery from './rules/await-async-query';
 import awaitAsyncUtils from './rules/await-async-utils';
 import awaitFireEvent from './rules/await-fire-event';
 import consistentDataTestid from './rules/consistent-data-testid';
+import noAwaitSyncEvents from './rules/no-await-sync-events';
 import noAwaitSyncQuery from './rules/no-await-sync-query';
 import noDebug from './rules/no-debug';
 import noDomImport from './rules/no-dom-import';
@@ -20,6 +21,7 @@ const rules = {
   'await-async-utils': awaitAsyncUtils,
   'await-fire-event': awaitFireEvent,
   'consistent-data-testid': consistentDataTestid,
+  'no-await-sync-events': noAwaitSyncEvents,
   'no-await-sync-query': noAwaitSyncQuery,
   'no-debug': noDebug,
   'no-dom-import': noDomImport,

lib/rules/no-await-sync-events.ts

@@ -0,0 +1,50 @@
+import { ESLintUtils, TSESTree } from '@typescript-eslint/experimental-utils';
+import { getDocsUrl, ASYNC_EVENTS } from '../utils';
+
+export const RULE_NAME = 'no-await-sync-events';
+export type MessageIds = 'noAwaitSyncEvents';
+type Options = [];
+
+const ASYNC_EVENTS_REGEXP = new RegExp(`^(${ASYNC_EVENTS.join('|')})$`);
+export default ESLintUtils.RuleCreator(getDocsUrl)<Options, MessageIds>({
+  name: RULE_NAME,
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow unnecessary `await` for sync events',
+      category: 'Best Practices',
+      recommended: 'error',
+    },
+    messages: {
+      noAwaitSyncEvents: '`{{ name }}` does not need `await` operator',
+    },
+    fixable: null,
+    schema: [],
+  },
+  defaultOptions: [],
+
+  create(context) {
+    // userEvent.type() is an exception, which returns a
+    // Promise, even it resolves immediately.
+    // for the sake of semantically correct, w/ or w/o await
+    // are both OK
+    return {
+      [`AwaitExpression > CallExpression > MemberExpression > Identifier[name=${ASYNC_EVENTS_REGEXP}]`](
+        node: TSESTree.Identifier
+      ) {
+        const memberExpression = node.parent as TSESTree.MemberExpression;
+        const methodNode = memberExpression.property as TSESTree.Identifier;
+
+        if (!(node.name === 'userEvent' && methodNode.name === 'type')) {
+          context.report({
+            node: methodNode,
+            messageId: 'noAwaitSyncEvents',
+            data: {
+              name: `${node.name}.${methodNode.name}`,
+            },
+          });
+        }
+      },
+    };
+  },
+});

lib/utils.ts

@@ -63,6 +63,11 @@ const ASYNC_UTILS = [
   'waitForDomChange',
 ];
 
+const ASYNC_EVENTS = [
+  'fireEvent',
+  'userEvent',
+];
+
 const TESTING_FRAMEWORK_SETUP_HOOKS = ['beforeEach', 'beforeAll'];
 
 const PRESENCE_MATCHERS = ['toBeInTheDocument', 'toBeTruthy', 'toBeDefined'];
@@ -78,6 +83,7 @@ export {
   ASYNC_QUERIES_COMBINATIONS,
   ALL_QUERIES_COMBINATIONS,
   ASYNC_UTILS,
+  ASYNC_EVENTS,
   TESTING_FRAMEWORK_SETUP_HOOKS,
   LIBRARY_MODULES,
   PRESENCE_MATCHERS,

tests/lib/rules/no-await-sync-events.test.ts

@@ -0,0 +1,157 @@
+import { createRuleTester } from '../test-utils';
+import rule, { RULE_NAME } from '../../../lib/rules/no-await-sync-events';
+import { ASYNC_EVENTS } from '../../../lib/utils';
+
+const ruleTester = createRuleTester();
+
+const fireEventFunctions = [
+  'copy',
+  'cut',
+  'paste',
+  'compositionEnd',
+  'compositionStart',
+  'compositionUpdate',
+  'keyDown',
+  'keyPress',
+  'keyUp',
+  'focus',
+  'blur',
+  'focusIn',
+  'focusOut',
+  'change',
+  'input',
+  'invalid',
+  'submit',
+  'reset',
+  'click',
+  'contextMenu',
+  'dblClick',
+  'drag',
+  'dragEnd',
+  'dragEnter',
+  'dragExit',
+  'dragLeave',
+  'dragOver',
+  'dragStart',
+  'drop',
+  'mouseDown',
+  'mouseEnter',
+  'mouseLeave',
+  'mouseMove',
+  'mouseOut',
+  'mouseOver',
+  'mouseUp',
+  'popState',
+  'select',
+  'touchCancel',
+  'touchEnd',
+  'touchMove',
+  'touchStart',
+  'scroll',
+  'wheel',
+  'abort',
+  'canPlay',
+  'canPlayThrough',
+  'durationChange',
+  'emptied',
+  'encrypted',
+  'ended',
+  'loadedData',
+  'loadedMetadata',
+  'loadStart',
+  'pause',
+  'play',
+  'playing',
+  'progress',
+  'rateChange',
+  'seeked',
+  'seeking',
+  'stalled',
+  'suspend',
+  'timeUpdate',
+  'volumeChange',
+  'waiting',
+  'load',
+  'error',
+  'animationStart',
+  'animationEnd',
+  'animationIteration',
+  'transitionEnd',
+  'doubleClick',
+  'pointerOver',
+  'pointerEnter',
+  'pointerDown',
+  'pointerMove',
+  'pointerUp',
+  'pointerCancel',
+  'pointerOut',
+  'pointerLeave',
+  'gotPointerCapture',
+  'lostPointerCapture',
+];
+const userEventFunctions = [
+  'clear',
+  'click',
+  'dblClick',
+  'selectOptions',
+  'deselectOptions',
+  'upload',
+  // 'type',
+  'tab',
+  'paste',
+  'hover',
+  'unhover',
+];
+let eventFunctions: string[] = [];
+ASYNC_EVENTS.forEach(event => {
+  switch (event) {
+    case 'fireEvent':
+      eventFunctions = eventFunctions.concat(fireEventFunctions.map((f: string): string => `${event}.${f}`));
+      break;
+    case 'userEvent':
+      eventFunctions = eventFunctions.concat(userEventFunctions.map((f: string): string => `${event}.${f}`));
+      break;
+    default:
+      eventFunctions.push(`${event}.anyFunc`);
+  }
+});
+
+ruleTester.run(RULE_NAME, rule, {
+  valid: [
+    // sync events without await are valid
+    // userEvent.type() is an exception
+    ...eventFunctions.map(func => ({
+      code: `() => {
+        ${func}('foo')
+      }
+      `,
+    })),
+    {
+      code: `() => {
+        userEvent.type('foo')
+      }
+      `,
+    },
+    {
+      code: `() => {
+        await userEvent.type('foo')
+      }
+      `,
+    },
+  ],
+
+  invalid: [
+    // sync events with await operator are not valid
+    ...eventFunctions.map(func => ({
+      code: `() => {
+        await ${func}('foo')
+      }
+      `,
+      errors: [
+        {
+          messageId: 'noAwaitSyncEvents',
+        },
+      ],
+    })),
+  ],
+});