File size: 4,025 Bytes
b2d4d0e 73c8079 97db435 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | import { fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import ParamsPanel from "@/components/ParamsPanel";
import type { ParamSpec } from "@/lib/api";
const specs: ParamSpec[] = [
{ name: "exaggeration", label: "Exaggeration", type: "float", default: 0.5, min: 0, max: 2, step: 0.05 },
{ name: "is_fast", label: "Fast mode", type: "bool", default: false },
{ name: "lang", label: "Lang", type: "enum", default: "en", choices: ["en", "fr"] },
];
describe("ParamsPanel", () => {
it("renders one control per spec", () => {
render(<ParamsPanel specs={specs} values={{}} onChange={() => {}} />);
expect(screen.getByLabelText(/exaggeration/i)).toBeInTheDocument();
expect(screen.getByLabelText(/fast mode/i)).toBeInTheDocument();
expect(screen.getByLabelText(/^lang$/i)).toBeInTheDocument();
});
it("emits onChange with merged values", () => {
const onChange = vi.fn();
render(<ParamsPanel specs={specs} values={{}} onChange={onChange} />);
fireEvent.change(screen.getByLabelText(/exaggeration/i), { target: { value: "1.2" } });
expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ exaggeration: 1.2 }));
});
});
const specsMixed: ParamSpec[] = [
{ name: "temperature", label: "Temperature", type: "float", default: 0.8, min: 0.1, max: 1.5, step: 0.05, group: "basic" },
{ name: "seed", label: "Seed", type: "int", default: -1, min: -1, step: 1, group: "advanced" },
{ name: "top_p", label: "Top p", type: "float", default: 1.0, min: 0, max: 1, step: 0.01, group: "advanced" },
];
describe("ParamsPanel groups", () => {
it("renders basic params and a closed advanced disclosure by default", () => {
render(<ParamsPanel specs={specsMixed} values={{}} onChange={() => {}} />);
expect(screen.getByLabelText(/temperature/i)).toBeInTheDocument();
// advanced is in the DOM but not visible until <details> opens
const seed = screen.getByLabelText(/^seed$/i) as HTMLInputElement;
const detailsAncestor = seed.closest("details");
expect(detailsAncestor).not.toBeNull();
expect(detailsAncestor!.open).toBe(false);
});
it("opens disclosure on summary click and shows advanced params", () => {
render(<ParamsPanel specs={specsMixed} values={{}} onChange={() => {}} />);
const summary = screen.getByText(/advanced/i);
fireEvent.click(summary);
const seed = screen.getByLabelText(/^seed$/i) as HTMLInputElement;
expect(seed.closest("details")!.open).toBe(true);
});
it("propagates onChange from advanced params", () => {
const onChange = vi.fn();
render(<ParamsPanel specs={specsMixed} values={{}} onChange={onChange} />);
fireEvent.click(screen.getByText(/advanced/i));
fireEvent.change(screen.getByLabelText(/^top p$/i), { target: { value: "0.6" } });
expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ top_p: 0.6 }));
});
});
describe("ParamsPanel seed control", () => {
it("renders an int input plus a randomize button for seed", () => {
const specs: ParamSpec[] = [
{ name: "seed", label: "Seed", type: "int", default: -1, min: -1, step: 1, group: "advanced" },
];
render(<ParamsPanel specs={specs} values={{}} onChange={() => {}} />);
fireEvent.click(screen.getByText(/advanced/i));
expect(screen.getByLabelText(/^seed$/i)).toHaveAttribute("type", "number");
expect(screen.getByRole("button", { name: /random/i })).toBeInTheDocument();
});
it("clicking randomize sets seed to -1 via onChange", () => {
const specs: ParamSpec[] = [
{ name: "seed", label: "Seed", type: "int", default: -1, min: -1, step: 1, group: "advanced" },
];
const onChange = vi.fn();
render(<ParamsPanel specs={specs} values={{ seed: 42 }} onChange={onChange} />);
fireEvent.click(screen.getByText(/advanced/i));
fireEvent.click(screen.getByRole("button", { name: /random/i }));
expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ seed: -1 }));
});
});
|