diff --git a/src/formbuilder.test.tsx b/src/formbuilder.test.tsx
index cb0a4e5..80ed3fe 100644
--- a/src/formbuilder.test.tsx
+++ b/src/formbuilder.test.tsx
@@ -11,8 +11,10 @@ import {
describe("useFormBuilder", () => {
interface FormData {
- firstName: string;
- lastName: string;
+ person: {
+ firstName: string;
+ lastName: string;
+ };
}
const createHarness = (
@@ -33,8 +35,14 @@ describe("useFormBuilder", () => {
returnValue.values = watch();
return (
@@ -47,8 +55,10 @@ describe("useFormBuilder", () => {
};
const defaultValues: FormData = {
- firstName: "John",
- lastName: "Smith",
+ person: {
+ firstName: "John",
+ lastName: "Smith",
+ },
};
beforeAll(() => {
@@ -89,8 +99,8 @@ describe("useFormBuilder", () => {
});
// Submitted data contains new values
- expect(formData.firstName).toBe("Joe");
- expect(formData.lastName).toBe("Bloggs");
+ expect(formData.person.firstName).toBe("Joe");
+ expect(formData.person.lastName).toBe("Bloggs");
});
test("$setValue", async () => {
@@ -99,10 +109,10 @@ describe("useFormBuilder", () => {
render();
act(() => {
- harness.formBuilder.fields.firstName.$setValue("Joe");
+ harness.formBuilder.fields.person.firstName.$setValue("Joe");
});
- expect(harness.values.firstName).toBe("Joe");
+ expect(harness.values.person.firstName).toBe("Joe");
});
test("$useWatch", async () => {
@@ -110,11 +120,11 @@ describe("useFormBuilder", () => {
// Option 1: get everything
const root = builder.fields.$useWatch();
// Option 2: get subset of fields
- const [firstName, lastName] = builder.fields.$useWatch({
+ const [firstName, lastName] = builder.fields.person.$useWatch({
name: ["firstName", "lastName"],
});
// Option 3: get specific field
- const firstNameAlt = builder.fields.firstName.$useWatch();
+ const firstNameAlt = builder.fields.person.firstName.$useWatch();
return (
<>
{JSON.stringify(root)}
@@ -125,7 +135,7 @@ describe("useFormBuilder", () => {
);
});
- render();
+ render( {}} />);
const firstNameInput = screen.getByLabelText("first-name-input");
@@ -141,7 +151,7 @@ describe("useFormBuilder", () => {
await waitFor(() => {
expect(watchedRoot).toHaveTextContent(
- JSON.stringify({ firstName: "Joe", lastName: "Smith" })
+ JSON.stringify({ person: { firstName: "Joe", lastName: "Smith" } })
);
expect(watchedRoot).toHaveTextContent("Smith");
expect(watchedFirstName).toHaveTextContent("Joe");
@@ -178,4 +188,34 @@ describe("useFormBuilder", () => {
expect(formStateIsDirty).toHaveTextContent("true");
});
});
+
+ test("$useState", async () => {
+ const handleSubmit: SubmitHandler = (data) => {};
+
+ const harness = createHarness({ defaultValues }, (builder) => {
+ const { dirty, errors } = builder.fields.person.firstName.$useState();
+ return (
+
+
{JSON.stringify(dirty)}
+
{errors?.type}
+