added tests for breadcrumbs and search form (#844)

react-app/src/components/BreadCrumb/BreadCrumb.test.tsx

@@ -1,9 +1,12 @@
 import { describe, test, expect, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { BreadCrumb, BreadCrumbBar } from "./BreadCrumb";
+import { BreadCrumb, BreadCrumbBar, BreadCrumbs } from "./BreadCrumb";
 import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
 
+import { optionCrumbsFromPath } from "./create-breadcrumbs";
+import { Authority } from "shared-types";
+
 export const LocationDisplay = () => {
   const location = useLocation();
 
@@ -66,5 +69,36 @@ describe("Bread Crumb Tests", () => {
     });
   });
 
-  // TODO: Write a test to test the functionality of the BreadCrumbs component with a test config passed in
+  describe("Create Bread Crumbs From Path", async () => {
+    test("return the dashboard crum as the first breadcrumb", () => {
+      const result = optionCrumbsFromPath("/details/package-id");
+
+      expect(result[0].displayText).toEqual("Dashboard");
+      expect(result[0].to).toEqual("/dashboard");
+    });
+
+    test("when a path is a new submission; newSubmissionPageRouteMapper is used", () => {
+      const result = optionCrumbsFromPath("/new-submission/spa/medicaid/create?origin=spas");
+
+      const medicaid = {
+        to: "/new-submission/spa/medicaid",
+        displayText: "Medicaid SPA Type",
+      };
+
+      expect(result.length).toBe(4); // dashboard > submission type > SPA > medicaid
+      expect(result[3].to).toBe(medicaid.to);
+      expect(result[3].displayText).toBe(medicaid.displayText);
+    });
+
+    test("optionCrumbsFromPath creates config passed into component & displays correct bread crumbs ", () => {
+      const path = "/details/Medicaid%20SPA/MD-24-0114-P";
+      const testConfig = optionCrumbsFromPath(path, "Medicaid SPA" as Authority);
+
+      render(<BreadCrumbs options={[...testConfig]} />, { wrapper: BrowserRouter });
+
+      const dashboardBreadCrum = screen.getByRole("link", { name: "Dashboard" });
+      expect(dashboardBreadCrum).toBeInTheDocument();
+      expect(dashboardBreadCrum).toHaveAttribute("href", "/dashboard?tab=spas");
+    });
+  });
 });

react-app/src/components/SearchForm/SearchForm.test.tsx

@@ -0,0 +1,82 @@
+// Search.test.js
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { describe, expect, test, vi, afterEach } from "vitest";
+import { SearchForm } from ".";
+import userEvent from "@testing-library/user-event";
+
+const mockHandleSearch = vi.fn();
+
+describe("Search Component", () => {
+  afterEach(() => {
+    mockHandleSearch.mockClear();
+  });
+
+  test("renders input and svg", () => {
+    render(<SearchForm handleSearch={mockHandleSearch} isSearching={false} disabled={false} />);
+
+    expect(
+      screen.getByLabelText("Search by Package ID, CPOC Name, or Submitter Name"),
+    ).toBeInTheDocument();
+  });
+
+  test("can type in input field", () => {
+    render(<SearchForm handleSearch={mockHandleSearch} isSearching={false} disabled={false} />);
+
+    const input = screen.getByLabelText("Search by Package ID, CPOC Name, or Submitter Name");
+    fireEvent.change(input, { target: { value: "Test query" } });
+
+    expect(input).toHaveValue("Test query");
+  });
+
+  test("calls handleSearch onChange", async () => {
+    render(<SearchForm handleSearch={mockHandleSearch} isSearching={false} disabled={false} />);
+
+    const input = screen.getByLabelText("Search by Package ID, CPOC Name, or Submitter Name");
+
+    fireEvent.change(input, { target: { value: "Test query" } });
+
+    await waitFor(() => {
+      expect(mockHandleSearch).toHaveBeenCalledWith("Test query");
+    });
+  });
+
+  test("calls handleSearch onSubmit", async () => {
+    render(<SearchForm handleSearch={mockHandleSearch} isSearching={false} disabled={false} />);
+
+    const input = screen.getByLabelText("Search by Package ID, CPOC Name, or Submitter Name");
+
+    fireEvent.change(input, { target: { value: "Test query" } });
+    // this triggers the user clicking the 'enter' key
+    userEvent.type(input, "{enter}");
+
+    await waitFor(() => {
+      expect(mockHandleSearch).toHaveBeenCalledWith("Test query");
+    });
+  });
+
+  test("x button appears after text is inputed", () => {
+    render(<SearchForm handleSearch={mockHandleSearch} isSearching={false} disabled={false} />);
+
+    const input = screen.getByLabelText("Search by Package ID, CPOC Name, or Submitter Name");
+    fireEvent.change(input, { target: { value: "Test query" } });
+
+    const xButton = screen.getByTestId("close-icon");
+    expect(xButton).toBeInTheDocument();
+  });
+
+  test("clicking x clears the text input", async () => {
+    render(<SearchForm handleSearch={mockHandleSearch} isSearching={false} disabled={false} />);
+    const input = screen.getByLabelText("Search by Package ID, CPOC Name, or Submitter Name");
+    fireEvent.change(input, { target: { value: "Test query" } });
+
+    const xButton = screen.getByTestId("close-icon");
+    expect(xButton).toBeInTheDocument();
+
+    fireEvent.click(xButton);
+
+    await waitFor(() => {
+      expect(input).toHaveValue("");
+      expect(mockHandleSearch).toHaveBeenCalledWith("");
+    });
+  });
+});

react-app/src/components/SearchForm/index.tsx

@@ -67,6 +67,7 @@ export const SearchForm: FC<{
         {!!searchText && (
           <XIcon
             className="absolute cursor-pointer top-0 bottom-0 w-6 h-6 my-auto left-[28rem]"
+            data-testid="close-icon"
             onClick={() => {
               setSearchText("");
               handleSearch("");