Merge pull request #900 from openSUSE/fix-listsearch

[web] Make search of selectors case-insensitive
agama-project · Dec 1, 2023 · 3beaef4 · 3beaef4
2 parents 04fa42e + 9497aae
commit 3beaef4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 22 deletions.
diff --git a/web/src/components/core/ListSearch.jsx b/web/src/components/core/ListSearch.jsx
@@ -25,11 +25,13 @@ import { _ } from "~/i18n";
 import { noop, useDebounce } from "~/utils";
 
 const search = (elements, term) => {
+  const value = term.toLowerCase();
+
   const match = (element) => {
     return Object.values(element)
       .join('')
       .toLowerCase()
-      .includes(term);
+      .includes(value);
   };
 
   return elements.filter(match);

diff --git a/web/src/components/core/ListSearch.test.jsx b/web/src/components/core/ListSearch.test.jsx
@@ -25,10 +25,10 @@ import { plainRender } from "~/test-utils";
 import { ListSearch } from "~/components/core";
 
 const fruits = [
-  { name: "apple", color: "red", size: "medium" },
-  { name: "banana", color: "yellow", size: "medium" },
-  { name: "grape", color: "green", size: "small" },
-  { name: "pear", color: "green", size: "medium" }
+  { name: "Apple", color: "red", size: "medium" },
+  { name: "Banana", color: "yellow", size: "medium" },
+  { name: "Grape", color: "green", size: "small" },
+  { name: "Pear", color: "green", size: "medium" }
 ];
 
 const FruitList = ({ fruits }) => {
@@ -44,7 +44,7 @@ const FruitList = ({ fruits }) => {
   );
 };
 
-it("searches for elements matching the given text", async () => {
+it("searches for elements matching the given term (case-insensitive)", async () => {
   const { user } = plainRender(<FruitList fruits={fruits} />);
 
   const searchInput = screen.getByRole("search");
@@ -54,47 +54,47 @@ it("searches for elements matching the given text", async () => {
   await waitFor(() => (
     expect(screen.queryByRole("option", { name: /grape/ })).not.toBeInTheDocument())
   );
-  screen.getByRole("option", { name: /apple/ });
-  screen.getByRole("option", { name: /banana/ });
-  screen.getByRole("option", { name: /pear/ });
+  screen.getByRole("option", { name: "Apple" });
+  screen.getByRole("option", { name: "Banana" });
+  screen.getByRole("option", { name: "Pear" });
 
   // Search for "green" fruit
   await user.clear(searchInput);
-  await user.type(searchInput, "green");
+  await user.type(searchInput, "Green");
   await waitFor(() => (
-    expect(screen.queryByRole("option", { name: /apple/ })).not.toBeInTheDocument())
+    expect(screen.queryByRole("option", { name: "Apple" })).not.toBeInTheDocument())
   );
   await waitFor(() => (
-    expect(screen.queryByRole("option", { name: /banana/ })).not.toBeInTheDocument())
+    expect(screen.queryByRole("option", { name: "Banana" })).not.toBeInTheDocument())
   );
-  screen.getByRole("option", { name: /grape/ });
-  screen.getByRole("option", { name: /pear/ });
+  screen.getByRole("option", { name: "Grape" });
+  screen.getByRole("option", { name: "Pear" });
 
   // Search for known fruit
   await user.clear(searchInput);
   await user.type(searchInput, "ap");
   await waitFor(() => (
-    expect(screen.queryByRole("option", { name: /banana/ })).not.toBeInTheDocument())
+    expect(screen.queryByRole("option", { name: "Banana" })).not.toBeInTheDocument())
   );
   await waitFor(() => (
-    expect(screen.queryByRole("option", { name: /pear/ })).not.toBeInTheDocument())
+    expect(screen.queryByRole("option", { name: "Pear" })).not.toBeInTheDocument())
   );
-  screen.getByRole("option", { name: /apple/ });
-  screen.getByRole("option", { name: /grape/ });
+  screen.getByRole("option", { name: "Apple" });
+  screen.getByRole("option", { name: "Grape" });
 
   // Search for unknown fruit
   await user.clear(searchInput);
   await user.type(searchInput, "tomato");
   await waitFor(() => (
-    expect(screen.queryByRole("option", { name: /apple/ })).not.toBeInTheDocument())
+    expect(screen.queryByRole("option", { name: "Apple" })).not.toBeInTheDocument())
   );
   await waitFor(() => (
-    expect(screen.queryByRole("option", { name: /banana/ })).not.toBeInTheDocument())
+    expect(screen.queryByRole("option", { name: "Banana" })).not.toBeInTheDocument())
   );
   await waitFor(() => (
-    expect(screen.queryByRole("option", { name: /grape/ })).not.toBeInTheDocument())
+    expect(screen.queryByRole("option", { name: "Grape" })).not.toBeInTheDocument())
   );
   await waitFor(() => (
-    expect(screen.queryByRole("option", { name: /pear/ })).not.toBeInTheDocument())
+    expect(screen.queryByRole("option", { name: "Pear" })).not.toBeInTheDocument())
   );
 });