test(eslint-plugin-template): add test cases for prefer-template-literal reported issues (#2460)

JamesHenry · web-flow · commit 62b3a4f220e8 · 2025-05-26T15:22:24.000+04:00
diff --git a/packages/eslint-plugin-template/docs/rules/prefer-template-literal.md b/packages/eslint-plugin-template/docs/rules/prefer-template-literal.md
@@ -1842,6 +1842,60 @@ The rule does not have any configuration options.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ```
 
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/prefer-template-literal": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
+```html
+<a [href]="'https://example.com/very-long-url-path-that-is-quite-long' + variable">Test</a>
+           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+```
+
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/prefer-template-literal": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
+```html
+<a [href]="'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' + example">Test</a>
+           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+```
+
 </details>
 
 <br>
diff --git a/packages/eslint-plugin-template/tests/rules/prefer-template-literal/cases.ts b/packages/eslint-plugin-template/tests/rules/prefer-template-literal/cases.ts
@@ -892,4 +892,54 @@ export const invalid: readonly InvalidTestCase<MessageIds, Options>[] = [
            
       `,
   }),
+
+  // Test cases for reported bugs
+
+  // Bug 1: Simple long string test case
+  convertAnnotatedSourceToFailureCase({
+    messageId,
+    description: 'should fix concatenation with long URL string',
+    annotatedSource: `
+        <a [href]="'https://example.com/very-long-url-path-that-is-quite-long' + variable">Test</a>
+                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+      `,
+    annotatedOutput: `
+        <a [href]="\`https://example.com/very-long-url-path-that-is-quite-long\${variable}\`">Test</a>
+                   
+      `,
+  }),
+
+  // Test cases for specific reported bugs that currently fail
+
+  // Test case 1: Add a simple case with the actual failing 108-character string
+  convertAnnotatedSourceToFailureCase({
+    messageId,
+    description: 'should fix exactly 108 char string (reproduces bug)',
+    annotatedSource: `
+        <a [href]="'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' + example">Test</a>
+                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+      `,
+    annotatedOutput: `
+        <a [href]="\`xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\${example}\`">Test</a>
+                   
+      `,
+  }),
+
+  // Test case demonstrating multiple autofix passes for chained concatenations
+  // convertAnnotatedSourceToFailureCase({
+  //   messageId,
+  //   description:
+  //     'should handle chained concatenations of literals requiring multiple autofix passes',
+  //   annotatedSource: `
+  //       {{ 'first' + 'second' + 'third' }}
+  //          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  //     `,
+  //   annotatedOutputs: [
+  //     // TODO: this is where we should end up for this source, but what should the interim fixes be?
+  //     `
+  //       {{ 'firstsecondthird' }}
+
+  //     `,
+  //   ],
+  // }),
 ];
