feat: support linting html in template literals in no-abstract-roles (#…

…233)
yeonjuan · Nov 24, 2024 · 4ad030a · 4ad030a
1 parent fa012af
commit 4ad030a
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 20 deletions.
diff --git a/packages/eslint-plugin/lib/rules/no-abstract-roles.js b/packages/eslint-plugin/lib/rules/no-abstract-roles.js
@@ -7,6 +7,7 @@
 
 const { RULE_CATEGORY } = require("../constants");
 const { findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
@@ -48,24 +49,27 @@ module.exports = {
   },
 
   create(context) {
-    return {
-      /**
-       *
-       * @param {TagNode | ScriptTagNode | StyleTagNode} node
-       */
-      [["Tag", "ScriptTag", "StyleTag"].join(",")](node) {
-        const roleAttr = findAttr(node, "role");
-        if (
-          roleAttr &&
-          roleAttr.value &&
-          ABSTRACT_ROLE_SET.has(roleAttr.value.value)
-        ) {
-          context.report({
-            messageId: MESSAGE_IDS.UNEXPECTED,
-            node: roleAttr,
-          });
-        }
-      },
-    };
+    /**
+     * @param {TagNode | ScriptTagNode | StyleTagNode} node
+     */
+    function check(node) {
+      const roleAttr = findAttr(node, "role");
+      if (
+        roleAttr &&
+        roleAttr.value &&
+        ABSTRACT_ROLE_SET.has(roleAttr.value.value)
+      ) {
+        context.report({
+          messageId: MESSAGE_IDS.UNEXPECTED,
+          node: roleAttr,
+        });
+      }
+    }
+
+    return createVisitors(context, {
+      Tag: check,
+      ScriptTag: check,
+      StyleTag: check,
+    });
   },
 };
diff --git a/packages/eslint-plugin/tests/rules/no-abstract-roles.test.js b/packages/eslint-plugin/tests/rules/no-abstract-roles.test.js
@@ -2,8 +2,9 @@ const createRuleTester = require("../rule-tester");
 const rule = require("../../lib/rules/no-abstract-roles");
 
 const ruleTester = createRuleTester();
+const templateRuleTester = createRuleTester("espree");
 
-ruleTester.run("id-naming-convention", rule, {
+ruleTester.run("no-abstract-roles", rule, {
   valid: [
     {
       code: `<div role="any"> </div>`,
@@ -20,3 +21,21 @@ ruleTester.run("id-naming-convention", rule, {
     },
   ],
 });
+
+templateRuleTester.run("[template] no-abstract-roles", rule, {
+  valid: [
+    {
+      code: `html\`<div role="any"> </div>\`;`,
+    },
+  ],
+  invalid: [
+    {
+      code: `html\`<img role="command">\`;`,
+      errors: [
+        {
+          message: "Unexpected use of an abstract role.",
+        },
+      ],
+    },
+  ],
+});