88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
import { expect, test } from "vitest";
|
|
import { screen, within } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { useForm } from "react-hook-form";
|
|
import { renderApp } from "../test/render";
|
|
import { FieldInput } from "./field-input";
|
|
import { fieldDefinitions } from "../test/fixtures";
|
|
|
|
type FormValues = { fields: Record<string, unknown> };
|
|
|
|
function Harness({ defKey }: { defKey: string }) {
|
|
const def = fieldDefinitions.find((d) => d.key === defKey)!;
|
|
const form = useForm({ defaultValues: { fields: {} as Record<string, unknown> } });
|
|
|
|
return <FieldInput definition={def} form={form} />;
|
|
}
|
|
|
|
function FormHarness({
|
|
defKey,
|
|
onSubmit,
|
|
}: {
|
|
defKey: string;
|
|
onSubmit: (values: FormValues) => void;
|
|
}) {
|
|
const def = fieldDefinitions.find((d) => d.key === defKey)!;
|
|
const form = useForm<FormValues>({ defaultValues: { fields: {} as Record<string, unknown> } });
|
|
|
|
return (
|
|
<form onSubmit={form.handleSubmit(onSubmit)}>
|
|
<FieldInput definition={def} form={form} />
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
test("text field renders a text input labelled in the active locale", async () => {
|
|
renderApp(<Harness defKey="inscription" />);
|
|
expect(await screen.findByLabelText("Inscription")).toBeInTheDocument();
|
|
});
|
|
|
|
test("boolean field renders a checkbox", async () => {
|
|
renderApp(<Harness defKey="is_fragment" />);
|
|
expect(await screen.findByRole("checkbox", { name: /is fragment/i })).toBeInTheDocument();
|
|
});
|
|
|
|
test("localized_text renders a single input for the default language", async () => {
|
|
renderApp(<Harness defKey="title_ml" />);
|
|
expect(await screen.findByLabelText(/^title/i)).toBeInTheDocument();
|
|
});
|
|
|
|
test("term field filters and selects from the vocabulary combobox", async () => {
|
|
const user = userEvent.setup();
|
|
const submitted: FormValues[] = [];
|
|
|
|
renderApp(<FormHarness defKey="material" onSubmit={(v) => submitted.push(v)} />);
|
|
|
|
const input = await screen.findByPlaceholderText("— select —");
|
|
|
|
await user.click(input);
|
|
await user.type(input, "bro");
|
|
|
|
const body = within(document.body);
|
|
|
|
await user.click(await body.findByText("Bronze"));
|
|
await user.click(screen.getByRole("button", { name: "Submit" }));
|
|
|
|
expect(submitted[0]?.fields.material).toBe("t-bronze");
|
|
});
|
|
|
|
test("authority field filters and selects from the authority combobox", async () => {
|
|
const user = userEvent.setup();
|
|
const submitted: FormValues[] = [];
|
|
|
|
renderApp(<FormHarness defKey="maker" onSubmit={(v) => submitted.push(v)} />);
|
|
|
|
const input = await screen.findByPlaceholderText("— select —");
|
|
|
|
await user.click(input);
|
|
await user.type(input, "ada");
|
|
|
|
const body = within(document.body);
|
|
|
|
await user.click(await body.findByText("Ada Lovelace"));
|
|
await user.click(screen.getByRole("button", { name: "Submit" }));
|
|
|
|
expect(submitted[0]?.fields.maker).toBe("a-ada");
|
|
});
|