feat(eslint-plugin-template): [no-distracting-elements] add fixer (#488)

angular-eslint · May 21, 2021 · 9cefe67 · 9cefe67
1 parent 0b3f9eb
commit 9cefe67
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/packages/eslint-plugin-template/src/rules/no-distracting-elements.ts b/packages/eslint-plugin-template/src/rules/no-distracting-elements.ts
@@ -17,6 +17,7 @@ export default createESLintRule<Options, MessageIds>({
       category: 'Best Practices',
       recommended: false,
     },
+    fixable: 'code',
     schema: [],
     messages: {
       noDistractingElements:
@@ -38,6 +39,8 @@ export default createESLintRule<Options, MessageIds>({
           loc,
           messageId: 'noDistractingElements',
           data: { element },
+          fix: (fixer) =>
+            fixer.removeRange([sourceSpan.start.offset, sourceSpan.end.offset]),
         });
       },
     };

diff --git a/packages/eslint-plugin-template/tests/rules/no-distracting-elements.test.ts b/packages/eslint-plugin-template/tests/rules/no-distracting-elements.test.ts
@@ -12,26 +12,33 @@ import rule, { RULE_NAME } from '../../src/rules/no-distracting-elements';
 const ruleTester = new RuleTester({
   parser: '@angular-eslint/template-parser',
 });
-
 const messageId: MessageIds = 'noDistractingElements';
 
 ruleTester.run(RULE_NAME, rule, {
   valid: ['<div>Valid</div>'],
   invalid: [
     convertAnnotatedSourceToFailureCase({
       messageId,
-      description: 'should fail when distracting element marquee is used',
+      description: 'should fail if `marquee` is used',
       annotatedSource: `
-        <marquee></marquee>
+        <marquee></marquee>{{ test }}
         ~~~~~~~~~~~~~~~~~~~
       `,
+      annotatedOutput: `
+        {{ test }}
+        
+      `,
     }),
     convertAnnotatedSourceToFailureCase({
       messageId,
-      description: 'should fail when distracting element blink is used',
+      description: 'should fail if `blink` is used',
       annotatedSource: `
-        <blink></blink>
-        ~~~~~~~~~~~~~~~
+        <div></div><blink></blink>
+                   ~~~~~~~~~~~~~~~
+      `,
+      annotatedOutput: `
+        <div></div>
+                   
       `,
     }),
   ],