desertthunder.dev
learn and share notes on atproto (wip) 馃
malfestio.stormlightlabs.org/
readability
solid
axum
atproto
srs
1import { cleanup, fireEvent, render, screen } from "@solidjs/testing-library";
2import { afterEach, describe, expect, it, vi } from "vitest";
3import { SearchInput } from "../SearchInput";
4
5const navigateMock = vi.fn();
6vi.mock("@solidjs/router", () => ({ useNavigate: () => navigateMock }));
7
8describe("SearchInput", () => {
9 afterEach(() => {
10 cleanup();
11 vi.clearAllMocks();
12 });
13
14 it("renders correctly", () => {
15 render(() => <SearchInput />);
16 expect(screen.getByPlaceholderText("Search decks, cards...")).toBeInTheDocument();
17 });
18
19 it("updates query on input", () => {
20 render(() => <SearchInput />);
21 const input = screen.getByPlaceholderText("Search decks, cards...") as HTMLInputElement;
22 fireEvent.input(input, { target: { value: "test query" } });
23 expect(input.value).toBe("test query");
24 });
25
26 it("navigates on submit with query", () => {
27 render(() => <SearchInput />);
28 const input = screen.getByPlaceholderText("Search decks, cards...");
29 fireEvent.input(input, { target: { value: "test" } });
30 fireEvent.submit(input.closest("form")!);
31 expect(navigateMock).toHaveBeenCalledWith("/search?q=test");
32 });
33
34 it("does not navigate on empty submit", () => {
35 render(() => <SearchInput />);
36 const input = screen.getByPlaceholderText("Search decks, cards...");
37 fireEvent.submit(input.closest("form")!);
38 expect(navigateMock).not.toHaveBeenCalled();
39 });
40
41 it("initializes with initialQuery prop", () => {
42 render(() => <SearchInput initialQuery="initial" />);
43 const input = screen.getByPlaceholderText("Search decks, cards...") as HTMLInputElement;
44 expect(input.value).toBe("initial");
45 });
46});