fix(eslint-plugin): [use-component-selector] applies to template lite…

…rals (#1468)
angular-eslint · Sep 17, 2023 · cbe60d3 · cbe60d3
1 parent b1d07bc
commit cbe60d3
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 2 deletions.
diff --git a/packages/eslint-plugin/docs/rules/use-component-selector.md b/packages/eslint-plugin/docs/rules/use-component-selector.md
@@ -217,6 +217,64 @@ class Test {}
 class Test {}
 ```
 
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/use-component-selector": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```ts
+@Component({
+  selector: "sg-bar-foo"
+})
+class Test {}
+```
+
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/use-component-selector": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```ts
+@Component({
+  selector: `sg-bar-foo`
+})
+class Test {}
+```
+
 </details>
 
 <br>
diff --git a/packages/eslint-plugin/src/rules/use-component-selector.ts b/packages/eslint-plugin/src/rules/use-component-selector.ts
@@ -27,8 +27,8 @@ export default createESLintRule<Options, MessageIds>({
 
         if (
           selector &&
-          ASTUtils.isStringLiteral(selector) &&
-          selector.value.length
+          ((ASTUtils.isStringLiteral(selector) && selector.value.length) ||
+            ASTUtils.isTemplateLiteral(selector))
         ) {
           return;
         }

diff --git a/packages/eslint-plugin/tests/rules/use-component-selector/cases.ts b/packages/eslint-plugin/tests/rules/use-component-selector/cases.ts
@@ -4,11 +4,26 @@ import type { MessageIds } from '../../../src/rules/use-component-selector';
 const messageId: MessageIds = 'useComponentSelector';
 
 export const valid = [
+  // It should succeed with single quotes
   `
     @Component({
       selector: 'sg-bar-foo'
     })
     class Test {}
+`,
+  // It should succeed with double quotes
+  `
+  @Component({
+    selector: "sg-bar-foo"
+  })
+  class Test {}
+`,
+  // It should succeed with template literals
+  `
+    @Component({
+      selector: \`sg-bar-foo\`
+    })
+    class Test {}
 `,
 ];