fix(eslint-plugin-template): fix fixer of inline templates (#1472)

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

@@ -257,7 +257,7 @@ export function postprocessComponentFile(
             message.endLine + rangeData.lineAndCharacter.start.line;
 
           if (message.fix) {
-            const startOffset = rangeData.range[0];
+            const startOffset = rangeData.range[0] + 1;
             message.fix.range = [
               startOffset + message.fix.range[0],
               startOffset + message.fix.range[1],

packages/eslint-plugin-template/tests/processors.test.ts

@@ -467,5 +467,47 @@ describe('extract-inline-html', () => {
         });
       });
     });
+
+    describe('messages from inline template HTML', () => {
+      it('should adjust message locations from the inline templates', () => {
+        const fileContent = `
+          @Component({
+            template: '<div ([ngModel])="value"></div>',
+          })
+          export class Component {
+            value = '';
+          }
+        `;
+        processors['extract-inline-html'].preprocess(
+          fileContent,
+          'test.component.ts',
+        );
+        const mockError = {
+          ruleId: 'banana-in-box',
+          severity: 2,
+          message: 'Invalid binding syntax. Use [(expr)] instead',
+          line: 1,
+          column: 28,
+          nodeType: 'Literal',
+          messageId: 'bananaInBox',
+          endLine: 1,
+          endColumn: 39,
+          fix: { range: [5, 16], text: '[(ngModel)]' },
+        };
+        const expectedMessage = {
+          ...mockError,
+          line: 3,
+          endLine: 3,
+          fix: { range: [52, 63], text: '[(ngModel)]' },
+        };
+
+        expect(
+          processors['extract-inline-html'].postprocess(
+            [[], [mockError]],
+            'test.component.ts',
+          ),
+        ).toEqual([expectedMessage]);
+      });
+    });
   });
 });

packages/integration-tests/suites/4/project.json

@@ -0,0 +1,24 @@
+{
+  "name": "integration-tests-suite-4",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "type": "library",
+  "targets": {
+    "integration-test": {
+      "executor": "@angular-eslint/nx-plugin:integration-test-suite",
+      "options": {
+        "cwd": "packages/integration-tests",
+        "testFilePath": "tests/inline-template-fixer.test.ts"
+      }
+    }
+  },
+  "implicitDependencies": [
+    "integration-tests",
+    "builder",
+    "bundled-angular-compiler",
+    "eslint-plugin",
+    "eslint-plugin-template",
+    "schematics",
+    "template-parser",
+    "utils"
+  ]
+}

packages/integration-tests/tests/__snapshots__/inline-template-fixer.test.ts.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`inline-template-fixer should generate the expected inline template fixer result 1`] = `
+"
+import { Component } from '@angular/core';
+
+@Component({
+  template: \`
+    <div></div> <!-- no autofocus -->
+    {{ '' }} <!-- no-distracting-elements -->
+    <div></div> <!-- table-scope -->
+  \`
+})
+export class TestComponent {}
+"
+`;

packages/integration-tests/tests/inline-template-fixer.test.ts

@@ -0,0 +1,51 @@
+import {
+  FIXTURES_DIR,
+  LONG_TIMEOUT_MS,
+  runNgAdd,
+  runNgNew,
+} from '../utils/local-registry-process';
+import path from 'path';
+import { setWorkspaceRoot, workspaceRoot } from 'nx/src/utils/workspace-root';
+import fs from 'fs';
+import { runLintFix } from '../utils/run-lint';
+
+const fixtureDirectory = 'inline-template-fixer';
+
+const inlineTemplateFileContent = `
+import { Component } from '@angular/core';
+
+@Component({
+  template: \`
+    <div autofocus></div> <!-- no autofocus -->
+    <marquee></marquee>{{ '' }} <!-- no-distracting-elements -->
+    <div scope></div> <!-- table-scope -->
+  \`
+})
+export class TestComponent {}
+`;
+
+describe(fixtureDirectory, () => {
+  jest.setTimeout(LONG_TIMEOUT_MS);
+
+  beforeEach(async () => {
+    process.chdir(FIXTURES_DIR);
+    await runNgNew(fixtureDirectory);
+    process.env.NX_DAEMON = 'false';
+    process.env.NX_CACHE_PROJECT_GRAPH = 'false';
+
+    const workspaceRoot = path.join(FIXTURES_DIR, fixtureDirectory);
+    process.chdir(workspaceRoot);
+    process.env.NX_WORKSPACE_ROOT_PATH = workspaceRoot;
+    setWorkspaceRoot(workspaceRoot);
+
+    await runNgAdd();
+  });
+
+  it('should generate the expected inline template fixer result', async () => {
+    const testFilePath = path.join(workspaceRoot, 'src', 'test.component.ts');
+    fs.writeFileSync(testFilePath, inlineTemplateFileContent);
+    await runLintFix(fixtureDirectory);
+    const fileContent = fs.readFileSync(testFilePath, 'utf8');
+    expect(fileContent).toMatchSnapshot();
+  });
+});

packages/integration-tests/utils/run-lint.ts

@@ -44,3 +44,16 @@ export async function runLint(directory: string): Promise<string | undefined> {
     return normalizeOutput(error.stdout || error);
   }
 }
+
+export async function runLintFix(directory: string): Promise<void> {
+  const subprocess = execa('npx', ['ng', 'lint', '--fix'], {
+    cwd: path.join(FIXTURES_DIR, directory),
+  });
+
+  /* eslint-disable @typescript-eslint/no-non-null-assertion */
+  subprocess.stdout!.pipe(process.stdout);
+  subprocess.stderr!.pipe(process.stderr);
+  /* eslint-enable @typescript-eslint/no-non-null-assertion */
+
+  await subprocess;
+}