fix(linter): Update unicorn/prefer-query-selector to also catch getElementsByName().

crates/oxc_linter/src/rules/unicorn/prefer_query_selector.rs

@@ -21,15 +21,18 @@ pub struct PreferQuerySelector;
 fn get_preferred_identifier_name(ident_name: &str) -> Option<&'static str> {
     match ident_name {
         "getElementById" => Some("querySelector"),
-        "getElementsByClassName" | "getElementsByTagName" => Some("querySelectorAll"),
+        "getElementsByClassName" | "getElementsByTagName" | "getElementsByName" => {
+            Some("querySelectorAll")
+        }
         _ => None,
     }
 }
 
 declare_oxc_lint!(
     /// ### What it does
     ///
-    /// Prefer `.querySelector()` over `.getElementById()`, `.querySelectorAll()` over `.getElementsByClassName()` and `.getElementsByTagName()`.
+    /// Prefer `.querySelector()` over `.getElementById()`. And prefer `.querySelectorAll()`
+    /// over `.getElementsByClassName()`, `.getElementsByTagName()`, and `.getElementsByName()`.
     ///
     /// ### Why is this bad?
     ///
@@ -44,6 +47,7 @@ declare_oxc_lint!(
     /// document.getElementsByClassName('foo bar');
     /// document.getElementsByTagName('main');
     /// document.getElementsByClassName(fn());
+    /// document.getElementsByName('foo');
     /// ```
     ///
     /// Examples of **correct** code for this rule:
@@ -128,6 +132,10 @@ impl Rule for PreferQuerySelector {
                                 literal_value.split_whitespace().collect::<Vec<_>>().join(" .")
                             )
                         }
+                        "getElementsByName" => {
+                            let inner_quote = if quotes_symbol == '\'' { '"' } else { '\'' };
+                            format!("[name={inner_quote}{literal_value}{inner_quote}]")
+                        }
                         _ => literal_value.to_string(),
                     };
                     let span = property_span.merge(argument_expr.span());
@@ -207,15 +215,14 @@ fn test() {
                 console.log(div.getElementsByTagName("div"));
             }"#,
         "e.getElementById(3)",
-        // TODO: Get these cases passing.
-        // r#"document.getElementsByName("foo");"#,
-        // "document.getElementsByName('foo');",
-        // "document.getElementsByName(`foo`);",
-        // "document.getElementsByName(`${'foo'}`);",
-        // "document.getElementsByName(null);",
-        // r#"document.getElementsByName("");"#,
-        // r#"document.getElementsByName(foo + "bar");"#,
-        // r#"document.getElementsByName("multiple name should be fixable");"#,
+        r#"document.getElementsByName("foo");"#,
+        "document.getElementsByName('foo');",
+        "document.getElementsByName(`foo`);",
+        "document.getElementsByName(`${'foo'}`);",
+        "document.getElementsByName(null);",
+        r#"document.getElementsByName("");"#,
+        r#"document.getElementsByName(foo + "bar");"#,
+        r#"document.getElementsByName("multiple name should be fixable");"#,
     ];
 
     let fix = vec![
@@ -229,11 +236,26 @@ fn test() {
         ("document.getElementById(getId());", "document.getElementById(getId());"),
         ("document.getElementById(`${foo}`);", "document.getElementById(`${foo}`);"),
         ("document.getElementById(searchInputId);", "document.querySelector(`#${searchInputId}`);"),
+        (r#"document.getElementsByName("foo");"#, r#"document.querySelectorAll("[name='foo']");"#),
+        ("document.getElementsByName('foo');", r#"document.querySelectorAll('[name="foo"]');"#),
+        ("document.getElementsByName(`foo`);", "document.querySelectorAll(`[name='foo']`);"),
+        ("document.getElementsByName(null);", "document.querySelectorAll(null);"),
+        (r#"document.getElementsByName("");"#, r#"document.querySelectorAll("");"#),
+        (
+            r#"document.getElementsByName("multiple name should be fixable");"#,
+            r#"document.querySelectorAll("[name='multiple name should be fixable']");"#,
+        ),
+        // We do not fix these.
         (
             "document.getElementsByClassName(foo + \"bar\");",
             "document.getElementsByClassName(foo + \"bar\");",
         ),
         ("document.getElementsByClassName(fn());", "document.getElementsByClassName(fn());"),
+        ("document.getElementsByName(`${'foo'}`);", "document.getElementsByName(`${'foo'}`);"),
+        (
+            r#"document.getElementsByName(foo + "bar");"#,
+            r#"document.getElementsByName(foo + "bar");"#,
+        ),
     ];
 
     Tester::new(PreferQuerySelector::NAME, PreferQuerySelector::PLUGIN, pass, fail)

crates/oxc_linter/src/snapshots/unicorn_prefer_query_selector.snap

@@ -187,3 +187,59 @@ source: crates/oxc_linter/src/tester.rs
    ·   ──────────────
    ╰────
   help: It's better to use the same method to query DOM elements. This helps keep consistency and it lends itself to future improvements (e.g. more specific selectors).
+
+  ⚠ eslint-plugin-unicorn(prefer-query-selector): Prefer `.querySelectorAll()` over `.getElementsByName()`.
+   ╭─[prefer_query_selector.tsx:1:10]
+ 1 │ document.getElementsByName("foo");
+   ·          ─────────────────
+   ╰────
+  help: It's better to use the same method to query DOM elements. This helps keep consistency and it lends itself to future improvements (e.g. more specific selectors).
+
+  ⚠ eslint-plugin-unicorn(prefer-query-selector): Prefer `.querySelectorAll()` over `.getElementsByName()`.
+   ╭─[prefer_query_selector.tsx:1:10]
+ 1 │ document.getElementsByName('foo');
+   ·          ─────────────────
+   ╰────
+  help: It's better to use the same method to query DOM elements. This helps keep consistency and it lends itself to future improvements (e.g. more specific selectors).
+
+  ⚠ eslint-plugin-unicorn(prefer-query-selector): Prefer `.querySelectorAll()` over `.getElementsByName()`.
+   ╭─[prefer_query_selector.tsx:1:10]
+ 1 │ document.getElementsByName(`foo`);
+   ·          ─────────────────
+   ╰────
+  help: It's better to use the same method to query DOM elements. This helps keep consistency and it lends itself to future improvements (e.g. more specific selectors).
+
+  ⚠ eslint-plugin-unicorn(prefer-query-selector): Prefer `.querySelectorAll()` over `.getElementsByName()`.
+   ╭─[prefer_query_selector.tsx:1:10]
+ 1 │ document.getElementsByName(`${'foo'}`);
+   ·          ─────────────────
+   ╰────
+  help: It's better to use the same method to query DOM elements. This helps keep consistency and it lends itself to future improvements (e.g. more specific selectors).
+
+  ⚠ eslint-plugin-unicorn(prefer-query-selector): Prefer `.querySelectorAll()` over `.getElementsByName()`.
+   ╭─[prefer_query_selector.tsx:1:10]
+ 1 │ document.getElementsByName(null);
+   ·          ─────────────────
+   ╰────
+  help: It's better to use the same method to query DOM elements. This helps keep consistency and it lends itself to future improvements (e.g. more specific selectors).
+
+  ⚠ eslint-plugin-unicorn(prefer-query-selector): Prefer `.querySelectorAll()` over `.getElementsByName()`.
+   ╭─[prefer_query_selector.tsx:1:10]
+ 1 │ document.getElementsByName("");
+   ·          ─────────────────
+   ╰────
+  help: It's better to use the same method to query DOM elements. This helps keep consistency and it lends itself to future improvements (e.g. more specific selectors).
+
+  ⚠ eslint-plugin-unicorn(prefer-query-selector): Prefer `.querySelectorAll()` over `.getElementsByName()`.
+   ╭─[prefer_query_selector.tsx:1:10]
+ 1 │ document.getElementsByName(foo + "bar");
+   ·          ─────────────────
+   ╰────
+  help: It's better to use the same method to query DOM elements. This helps keep consistency and it lends itself to future improvements (e.g. more specific selectors).
+
+  ⚠ eslint-plugin-unicorn(prefer-query-selector): Prefer `.querySelectorAll()` over `.getElementsByName()`.
+   ╭─[prefer_query_selector.tsx:1:10]
+ 1 │ document.getElementsByName("multiple name should be fixable");
+   ·          ─────────────────
+   ╰────
+  help: It's better to use the same method to query DOM elements. This helps keep consistency and it lends itself to future improvements (e.g. more specific selectors).