fix(eslint-plugin-template): false positive conditional complexity in BoundAttribute > Interpolation (#986)

Author: JamesHenry

packages/eslint-plugin-template/docs/rules/conditional-complexity.md

@@ -298,6 +298,32 @@ interface Options {
 
 <br>
 
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/conditional-complexity": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```html
+<div class="col" id="one-two-three-four-five-six-seven-eight-{{9}}"></div>
+```
+
+<br>
+
+---
+
+<br>
+
 #### Custom Config
 
 ```json

packages/eslint-plugin-template/project.json

@@ -62,6 +62,7 @@
     },
     "update-rule-docs": {
       "executor": "@nrwl/workspace:run-commands",
+      "outputs": ["packages/eslint-plugin-template/docs"],
       "options": {
         "parallel": false,
         "commands": [

packages/eslint-plugin-template/src/index.ts

@@ -27,8 +27,8 @@ import bananaInBox, {
 import clickEventsHaveKeyEvents, {
   RULE_NAME as clickEventsHaveKeyEventsRuleName,
 } from './rules/click-events-have-key-events';
-import conditionalСomplexity, {
-  RULE_NAME as conditionalСomplexityRuleName,
+import conditionalComplexity, {
+  RULE_NAME as conditionalComplexityRuleName,
 } from './rules/conditional-complexity';
 import cyclomaticComplexity, {
   RULE_NAME as cyclomaticComplexityRuleName,
@@ -78,7 +78,7 @@ export default {
     [accessibilityTableScopeRuleName]: accessibilityTableScope,
     [accessibilityValidAriaRuleName]: accessibilityValidAria,
     [bananaInBoxRuleName]: bananaInBox,
-    [conditionalСomplexityRuleName]: conditionalСomplexity,
+    [conditionalComplexityRuleName]: conditionalComplexity,
     [clickEventsHaveKeyEventsRuleName]: clickEventsHaveKeyEvents,
     [cyclomaticComplexityRuleName]: cyclomaticComplexity,
     [eqeqeqRuleName]: eqeqeq,

packages/eslint-plugin-template/src/rules/conditional-complexity.ts

@@ -1,13 +1,13 @@
 import type {
   AST,
   ASTWithSource,
-  Interpolation,
   TmplAstBoundAttribute,
 } from '@angular-eslint/bundled-angular-compiler';
 import {
   Binary,
   BindingPipe,
   Conditional,
+  Interpolation,
   Lexer,
   Parser,
 } from '@angular-eslint/bundled-angular-compiler';
@@ -17,7 +17,7 @@ import {
 } from '../utils/create-eslint-rule';
 
 type Options = [{ maxComplexity: number }];
-export type MessageIds = 'conditionalСomplexity';
+export type MessageIds = 'conditionalComplexity';
 export const RULE_NAME = 'conditional-complexity';
 
 const DEFAULT_MAX_COMPLEXITY = 5;
@@ -44,7 +44,7 @@ export default createESLintRule<Options, MessageIds>({
       },
     ],
     messages: {
-      conditionalСomplexity:
+      conditionalComplexity:
         'The conditional complexity {{totalComplexity}} exceeds the defined limit {{maxComplexity}}',
     },
   },
@@ -55,7 +55,7 @@ export default createESLintRule<Options, MessageIds>({
 
     return {
       BoundAttribute(node: TmplAstBoundAttribute & { value: ASTWithSource }) {
-        if (!node.value.source) {
+        if (!node.value.source || node.value.ast instanceof Interpolation) {
           return;
         }
 
@@ -77,7 +77,7 @@ export default createESLintRule<Options, MessageIds>({
             start: sourceCode.getLocFromIndex(start),
             end: sourceCode.getLocFromIndex(end),
           },
-          messageId: 'conditionalСomplexity',
+          messageId: 'conditionalComplexity',
           data: { maxComplexity, totalComplexity },
         });
       },
@@ -98,7 +98,7 @@ export default createESLintRule<Options, MessageIds>({
               start: sourceCode.getLocFromIndex(start),
               end: sourceCode.getLocFromIndex(end),
             },
-            messageId: 'conditionalСomplexity',
+            messageId: 'conditionalComplexity',
             data: { maxComplexity, totalComplexity },
           });
         }

packages/eslint-plugin-template/tests/rules/conditional-complexity/cases.ts

@@ -1,18 +1,20 @@
 import { convertAnnotatedSourceToFailureCase } from '@angular-eslint/utils';
 import type { MessageIds } from '../../../src/rules/conditional-complexity';
 
-const messageId: MessageIds = 'conditionalСomplexity';
+const messageId: MessageIds = 'conditionalComplexity';
 
 export const valid = [
   `
-      <div *ngIf="a === '1' || b === '2' && c.d !== e">Content</div>
-      <div *ngIf="isValid; then thenTemplateRef; else elseTemplateRef">Content</div>
-      <ng-template #thenTemplateRef>thenTemplateRef</ng-template>
-      <ng-template #elseTemplateRef>elseTemplateRef</ng-template>
-      <div [class.mw-100]="test === 7"></div>
-      <div [attr.aria-label]="testing === 'ab' ? 'bc' : 'de'"></div>
-      <div [attr.custom-attr]="'test345' | appPipe"></div>
-    `,
+    <div *ngIf="a === '1' || b === '2' && c.d !== e">Content</div>
+    <div *ngIf="isValid; then thenTemplateRef; else elseTemplateRef">Content</div>
+    <ng-template #thenTemplateRef>thenTemplateRef</ng-template>
+    <ng-template #elseTemplateRef>elseTemplateRef</ng-template>
+    <div [class.mw-100]="test === 7"></div>
+    <div [attr.aria-label]="testing === 'ab' ? 'bc' : 'de'"></div>
+    <div [attr.custom-attr]="'test345' | appPipe"></div>
+  `,
+  // https://github.com/angular-eslint/angular-eslint/issues/863
+  `<div class="col" id="one-two-three-four-five-six-seven-eight-{{9}}"></div>`,
   {
     code: `
         <div *ngIf="a === '3' || (b === '3' && c.d !== '1' && e.f !== '6' && q !== g)">

packages/eslint-plugin/project.json

@@ -56,6 +56,7 @@
     },
     "update-rule-docs": {
       "executor": "@nrwl/workspace:run-commands",
+      "outputs": ["packages/eslint-plugin/docs"],
       "options": {
         "parallel": false,
         "commands": [