fix(eslint-plugin-template): [eqeqeq] Calculate offset to find true absolute source span

packages/eslint-plugin-template/docs/rules/eqeqeq.md

@@ -75,6 +75,33 @@ interface Options {
 
 <br>
 
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/eqeqeq": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
+```html
+{{ 'null' ==  test }}
+   ~~~~~~~~~~~~~~~
+```
+
+<br>
+
+---
+
+<br>
+
 #### Custom Config
 
 ```json
@@ -105,6 +132,63 @@ interface Options {
 
 <br>
 
+#### Custom Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/eqeqeq": [
+      "error",
+      {
+        "allowNullOrUndefined": true
+      }
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
+```html
+<div [attr.disabled]="test !=  'undefined' && null == '3'"></div>
+                      ~~~~~~~~~~~~~~~~~~~~
+```
+
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/eqeqeq": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
+```html
+<div [prop]="condition1 === 'value1' ? true : (condition2 != 'value2' ? true : false)}"></div>
+                                               ~~~~~~~~~~~~~~~~~~~~~~
+```
+
+<br>
+
+---
+
+<br>
+
 #### Default Config
 
 ```json
@@ -229,6 +313,33 @@ interface Options {
 
 #### ❌ Invalid Code
 
+```html
+{{ c > d ? a   !=     b : 'hey!' }}
+           ~~~~~~~~~~~~
+```
+
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/eqeqeq": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
 ```html
 {{ c > d ? 'hey!' : a == false }}
                     ~~~~~~~~~~

packages/eslint-plugin-template/src/rules/eqeqeq.ts

@@ -2,6 +2,7 @@
 import {
   ASTWithSource,
   LiteralPrimitive,
+  Interpolation,
 } from '@angular-eslint/bundled-angular-compiler';
 import { ensureTemplateParser } from '@angular-eslint/utils';
 import type { TSESLint } from '@typescript-eslint/utils';
@@ -74,14 +75,22 @@
           ...(isStringNonNumericValue(left) || isStringNonNumericValue(right)
             ? {
                 fix: (fixer) =>
-                  getFix({ node, left, right, start, end, fixer }),
+                  getFix({ node, left, right, start, end, sourceCode, fixer }),
               }
             : {
                 suggest: [
                   {
                     messageId: 'suggestStrictEquality',
                     fix: (fixer) =>
-                      getFix({ node, left, right, start, end, fixer }),
+                      getFix({
+                        node,
+                        left,
+                        right,
+                        start,
+                        end,
+                        sourceCode,
+                        fixer,
+                      }),
                     data,
                   },
                 ],
@@ -102,25 +111,46 @@
   right,
   start,
   end,
+  sourceCode,
   fixer,
 }: {
   node: Binary;
   left: AST;
   right: AST;
   start: number;
   end: number;
+  sourceCode: Readonly<TSESLint.SourceCode>;
   fixer: TSESLint.RuleFixer;
 }): TSESLint.RuleFix | null => {
-  const { source } = getNearestNodeFrom(node, isASTWithSource) ?? {};
+  const { source, ast } = getNearestNodeFrom(
+    node,
+    isASTWithSource,
+  ) as ASTWithSource & { ast: unknown };
 
   if (!source) return null;
 
+  let startOffet = 0;
+  while (!isInterpolation(ast) && isLeadingTriviaChar(source[startOffet])) {
+    startOffet++;
+  }
+
+  const endRange = end - startOffet - getSpanLength(right) - 1;
+  let eqOffset = 0;
+
+  while (sourceCode.text[endRange - eqOffset] !== '=') {
+    eqOffset++;
+  }
+
   return fixer.insertTextAfterRange(
-    [start + getSpanLength(left) + 1, end - getSpanLength(right) - 1],
+    [start + getSpanLength(left) + 1, endRange - eqOffset],
     '=',
   );
 };
 
+function isLeadingTriviaChar(char: string) {
+  return char === '\n' || char === ' ';
+}
+
 function isASTWithSource(node: unknown): node is ASTWithSource {
   return node instanceof ASTWithSource;
 }
@@ -129,6 +159,10 @@
   return node instanceof LiteralPrimitive;
 }
 
+function isInterpolation(node: unknown): node is Interpolation {
+  return node instanceof Interpolation;
+}
+
 function isNumeric(value: unknown): value is number | string {
   return (
     !Number.isNaN(Number.parseFloat(String(value))) &&

packages/eslint-plugin-template/tests/rules/eqeqeq/cases.ts

@@ -34,6 +34,23 @@ export const invalid = [
            ~~~~~~~~~~~~~~~
       `,
   }),
+  convertAnnotatedSourceToFailureCase({
+    description:
+      'it should fail if the operation (surrounded by additional whitespace) is not strict within interpolation',
+    annotatedSource: `
+        {{ 'null' ==  test }}
+           ~~~~~~~~~~~~~~~
+      `,
+    messageId,
+    data: {
+      actualOperation: '==',
+      expectedOperation: '===',
+    },
+    annotatedOutput: `
+        {{ 'null' ===  test }}
+           ~~~~~~~~~~~~~~~~
+      `,
+  }),
   convertAnnotatedSourceToFailureCase({
     description:
       'it should fail if the operation is not strict within attribute directive',
@@ -52,6 +69,41 @@ export const invalid = [
                               ~~~~~~~~~~~~~~~~~~~~
       `,
   }),
+  convertAnnotatedSourceToFailureCase({
+    description:
+      'it should fail if the operation (surrounded by additional whitespace) is not strict within attribute directive',
+    annotatedSource: `
+        <div [attr.disabled]="test !=  'undefined' && null == '3'"></div>
+                              ~~~~~~~~~~~~~~~~~~~~
+      `,
+    messageId,
+    data: {
+      actualOperation: '!=',
+      expectedOperation: '!==',
+    },
+    options: [{ allowNullOrUndefined: true }],
+    annotatedOutput: `
+        <div [attr.disabled]="test !==  'undefined' && null == '3'"></div>
+                              ~~~~~~~~~~~~~~~~~~~~~
+      `,
+  }),
+  convertAnnotatedSourceToFailureCase({
+    description:
+      'it should fail if the operation is not strict within attribute directive with nested ternary',
+    annotatedSource: `
+      <div [prop]="condition1 === 'value1' ? true : (condition2 != 'value2' ? true : false)}"></div>
+                                                     ~~~~~~~~~~~~~~~~~~~~~~
+      `,
+    messageId,
+    data: {
+      actualOperation: '!=',
+      expectedOperation: '!==',
+    },
+    annotatedOutput: `
+      <div [prop]="condition1 === 'value1' ? true : (condition2 !== 'value2' ? true : false)}"></div>
+                                                     ~~~~~~~~~~~~~~~~~~~~~~~
+      `,
+  }),
   convertAnnotatedSourceToFailureCase({
     description:
       'it should fail if the operation is not strict within structural directive',
@@ -156,6 +208,32 @@ export const invalid = [
       },
     ],
   }),
+  convertAnnotatedSourceToFailureCase({
+    description:
+      'it should fail if the operation (surrounded by additional whitespace) is not strict within conditional (trueExp)',
+    annotatedSource: `
+        {{ c > d ? a   !=     b : 'hey!' }}
+                   ~~~~~~~~~~~~
+      `,
+    messageId,
+    data: {
+      actualOperation: '!=',
+      expectedOperation: '!==',
+    },
+    suggestions: [
+      {
+        messageId: suggestStrictEquality,
+        output: `
+        {{ c > d ? a   !==     b : 'hey!' }}
+
+      `,
+        data: {
+          actualOperation: '!=',
+          expectedOperation: '!==',
+        },
+      },
+    ],
+  }),
   convertAnnotatedSourceToFailureCase({
     description:
       'it should fail if the operation is not strict within conditional (falseExp)',