From c25f84e6bbc175cd8d4d875fc6d5ab4299a4bc4d Mon Sep 17 00:00:00 2001
From: Cameron Roberts <cameronldroberts@gmail.com>
Date: Sun, 17 Aug 2025 23:46:16 +0100
Subject: [PATCH] feat: adjust UT to have better test case

---
 client/src/components/ListPane.tsx               |  3 +++
 .../src/components/__tests__/ListPane.test.tsx   | 16 ++++++++--------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/client/src/components/ListPane.tsx b/client/src/components/ListPane.tsx
index 296fb753..09c9f57d 100644
--- a/client/src/components/ListPane.tsx
+++ b/client/src/components/ListPane.tsx
@@ -57,6 +57,8 @@ const ListPane = <T extends object>({
           <h3 className="font-semibold dark:text-white">{title}</h3>
           <div className="relative flex items-center">
             <button
+              name="search"
+              aria-label="Search"
               onClick={handleSearchClick}
               className={`p-2 hover:bg-gray-100 dark:hover:bg-secondary rounded-md transition-all duration-300 ease-in-out ${
                 isSearchExpanded
@@ -78,6 +80,7 @@ const ListPane = <T extends object>({
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none z-10" />
                 <Input
                   ref={searchInputRef}
+                  name="search"
                   type="text"
                   placeholder="Search..."
                   value={searchQuery}
diff --git a/client/src/components/__tests__/ListPane.test.tsx b/client/src/components/__tests__/ListPane.test.tsx
index 672bad04..4db7ce00 100644
--- a/client/src/components/__tests__/ListPane.test.tsx
+++ b/client/src/components/__tests__/ListPane.test.tsx
@@ -73,7 +73,7 @@ describe("ListPane", () => {
     it("should show search icon initially", () => {
       renderListPane();
 
-      const searchButton = screen.getByRole("button", { name: "" });
+      const searchButton = screen.getByRole("button", { name: "Search" });
       expect(searchButton).toBeInTheDocument();
       expect(searchButton.querySelector("svg")).toBeInTheDocument();
     });
@@ -81,7 +81,7 @@ describe("ListPane", () => {
     it("should expand search input when search icon is clicked", async () => {
       renderListPane();
 
-      const searchButton = screen.getByRole("button", { name: "" });
+      const searchButton = screen.getByRole("button", { name: "Search" });
       await act(async () => {
         fireEvent.click(searchButton);
       });
@@ -100,7 +100,7 @@ describe("ListPane", () => {
     it("should filter items based on search query", async () => {
       renderListPane();
 
-      const searchButton = screen.getByRole("button", { name: "" });
+      const searchButton = screen.getByRole("button", { name: "Search" });
       await act(async () => {
         fireEvent.click(searchButton);
       });
@@ -126,7 +126,7 @@ describe("ListPane", () => {
     it("should show 'No items found of matching \"NonExistent\"' when search has no results", async () => {
       renderListPane();
 
-      const searchButton = screen.getByRole("button", { name: "" });
+      const searchButton = screen.getByRole("button", { name: "Search" });
       await act(async () => {
         fireEvent.click(searchButton);
       });
@@ -146,7 +146,7 @@ describe("ListPane", () => {
     it("should collapse search when input is empty and loses focus", async () => {
       renderListPane();
 
-      const searchButton = screen.getByRole("button", { name: "" });
+      const searchButton = screen.getByRole("button", { name: "Search" });
       await act(async () => {
         fireEvent.click(searchButton);
       });
@@ -162,7 +162,7 @@ describe("ListPane", () => {
       // The search input is hidden with CSS but still in the DOM
       // We should check that the search button is visible again
       const searchButtonAfterCollapse = screen.getByRole("button", {
-        name: "",
+        name: "Search",
       });
       expect(searchButtonAfterCollapse).toBeInTheDocument();
       expect(searchButtonAfterCollapse).not.toHaveClass("opacity-0");
@@ -171,7 +171,7 @@ describe("ListPane", () => {
     it("should keep search expanded when input has content and loses focus", async () => {
       renderListPane();
 
-      const searchButton = screen.getByRole("button", { name: "" });
+      const searchButton = screen.getByRole("button", { name: "Search" });
       await act(async () => {
         fireEvent.click(searchButton);
       });
@@ -188,7 +188,7 @@ describe("ListPane", () => {
     it("should search through all item properties (description)", async () => {
       renderListPane();
 
-      const searchButton = screen.getByRole("button", { name: "" });
+      const searchButton = screen.getByRole("button", { name: "Search" });
       await act(async () => {
         fireEvent.click(searchButton);
       });