feat: add new rule await-fire-event

Author: Belco90

README.md

@@ -115,12 +115,13 @@ To enable this configuration use the `extends` property in your
 
 ## Supported Rules
 
-| Rule                                                     | Description                                   | Recommended      | Frameworks                       | Fixable      |
-| -------------------------------------------------------- | --------------------------------------------- | ---------------- | -------------------------------- | ------------ |
-| [await-async-query](docs/rules/await-async-query.md)     | Enforce async queries to have proper `await`  | ![recommended][] |                                  |              |
-| [no-await-sync-query](docs/rules/no-await-sync-query.md) | Disallow unnecessary `await` for sync queries | ![recommended][] |                                  |              |
-| [no-debug](docs/rules/no-debug.md)                       | Disallow the use of `debug`                   |                  | ![angular][] ![react][] ![vue][] |              |
-| [no-dom-import](docs/rules/no-dom-import.md)             | Disallow importing from DOM Testing Library   |                  | ![angular][] ![react][] ![vue][] | ![fixable][] |
+| Rule                                                     | Description                                    | Recommended      | Frameworks                       | Fixable      |
+| -------------------------------------------------------- | ---------------------------------------------- | ---------------- | -------------------------------- | ------------ |
+| [await-async-query](docs/rules/await-async-query.md)     | Enforce async queries to have proper `await`   | ![recommended][] |                                  |              |
+| [await-fire-event](docs/rules/await-fire-event.md)       | Enforce async fire event methods to be awaited |                  | ![vue][]                         |              |
+| [no-await-sync-query](docs/rules/no-await-sync-query.md) | Disallow unnecessary `await` for sync queries  | ![recommended][] |                                  |              |
+| [no-debug](docs/rules/no-debug.md)                       | Disallow the use of `debug`                    |                  | ![angular][] ![react][] ![vue][] |              |
+| [no-dom-import](docs/rules/no-dom-import.md)             | Disallow importing from DOM Testing Library    |                  | ![angular][] ![react][] ![vue][] | ![fixable][] |
 
 [recommended]: https://img.shields.io/badge/recommended-lightgrey?style=flat-square
 [fixable]: https://img.shields.io/badge/fixable-success?style=flat-square

docs/rules/await-fire-event.md

@@ -0,0 +1,45 @@
+# Enforce async fire event methods to be awaited (await-fire-event)
+
+Ensure that promises returned by `fireEvent` methods are awaited
+properly.
+
+## Rule Details
+
+This rule aims to prevent users from forgetting to await `fireEvent`
+methods when they are async.
+
+Examples of **incorrect** code for this rule:
+
+```js
+fireEvent.click(getByText('Click me'));
+
+fireEvent.focus(getByLabelText('username'));
+fireEvent.blur(getByLabelText('username'));
+```
+
+Examples of **correct** code for this rule:
+
+```js
+// `await` operator is correct
+await fireEvent.focus(getByLabelText('username'));
+await fireEvent.blur(getByLabelText('username'));
+
+// `then` method is correct
+fireEvent.click(getByText('Click me')).then(() => {
+  // ...
+});
+
+// return the promise within a function is correct too!
+function clickMeRegularFn() {
+  return fireEvent.click(getByText('Click me'));
+}
+const clickMeArrowFn = () => fireEvent.click(getByText('Click me'));
+```
+
+## When Not To Use It
+
+`fireEvent` methods are only async in Vue Testing Library so if you are using another Testing Library module, you shouldn't use this rule.
+
+## Further Reading
+
+- [Vue Testing Library fireEvent](https://testing-library.com/docs/vue-testing-library/api#fireevent)

lib/index.js

@@ -2,6 +2,7 @@
 
 const rules = {
   'await-async-query': require('./rules/await-async-query'),
+  'await-fire-event': require('./rules/await-fire-event'),
   'no-await-sync-query': require('./rules/no-await-sync-query'),
   'no-debug': require('./rules/no-debug'),
   'no-dom-import': require('./rules/no-dom-import'),
@@ -39,6 +40,7 @@ module.exports = {
       plugins: ['testing-library'],
       rules: {
         ...recommendedRules,
+        'testing-library/await-fire-event': 'error',
         'testing-library/no-debug': 'warn',
         'testing/library/no-dom-import': ['error', 'vue'],
       },

lib/rules/await-fire-event.js

@@ -0,0 +1,64 @@
+'use strict';
+
+const { getDocsUrl } = require('../utils');
+
+function isAwaited(node) {
+  return VALID_PARENTS.includes(node.type);
+}
+
+function hasThenProperty(node) {
+  return node.type === 'MemberExpression' && node.property.name === 'then';
+}
+
+function isPromiseResolved(node) {
+  const parent = node.parent.parent;
+
+  // fireEvent.click().then(...)
+  if (parent.type === 'CallExpression') {
+    return hasThenProperty(parent.parent);
+  }
+}
+
+const VALID_PARENTS = [
+  'AwaitExpression',
+  'ArrowFunctionExpression',
+  'ReturnStatement',
+];
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Enforce async fire event methods to be awaited',
+      category: 'Best Practices',
+      recommended: false,
+      url: getDocsUrl('await-fire-event'),
+    },
+    messages: {
+      awaitFireEvent: 'async `fireEvent.{{ methodName }}` must be awaited',
+    },
+    fixable: null,
+    schema: [],
+  },
+
+  create: function(context) {
+    return {
+      'CallExpression > MemberExpression > Identifier[name=fireEvent]'(node) {
+        const fireEventMethodNode = node.parent.property;
+
+        if (
+          !isAwaited(node.parent.parent.parent) &&
+          !isPromiseResolved(fireEventMethodNode)
+        ) {
+          context.report({
+            node: fireEventMethodNode,
+            messageId: 'awaitFireEvent',
+            data: {
+              methodName: fireEventMethodNode.name,
+            },
+          });
+        }
+      },
+    };
+  },
+};

tests/__snapshots__/index.test.js.snap

@@ -53,6 +53,7 @@ Object {
   ],
   "rules": Object {
     "testing-library/await-async-query": "error",
+    "testing-library/await-fire-event": "error",
     "testing-library/no-await-sync-query": "error",
     "testing-library/no-debug": "warn",
     "testing/library/no-dom-import": Array [

tests/lib/rules/await-fire-event.js

@@ -0,0 +1,91 @@
+'use strict';
+
+const rule = require('../../../lib/rules/await-fire-event');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({ parserOptions: { ecmaVersion: 2018 } });
+ruleTester.run('await-fire-event', rule, {
+  valid: [
+    {
+      code: `fireEvent.click`,
+    },
+    {
+      code: `async () => {
+        await fireEvent.click(getByText('Click me'))
+      }
+      `,
+    },
+    {
+      code: `async () => {
+        await fireEvent.focus(getByLabelText('username'))
+        await fireEvent.blur(getByLabelText('username'))
+      }
+      `,
+    },
+    {
+      code: `done => {
+        fireEvent.click(getByText('Click me')).then(() => { done() })
+      }
+      `,
+    },
+    {
+      code: `done => {
+        fireEvent.focus(getByLabelText('username')).then(() => {
+          fireEvent.blur(getByLabelText('username')).then(() => { done() })
+        })
+      }
+      `,
+    },
+    {
+      code: `() => {
+        return fireEvent.click(getByText('Click me'))
+      }
+      `,
+    },
+    {
+      code: `() => fireEvent.click(getByText('Click me'))
+      `,
+    },
+    {
+      code: `function clickUtil() {
+        doSomething()
+        return fireEvent.click(getByText('Click me'))
+      }
+      `,
+    },
+  ],
+
+  invalid: [
+    {
+      code: `() => {
+        fireEvent.click(getByText('Click me'))
+      }
+      `,
+      errors: [
+        {
+          column: 19,
+          messageId: 'awaitFireEvent',
+        },
+      ],
+    },
+    {
+      code: `() => {
+        fireEvent.focus(getByLabelText('username'))
+        fireEvent.blur(getByLabelText('username'))
+      }
+      `,
+      errors: [
+        {
+          line: 2,
+          column: 19,
+          messageId: 'awaitFireEvent',
+        },
+        {
+          line: 3,
+          column: 19,
+          messageId: 'awaitFireEvent',
+        },
+      ],
+    },
+  ],
+});