feat(no-node-access): disallow DOM event methods (#1023)

Closes #752

Author: y-hsgw

docs/rules/no-node-access.md

@@ -4,11 +4,11 @@
 
 <!-- end auto-generated rule header -->
 
-The Testing Library already provides methods for querying DOM elements.
+Disallow direct access or manipulation of DOM nodes in favor of Testing Library's user-centric APIs.
 
 ## Rule Details
 
-This rule aims to disallow DOM traversal using native HTML methods and properties, such as `closest`, `lastChild` and all that returns another Node element from an HTML tree.
+This rule aims to disallow direct access and manipulation of DOM nodes using native HTML properties and methods — including traversal (e.g. `closest`, `lastChild`) as well as direct actions (e.g. `click()`, `focus()`). Use Testing Library’s queries and userEvent APIs instead.
 
 Examples of **incorrect** code for this rule:
 
@@ -21,6 +21,12 @@ screen.getByText('Submit').closest('button'); // chaining with Testing Library m
 ```js
 import { screen } from '@testing-library/react';
 
+screen.getByText('Submit').click();
+```
+
+```js
+import { screen } from '@testing-library/react';
+
 const buttons = screen.getAllByRole('button');
 expect(buttons[1].lastChild).toBeInTheDocument();
 ```
@@ -41,6 +47,12 @@ const button = screen.getByRole('button');
 expect(button).toHaveTextContent('submit');
 ```
 
+```js
+import { screen } from '@testing-library/react';
+
+userEvent.click(screen.getByText('Submit'));
+```
+
 ```js
 import { render, within } from '@testing-library/react';
 

lib/rules/no-node-access.ts

@@ -1,12 +1,21 @@
 import { TSESTree, ASTUtils } from '@typescript-eslint/utils';
 
 import { createTestingLibraryRule } from '../create-testing-library-rule';
-import { ALL_RETURNING_NODES } from '../utils';
+import {
+	ALL_RETURNING_NODES,
+	EVENT_HANDLER_METHODS,
+	EVENTS_SIMULATORS,
+} from '../utils';
 
 export const RULE_NAME = 'no-node-access';
 export type MessageIds = 'noNodeAccess';
 export type Options = [{ allowContainerFirstChild: boolean }];
 
+const ALL_PROHIBITED_MEMBERS = [
+	...ALL_RETURNING_NODES,
+	...EVENT_HANDLER_METHODS,
+] as const;
+
 export default createTestingLibraryRule<Options, MessageIds>({
 	name: RULE_NAME,
 	meta: {
@@ -56,11 +65,15 @@ export default createTestingLibraryRule<Options, MessageIds>({
 				? node.property.name
 				: null;
 
+			const objectName = ASTUtils.isIdentifier(node.object)
+				? node.object.name
+				: null;
 			if (
 				propertyName &&
-				ALL_RETURNING_NODES.some(
+				ALL_PROHIBITED_MEMBERS.some(
 					(allReturningNode) => allReturningNode === propertyName
-				)
+				) &&
+				!EVENTS_SIMULATORS.some((simulator) => simulator === objectName)
 			) {
 				if (allowContainerFirstChild && propertyName === 'firstChild') {
 					return;

lib/utils/index.ts

@@ -114,6 +114,14 @@ const METHODS_RETURNING_NODES = [
 	'querySelectorAll',
 ] as const;
 
+const EVENT_HANDLER_METHODS = [
+	'click',
+	'focus',
+	'blur',
+	'select',
+	'submit',
+] as const;
+
 const ALL_RETURNING_NODES = [
 	...PROPERTIES_RETURNING_NODES,
 	...METHODS_RETURNING_NODES,
@@ -147,4 +155,5 @@ export {
 	ALL_RETURNING_NODES,
 	PRESENCE_MATCHERS,
 	ABSENCE_MATCHERS,
+	EVENT_HANDLER_METHODS,
 };

tests/lib/rules/no-node-access.test.ts

@@ -1,11 +1,17 @@
-import { type TSESLint } from '@typescript-eslint/utils';
+import { InvalidTestCase, ValidTestCase } from '@typescript-eslint/rule-tester';
 
-import rule, { RULE_NAME, Options } from '../../../lib/rules/no-node-access';
+import rule, {
+	RULE_NAME,
+	Options,
+	MessageIds,
+} from '../../../lib/rules/no-node-access';
+import { EVENT_HANDLER_METHODS, EVENTS_SIMULATORS } from '../../../lib/utils';
 import { createRuleTester } from '../test-utils';
 
 const ruleTester = createRuleTester();
 
-type ValidTestCase = TSESLint.ValidTestCase<Options>;
+type RuleValidTestCase = ValidTestCase<Options>;
+type RuleInvalidTestCase = InvalidTestCase<MessageIds, Options>;
 
 const SUPPORTED_TESTING_FRAMEWORKS = [
 	'@testing-library/angular',
@@ -15,7 +21,7 @@ const SUPPORTED_TESTING_FRAMEWORKS = [
 ];
 
 ruleTester.run(RULE_NAME, rule, {
-	valid: SUPPORTED_TESTING_FRAMEWORKS.flatMap<ValidTestCase>(
+	valid: SUPPORTED_TESTING_FRAMEWORKS.flatMap<RuleValidTestCase>(
 		(testingFramework) => [
 			{
 				code: `
@@ -100,7 +106,7 @@ ruleTester.run(RULE_NAME, rule, {
 				code: `/* related to issue #386 fix
 				* now all node accessing properties (listed in lib/utils/index.ts, in PROPERTIES_RETURNING_NODES)
 				* will not be reported by this rule because anything props.something won't be reported.
-				*/ 
+				*/
 				import { screen } from '${testingFramework}';
 				function ComponentA(props) {
 					if (props.firstChild) {
@@ -142,21 +148,29 @@ ruleTester.run(RULE_NAME, rule, {
 				// Example from discussions in issue #386
 				code: `
 				import { render } from '${testingFramework}';
-				
+
 				function Wrapper({ children }) {
 					// this should NOT be reported
 					if (children) {
 					  // ...
 					}
-				  
+
 					// this should NOT be reported
 					return <div className="wrapper-class">{children}</div>
 				  };
-	
+
 				render(<Wrapper><SomeComponent /></Wrapper>);
 				expect(screen.getByText('SomeComponent')).toBeInTheDocument();
 				`,
 			},
+			...EVENTS_SIMULATORS.map((simulator) => ({
+				code: `
+        import { screen } from '${testingFramework}';
+
+        const buttonText = screen.getByText('submit');
+				${simulator}.click(buttonText);
+      `,
+			})),
 		]
 	),
 	invalid: SUPPORTED_TESTING_FRAMEWORKS.flatMap((testingFramework) => [
@@ -395,5 +409,24 @@ ruleTester.run(RULE_NAME, rule, {
 				},
 			],
 		},
+		...EVENT_HANDLER_METHODS.map<RuleInvalidTestCase>((method) => ({
+			code: `
+        import { screen } from '${testingFramework}';
+
+        const button = document.getElementById('submit-btn').${method}();
+      `,
+			errors: [
+				{
+					line: 4,
+					column: 33,
+					messageId: 'noNodeAccess',
+				},
+				{
+					line: 4,
+					column: 62,
+					messageId: 'noNodeAccess',
+				},
+			],
+		})),
 	]),
 });