NW6 | Sabella Fisseha | Tests for Feature Search State and Feature onSubmit

src/components/Search/Search.jsx

@@ -18,7 +18,11 @@ const Search = (props) => {
       <header className="search__header">
         <h4 className="search__heading heading">Search Bookings</h4>
       </header>
-      <form className="search__form" onSubmit={onSubmitHandler}>
+      <form
+        data-testid="form"
+        className="search__form"
+        onSubmit={onSubmitHandler}
+      >
         <label className="search__label" htmlFor="customerName">
           &rarr;
         </label>

src/components/Search/__test__/featureSearchOnSubmit.test.jsx

@@ -0,0 +1,22 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import Search from "../Search";
+import Bookings from "../../Bookings/Bookings";
+
+test("Given a searchInput field with input values entered", () => {
+  render(<Search search={() => {}} />);
+  const inputElement = screen.getByPlaceholderText("Customer name");
+  fireEvent.change(inputElement, { target: { value: "Search Name" } });
+  expect(inputElement.value).toBe("Search Name");
+  expect(inputElement).toBeInTheDocument();
+});
+
+// test("When the form is submitted", () => {
+//   function mockSubmit() {}
+//   render(<Search search={() => {}} />);
+//   const formElement = screen.getByTestId("form");
+//   const inputElement = screen.getByPlaceholderText("Customer name");
+//   fireEvent.change(inputElement, { target: { value: "Search Name" } });
+//   console.info = mockSubmit;
+//   fireEvent.submit(formElement);
+//   expect(mockSubmit).toHaveBeenCalledWith();
+// });

src/components/Search/__test__/featureSearchState.test.jsx

@@ -0,0 +1,15 @@
+import Search from "../Search";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+test("Given a searchInput", () => {
+  render(<Search search={() => {}} />);
+  const inputElement = screen.getByPlaceholderText("Customer name");
+  expect(inputElement).toBeInTheDocument();
+});
+
+test("When I type in the field", () => {
+  render(<Search search={() => {}} />);
+  const inputElement = screen.getByPlaceholderText("Customer name");
+  fireEvent.change(inputElement, { target: { value: "search for customer" } });
+  expect(inputElement.value).toBe("search for customer");
+});