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";

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.getByPlaceholderText("Search by Title");
  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();
// });