fix: add unit test cases, adjust useMemo function

Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>

Author: tomrndom

src/components/mui/__tests__/search-input.test.js

@@ -12,10 +12,11 @@
  * */
 
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
 import SearchInput from "../search-input";
+import { DEBOUNCE_WAIT } from "../../../utils/constants";
 
 describe("SearchInput", () => {
   test("renders with custom placeholder", () => {
@@ -58,4 +59,39 @@ describe("SearchInput", () => {
     rerender(<SearchInput term="new" onSearch={jest.fn()} />);
     expect(screen.getByDisplayValue("new")).toBeInTheDocument();
   });
+
+  describe("debounced prop", () => {
+    beforeEach(() => jest.useFakeTimers());
+    afterEach(() => jest.useRealTimers());
+
+    test("calls onSearch after debounce delay when debounced is true", async () => {
+      const onSearch = jest.fn();
+      const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+      render(<SearchInput term="" onSearch={onSearch} debounced />);
+      const input = screen.getByPlaceholderText("Search...");
+      await user.type(input, "something");
+      expect(onSearch).not.toHaveBeenCalled();
+      act(() => jest.advanceTimersByTime(DEBOUNCE_WAIT));
+      expect(onSearch).toHaveBeenCalledWith("something");
+    });
+
+    test("does not call onSearch on Enter when debounced is true", async () => {
+      const onSearch = jest.fn();
+      const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+      render(<SearchInput term="" onSearch={onSearch} debounced />);
+      const input = screen.getByPlaceholderText("Search...");
+      await user.type(input, "something{Enter}");
+      expect(onSearch).not.toHaveBeenCalled();
+    });
+
+    test("does not call onSearch on typing without Enter when not debounced", async () => {
+      const onSearch = jest.fn();
+      const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+      render(<SearchInput term="" onSearch={onSearch} />);
+      const input = screen.getByPlaceholderText("Search...");
+      await user.type(input, "something");
+      act(() => jest.runAllTimers());
+      expect(onSearch).not.toHaveBeenCalled();
+    });
+  });
 });

src/components/mui/search-input.js

@@ -31,7 +31,7 @@ const SearchInput = ({ term, onSearch, placeholder = "Search...", debounced }) =
   };
 
   const onSearchDebounced = useMemo(
-    debounced ? debounce((value) => onSearch(value), DEBOUNCE_WAIT) : null,
+    () => debounced ? debounce((value) => onSearch(value), DEBOUNCE_WAIT) : null,
     [onSearch, debounced]
   );