import { expect, test } from "vitest";
import { screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Routes, Route, useLocation } from "react-router-dom";
import { renderApp } from "../test/render";
import { HeaderSearch } from "./header-search";

function LocationProbe() {
  const location = useLocation();
  return <div data-testid="location">{location.pathname + location.search}</div>;
}

function tree() {
  return (
    <Routes>
      <Route
        path="/"
        element={
          <>
            <HeaderSearch />
            <LocationProbe />
          </>
        }
      />
      <Route path="/search" element={<LocationProbe />} />
    </Routes>
  );
}

test("submitting a query navigates to /search?q=", async () => {
  renderApp(tree());

  const input = await screen.findByRole("searchbox", { name: "Search" });
  await userEvent.type(input, "amphora{Enter}");

  expect(await screen.findByTestId("location")).toHaveTextContent("/search?q=amphora");
});

test("submitting an empty query does not navigate", async () => {
  renderApp(tree());

  const input = await screen.findByRole("searchbox", { name: "Search" });
  await userEvent.type(input, "   {Enter}");

  expect(screen.getByTestId("location")).toHaveTextContent("/");
  expect(screen.getByTestId("location")).not.toHaveTextContent("/search");
});