48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
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");
|
|
});
|