93 lines
2.2 KiB
TypeScript
93 lines
2.2 KiB
TypeScript
/**
|
|
* @vitest-environment jsdom
|
|
*/
|
|
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
|
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
import { UserSearchBar } from "./user-search-bar";
|
|
|
|
vi.mock("react-i18next", () => ({
|
|
useTranslation: () => ({
|
|
t: (_key: string, fallback: string): string => fallback,
|
|
}),
|
|
}));
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
describe("UserSearchBar", () => {
|
|
it("keeps the controls usable on a narrow mobile viewport", () => {
|
|
Object.defineProperty(window, "innerWidth", {
|
|
configurable: true,
|
|
value: 390,
|
|
});
|
|
|
|
render(
|
|
<UserSearchBar
|
|
initialType="email"
|
|
initialValue=""
|
|
onSearch={vi.fn()}
|
|
subscribes={[]}
|
|
/>
|
|
);
|
|
|
|
expect(screen.getByRole("combobox")).not.toBeNull();
|
|
expect(screen.getByRole("button", { name: "Search" })).not.toBeNull();
|
|
});
|
|
|
|
it("keeps the typed happy-path value and triggers search", () => {
|
|
const onSearch = vi.fn();
|
|
|
|
render(
|
|
<UserSearchBar
|
|
initialType="email"
|
|
initialValue=""
|
|
onSearch={onSearch}
|
|
subscribes={[]}
|
|
/>
|
|
);
|
|
|
|
fireEvent.change(screen.getByPlaceholderText("Enter search term"), {
|
|
target: { value: "user@example.com" },
|
|
});
|
|
fireEvent.click(screen.getByRole("button", { name: "Search" }));
|
|
|
|
expect(onSearch).toHaveBeenCalledWith("email", "user@example.com");
|
|
expect(
|
|
(screen.getByPlaceholderText("Enter search term") as HTMLInputElement)
|
|
.value
|
|
).toBe("user@example.com");
|
|
});
|
|
|
|
it("syncs to external search changes for precise referrer navigation", () => {
|
|
const onSearch = vi.fn();
|
|
const { rerender } = render(
|
|
<UserSearchBar
|
|
initialType="email"
|
|
initialValue="old@example.com"
|
|
onSearch={onSearch}
|
|
subscribes={[]}
|
|
/>
|
|
);
|
|
|
|
expect(
|
|
(screen.getByPlaceholderText("Enter search term") as HTMLInputElement)
|
|
.value
|
|
).toBe("old@example.com");
|
|
|
|
rerender(
|
|
<UserSearchBar
|
|
initialType="user_id"
|
|
initialValue="1024"
|
|
onSearch={onSearch}
|
|
subscribes={[]}
|
|
/>
|
|
);
|
|
|
|
expect(
|
|
(screen.getByPlaceholderText("Enter search term") as HTMLInputElement)
|
|
.value
|
|
).toBe("1024");
|
|
});
|
|
});
|