dtourolle
ad48d89dfe
Formatting was configured but never enforced: `bun run format:check` reported 199 unformatted files and ran in no workflow and in no git hook, so .prettierrc (printWidth 100, trailing commas) described an intention rather than the tree. This is the one-time sweep that makes the check gateable. Whitespace and token-reflow only -- no behavioural change: `bun run check` reports 0 errors and all 1053 frontend tests pass before and after. Kept out of every other commit on purpose. A 199-file diff mixed with real changes is unreviewable, and the next commit turns format:check into a hard CI gate so this cannot silently accumulate again.
111 lines
3.6 KiB
TypeScript
111 lines
3.6 KiB
TypeScript
/**
|
|
* The header search bar is the single md+ search input.
|
|
*
|
|
* Off /search it navigates there (the only surface that renders results); on
|
|
* /search it stays put and republishes the query into the URL, so the user goes
|
|
* on typing in the same box instead of being handed to a second input owned by
|
|
* the page.
|
|
*
|
|
* TRACES: UR-049, UR-054 | DR-147
|
|
*/
|
|
|
|
import { describe, it, expect, vi, beforeEach } from "vitest";
|
|
import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
|
|
|
|
const { pageStore, goto, clearSearch } = vi.hoisted(() => {
|
|
const { writable } = require("svelte/store");
|
|
return {
|
|
pageStore: writable({ url: new URL("http://localhost/library/music") }),
|
|
goto: vi.fn(),
|
|
clearSearch: vi.fn(),
|
|
};
|
|
});
|
|
|
|
vi.mock("$app/stores", () => ({ page: pageStore, navigating: { subscribe: () => () => {} } }));
|
|
vi.mock("$app/navigation", () => ({ goto, afterNavigate: vi.fn(), beforeNavigate: vi.fn() }));
|
|
vi.mock("$lib/stores/library", () => ({
|
|
library: { subscribe: () => () => {}, search: vi.fn(), clearSearch },
|
|
}));
|
|
|
|
import HeaderSearch from "./HeaderSearch.svelte";
|
|
|
|
const afterDebounce = () => new Promise((resolve) => setTimeout(resolve, 450));
|
|
|
|
function input(): HTMLInputElement {
|
|
return screen.getByPlaceholderText("Search your library...") as HTMLInputElement;
|
|
}
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
pageStore.set({ url: new URL("http://localhost/library/music") });
|
|
});
|
|
|
|
describe("from a library route", () => {
|
|
it("routes to /search with the query and the route's scope", async () => {
|
|
render(HeaderSearch);
|
|
|
|
await fireEvent.input(input(), { target: { value: "jazz" } });
|
|
await afterDebounce();
|
|
|
|
expect(goto).toHaveBeenCalledWith("/search?q=jazz&scope=music");
|
|
});
|
|
|
|
it("clears the results rather than navigating on an empty query", async () => {
|
|
render(HeaderSearch);
|
|
|
|
await fireEvent.input(input(), { target: { value: "jazz" } });
|
|
await afterDebounce();
|
|
goto.mockClear();
|
|
|
|
await fireEvent.input(input(), { target: { value: "" } });
|
|
await afterDebounce();
|
|
|
|
expect(goto).not.toHaveBeenCalled();
|
|
expect(clearSearch).toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe("on /search", () => {
|
|
beforeEach(() => {
|
|
pageStore.set({ url: new URL("http://localhost/search?q=jazz&scope=music") });
|
|
});
|
|
|
|
it("carries the query over from the URL and puts the caret back in the box", async () => {
|
|
render(HeaderSearch);
|
|
|
|
await waitFor(() => expect(document.activeElement).toBe(input()));
|
|
expect(input().value).toBe("jazz");
|
|
expect(input().selectionStart).toBe(4);
|
|
});
|
|
|
|
it("republishes in place instead of pushing a second results screen", async () => {
|
|
render(HeaderSearch);
|
|
|
|
await fireEvent.input(input(), { target: { value: "jazzy" } });
|
|
await afterDebounce();
|
|
|
|
expect(goto).toHaveBeenCalledWith("/search?q=jazzy&scope=music", {
|
|
replaceState: true,
|
|
keepFocus: true,
|
|
noScroll: true,
|
|
});
|
|
// The box the user is typing in keeps its text — nothing re-seeds it.
|
|
expect(input().value).toBe("jazzy");
|
|
});
|
|
|
|
it("searches with the scope the page's chips published, not the route default", async () => {
|
|
// A chip pick lands in the URL; the bar must adopt it or the next keystroke
|
|
// would silently widen the search back to All.
|
|
pageStore.set({ url: new URL("http://localhost/search?q=jazz&scope=tv") });
|
|
render(HeaderSearch);
|
|
|
|
await fireEvent.input(input(), { target: { value: "jazzy" } });
|
|
await afterDebounce();
|
|
|
|
expect(goto).toHaveBeenCalledWith(
|
|
"/search?q=jazzy&scope=tv",
|
|
expect.objectContaining({ replaceState: true }),
|
|
);
|
|
});
|
|
});
|