Movie_Search/movie-search/__tests__/SearchBar.test.jsx

import "@testing-library/jest-dom";
import { fireEvent, render, screen } from "@testing-library/react";
import SearchBar from "@/app/Search/SearchBar.tsx";
import { queryOMDb } from "@/api/omdb";

describe("SearchBar Operations", () => {
  test("SearchBar Allows user input", () => {
    render(<SearchBar />);
    const input = screen.getByPlaceholderText("Search by Title");

    fireEvent.change(input, { target: { value: "some value" } });

    expect(input.value).toBe("some value");
  });

  test("SearchBar Allows user input and Clear button clears", () => {
    render(<SearchBar />);
    const input = screen.getByTestId("SearchBar-input");
    const clear = screen.getByText("Clear");

    fireEvent.change(input, { target: { value: "some value" } });
    expect(input.value).toBe("some value");

    fireEvent.click(clear);

    expect(input.value).toBe("");
  });

  // test("SearchBar Allows user submit", () => {
  //   render(<SearchBar />);
  //   const input = screen.getByPlaceholderText("Search by Title");
  //   const submit = screen.getByText("Search");
  //   const spy = jest.spyOn({ queryOMDb }, "queryOMDb");

  //   fireEvent.change(input, { target: { value: "back to the" } });
  //   fireEvent.click(submit);
  //   // Somehow test for form submission - currently facing this issue
  //   // https://github.com/vercel/next.js/issues/54757
  //   //  expect(spy).toHaveBeenCalled();
  // });
});