fix(eslint-plugin-template): [click-events-have-key-events]: handle a…

…dditional outputs (#1101)
angular-eslint · Sep 18, 2022 · c608cdb · c608cdb
1 parent e25ef92
commit c608cdb
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 2 deletions.
diff --git a/packages/eslint-plugin-template/docs/rules/click-events-have-key-events.md b/packages/eslint-plugin-template/docs/rules/click-events-have-key-events.md
@@ -81,6 +81,33 @@ The rule does not have any configuration options.
 
 #### ❌ Invalid Code
 
+```html
+<div (click)="onClick()" (handleSomething)="handleSomething()"></div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+```
+
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/click-events-have-key-events": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
 ```html
 <header (click)="onClick()"></header>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -333,6 +360,8 @@ The rule does not have any configuration options.
 
 ```html
 <div (click)="onClick()" (keyup)="onKeyup()"></div>
+<div (keyup)="onKeyup()" (click)="onClick()"></div>
+<div (click)="onClick()" (keyup)="onKeyup()" (handleSomething)="handleSomething()"></div>
 ```
 
 <br>

diff --git a/packages/eslint-plugin-template/src/rules/click-events-have-key-events.ts b/packages/eslint-plugin-template/src/rules/click-events-have-key-events.ts
@@ -47,8 +47,9 @@ export default createESLintRule<Options, MessageIds>({
           hasKeyEvent = false;
 
         for (const output of node.outputs) {
-          hasClick = output.name === 'click';
+          hasClick = hasClick || output.name === 'click';
           hasKeyEvent =
+            hasKeyEvent ||
             output.name.startsWith('keyup') ||
             output.name.startsWith('keydown') ||
             output.name.startsWith('keypress');

diff --git a/packages/eslint-plugin-template/tests/rules/click-events-have-key-events/cases.ts b/packages/eslint-plugin-template/tests/rules/click-events-have-key-events/cases.ts
@@ -6,7 +6,11 @@ const messageId: MessageIds = 'clickEventsHaveKeyEvents';
 export const valid = [
   {
     // It should work when click events are associated with key events.
-    code: '<div (click)="onClick()" (keyup)="onKeyup()"></div>',
+    code: `
+        <div (click)="onClick()" (keyup)="onKeyup()"></div>
+        <div (keyup)="onKeyup()" (click)="onClick()"></div>
+        <div (click)="onClick()" (keyup)="onKeyup()" (handleSomething)="handleSomething()"></div>
+      `,
   },
   {
     // It should work when click events are associated with key pseudo events.
@@ -57,6 +61,15 @@ export const invalid = [
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
       `,
   }),
+  convertAnnotatedSourceToFailureCase({
+    messageId,
+    description:
+      'should fail when click is not accompanied with key events and there are additional outputs',
+    annotatedSource: `
+      <div (click)="onClick()" (handleSomething)="handleSomething()"></div>
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    `,
+  }),
   convertAnnotatedSourceToFailureCase({
     messageId,
     description: