@teamnovu/kit-vue-forms 0.1.20 → 0.1.21

package/tests/useForm.test.ts

@@ -1,511 +1,540 @@
-import { describe, expect, it, vi } from "vitest";
-import { effectScope, isReactive, nextTick, reactive, ref } from "vue";
-import { z } from "zod";
-import { useForm } from "../src/composables/useForm";
+import { describe, expect, it, vi } from 'vitest'
+import { effectScope, isReactive, nextTick, reactive, ref } from 'vue'
+import { z } from 'zod'
+import { useForm } from '../src/composables/useForm'
 
-const scope = effectScope();
+const scope = effectScope()
 
-describe("useForm", () => {
-  it("should initialize form with initial data", () => {
+describe('useForm', () => {
+  it('should initialize form with initial data', () => {
     const initialData = {
-      name: "John",
+      name: 'John',
       age: 30,
-    };
-    const form = useForm({ initialData });
+    }
+    const form = useForm({ initialData })
 
-    expect(form.data.value).toEqual(initialData);
-    expect(form.initialData.value).toEqual(initialData);
-  });
+    expect(form.data.value).toEqual(initialData)
+    expect(form.initialData.value).toEqual(initialData)
+  })
 
-  it("should initialize form with reactive initial data", async () => {
+  it('should initialize form with reactive initial data', async () => {
     const initialData = ref({
-      name: "John",
+      name: 'John',
       age: 30,
-    });
-    const form = useForm({ initialData });
+    })
+    const form = useForm({ initialData })
 
     expect(form.data.value).toEqual({
-      name: "John",
+      name: 'John',
       age: 30,
-    });
+    })
 
     // Update reactive initial data
     initialData.value = {
-      name: "Jane",
+      name: 'Jane',
       age: 25,
-    };
-    await nextTick();
+    }
+    await nextTick()
 
     expect(form.initialData.value).toEqual({
-      name: "Jane",
+      name: 'Jane',
       age: 25,
-    });
-  });
+    })
+  })
 
-  it("should reinitialize form with new initial data", async () => {
+  it('should reinitialize form with new initial data', async () => {
     const initialData = ref({
-      name: "John",
+      name: 'John',
       age: 30,
-    });
-    const form = useForm({ initialData });
+    })
+    const form = useForm({ initialData })
 
     expect(form.data.value).toEqual({
-      name: "John",
+      name: 'John',
       age: 30,
-    });
+    })
 
     // Update reactive initial data
     initialData.value = {
-      name: "Jane",
+      name: 'Jane',
       age: 25,
-    };
-    await nextTick();
+    }
+    await nextTick()
 
     expect(form.data.value).toEqual({
-      name: "Jane",
+      name: 'Jane',
       age: 25,
-    });
-  });
+    })
+  })
 
-  it("should have initial state values", () => {
-    const form = useForm({ initialData: { name: "John" } });
+  it('should reinitialize form with new nested data', async () => {
+    const initialData = ref({
+      name: 'John',
+      items: [{ id: 1 }, { id: 2 }],
+    })
+    const form = useForm({ initialData })
+
+    // Define array fields to register them
+    form.defineField({ path: 'items.0.id' })
+    form.defineField({ path: 'items.1.id' })
+
+    expect(form.data.value).toEqual({
+      name: 'John',
+      items: [{ id: 1 }, { id: 2 }],
+    })
+
+    // Update reactive initial data
+    initialData.value = {
+      name: 'Jane',
+      items: [{ id: 4 }],
+    }
+    await nextTick()
 
-    expect(form.isDirty.value).toBe(false);
-    expect(form.isTouched.value).toBe(false);
-    expect(form.isValid.value).toBe(true);
-    expect(form.isValidated.value).toBe(false);
-  });
+    expect(form.data.value).toEqual({
+      name: 'Jane',
+      items: [{ id: 4 }],
+    })
+  })
+
+  it('should have initial state values', () => {
+    const form = useForm({ initialData: { name: 'John' } })
 
-  it("should define fields and auto-register them", () => {
+    expect(form.isDirty.value).toBe(false)
+    expect(form.isTouched.value).toBe(false)
+    expect(form.isValid.value).toBe(true)
+    expect(form.isValidated.value).toBe(false)
+  })
+
+  it('should define fields and auto-register them', () => {
     const form = useForm({
       initialData: {
-        name: "John",
-        email: "john@example.com",
+        name: 'John',
+        email: 'john@example.com',
       },
-    });
+    })
 
-    const nameField = form.defineField({ path: "name" });
-    const emailField = form.defineField({ path: "email" });
+    const nameField = form.defineField({ path: 'name' })
+    const emailField = form.defineField({ path: 'email' })
 
-    expect(nameField.path.value).toBe("name");
-    expect(emailField.path.value).toBe("email");
-    expect(form.fields.value.length).toBe(2);
-  });
+    expect(nameField.path.value).toBe('name')
+    expect(emailField.path.value).toBe('email')
+    expect(form.fields.value.length).toBe(2)
+  })
 
-  it("should get registered fields", () => {
+  it('should get registered fields', () => {
     const form = useForm({
       initialData: {
-        name: "John",
-        email: "john@example.com",
+        name: 'John',
+        email: 'john@example.com',
       },
-    });
+    })
 
-    const nameField = form.defineField({ path: "name" });
-    form.defineField({ path: "email" });
+    const nameField = form.defineField({ path: 'name' })
+    form.defineField({ path: 'email' })
 
-    const retrievedField = form.getField("name");
-    expect(retrievedField?.path.value).toBe("name");
-    expect(retrievedField).toBe(nameField);
-  });
+    const retrievedField = form.getField('name')
+    expect(retrievedField?.path.value).toBe('name')
+    expect(retrievedField).toBe(nameField)
+  })
 
-  it("should handle nested object initial data", () => {
+  it('should handle nested object initial data', () => {
     const initialData = {
       user: {
-        name: "John",
+        name: 'John',
         address: {
-          street: "123 Main St",
-          city: "New York",
+          street: '123 Main St',
+          city: 'New York',
         },
       },
-    };
-    const form = useForm({ initialData });
+    }
+    const form = useForm({ initialData })
 
-    expect(form.data.value).toEqual(initialData);
-    expect(form.initialData.value).toEqual(initialData);
-  });
+    expect(form.data.value).toEqual(initialData)
+    expect(form.initialData.value).toEqual(initialData)
+  })
 
-  it("should validate with schema", async () => {
+  it('should validate with schema', async () => {
     const schema = z.object({
       name: z.string().min(2),
       age: z.number().min(18),
-    });
+    })
 
     const form = useForm({
       initialData: {
-        name: "A",
+        name: 'A',
         age: 16,
       },
       schema,
-    });
+    })
 
-    const result = await form.validateForm();
+    const result = await form.validateForm()
 
-    expect(result.isValid).toBe(false);
-    expect(form.isValidated.value).toBe(true);
-    expect(form.errors.value.propertyErrors.name).toBeDefined();
-    expect(form.errors.value.propertyErrors.age).toBeDefined();
-  });
+    expect(result.isValid).toBe(false)
+    expect(form.isValidated.value).toBe(true)
+    expect(form.errors.value.propertyErrors.name).toBeDefined()
+    expect(form.errors.value.propertyErrors.age).toBeDefined()
+  })
 
-  it("should validate with custom function", async () => {
+  it('should validate with custom function', async () => {
     const validateFn = async (data: { name: string }) => {
       const errors = {
         general: [],
         propertyErrors: {} as Record<string, string[]>,
-      };
+      }
 
       if (data.name.length < 2) {
-        errors.propertyErrors.name = ["Name too short"];
+        errors.propertyErrors.name = ['Name too short']
       }
 
       return {
         isValid: Object.keys(errors.propertyErrors).length === 0,
         errors,
-      };
-    };
+      }
+    }
 
     const form = useForm({
-      initialData: { name: "A" },
+      initialData: { name: 'A' },
       validateFn,
-    });
+    })
 
-    const result = await form.validateForm();
+    const result = await form.validateForm()
 
-    expect(result.isValid).toBe(false);
-    expect(result.errors.propertyErrors.name).toEqual(["Name too short"]);
-  });
+    expect(result.isValid).toBe(false)
+    expect(result.errors.propertyErrors.name).toEqual(['Name too short'])
+  })
 
-  it("should pass validation with valid data", async () => {
+  it('should pass validation with valid data', async () => {
     const schema = z.object({
       name: z.string().min(2),
       age: z.number().min(18),
-    });
+    })
 
     const form = useForm({
       initialData: {
-        name: "John",
+        name: 'John',
         age: 30,
       },
       schema,
-    });
+    })
 
-    const result = await form.validateForm();
+    const result = await form.validateForm()
 
-    expect(result.isValid).toBe(true);
-    expect(form.isValidated.value).toBe(true);
-    expect(form.errors.value.general).toEqual([]);
-    expect(form.errors.value.propertyErrors).toEqual({});
-  });
+    expect(result.isValid).toBe(true)
+    expect(form.isValidated.value).toBe(true)
+    expect(form.errors.value.general).toEqual([])
+    expect(form.errors.value.propertyErrors).toEqual({})
+  })
 
-  it("can handle arrays on top level", async () => {
-    const schema = z.array(z.string());
+  it('can handle arrays on top level', async () => {
+    const schema = z.array(z.string())
 
     const form = useForm({
-      initialData: ["item1", "item2"],
+      initialData: ['item1', 'item2'],
       schema,
-    });
+    })
 
-    const result = await form.validateForm();
+    const result = await form.validateForm()
 
-    expect(result.isValid).toBe(true);
-    expect(form.isValidated.value).toBe(true);
-    expect(form.errors.value.general).toEqual([]);
-    expect(form.errors.value.propertyErrors).toEqual({});
+    expect(result.isValid).toBe(true)
+    expect(form.isValidated.value).toBe(true)
+    expect(form.errors.value.general).toEqual([])
+    expect(form.errors.value.propertyErrors).toEqual({})
 
-    const rootField = form.defineField({ path: "" });
-    const itemField = form.defineField({ path: "1" });
+    const rootField = form.defineField({ path: '' })
+    const itemField = form.defineField({ path: '1' })
 
-    expect(rootField.data.value).toEqual(["item1", "item2"]);
-    expect(itemField.data.value).toBe("item2");
-  });
+    expect(rootField.data.value).toEqual(['item1', 'item2'])
+    expect(itemField.data.value).toBe('item2')
+  })
 
-  it("can handle late initialized fields", async () => {
+  it('can handle late initialized fields', async () => {
     const form = useForm({
       initialData: {
-        name: "John",
+        name: 'John',
         age: 30,
       },
-    });
+    })
 
     // No fields defined yet
-    expect(form.fields.value).toEqual([]);
-    expect(form.isDirty.value).toBe(false);
+    expect(form.fields.value).toEqual([])
+    expect(form.isDirty.value).toBe(false)
 
-    const nameField = form.defineField({ path: "name" });
+    const nameField = form.defineField({ path: 'name' })
 
-    expect(form.fields.value.length).toBe(1);
-    expect(form.isDirty.value).toBe(false);
+    expect(form.fields.value.length).toBe(1)
+    expect(form.isDirty.value).toBe(false)
 
-    nameField.setData("Bob");
+    nameField.setData('Bob')
 
-    expect(form.isDirty.value).toBe(true);
-  });
+    expect(form.isDirty.value).toBe(true)
+  })
 
-  it("fields can be made reactive", async () => {
+  it('fields can be made reactive', async () => {
     const form = useForm({
       initialData: {
-        name: "John",
+        name: 'John',
         age: 30,
       },
-    });
+    })
 
-    const nameField = form.defineField({ path: "name" });
+    const nameField = form.defineField({ path: 'name' })
 
-    expect(isReactive(reactive(nameField))).toBe(true);
-  });
+    expect(isReactive(reactive(nameField))).toBe(true)
+  })
 
-  it("fields should only be removed when all references are gone", async () => {
+  it('fields should only be removed when all references are gone', async () => {
     const form = useForm({
       initialData: {
-        name: "John",
+        name: 'John',
         age: 30,
       },
-    });
+    })
 
-    expect(form.fields.value).toEqual([]);
+    expect(form.fields.value).toEqual([])
 
-    const scope1 = effectScope();
+    const scope1 = effectScope()
 
     scope1.run(() => {
-      form.defineField({ path: "name" });
-    });
+      form.defineField({ path: 'name' })
+    })
 
-    expect(form.fields.value.length).toBe(1);
+    expect(form.fields.value.length).toBe(1)
 
-    const scope2 = effectScope();
+    const scope2 = effectScope()
 
     scope2.run(() => {
-      form.defineField({ path: "name" });
-    });
+      form.defineField({ path: 'name' })
+    })
 
-    expect(form.fields.value.length).toBe(1);
+    expect(form.fields.value.length).toBe(1)
 
-    scope1.stop();
+    scope1.stop()
 
-    expect(form.fields.value.length).toBe(1);
+    expect(form.fields.value.length).toBe(1)
 
-    scope2.stop();
+    scope2.stop()
 
-    expect(form.fields.value.length).toBe(0);
-  });
+    expect(form.fields.value.length).toBe(0)
+  })
 
   it(
-    "it should take over the new initial data from the form",
+    'it should take over the new initial data from the form',
     { timeout: 500 },
     async () => {
       const initialData = ref({
-        name: "foo",
-      });
+        name: 'foo',
+      })
 
       const form = useForm({
         initialData,
-      });
+      })
 
-      const nameField = form.getField("name");
+      const nameField = form.getField('name')
 
-      expect(form.isDirty.value).toBe(false);
-      expect(nameField.dirty.value).toBe(false);
+      expect(form.isDirty.value).toBe(false)
+      expect(nameField.dirty.value).toBe(false)
 
-      nameField.setData("modified");
+      nameField.setData('modified')
 
-      expect(form.isDirty.value).toBe(true);
-      expect(nameField.dirty.value).toBe(true);
+      expect(form.isDirty.value).toBe(true)
+      expect(nameField.dirty.value).toBe(true)
 
       initialData.value = {
-        name: "bar",
-      };
+        name: 'bar',
+      }
 
-      expect(form.initialData.value.name).toBe("bar");
-      expect(nameField.initialValue.value).toBe("bar");
-      expect(nameField.data.value).toBe("bar");
+      expect(form.initialData.value.name).toBe('bar')
+      expect(nameField.initialValue.value).toBe('bar')
+      expect(nameField.data.value).toBe('bar')
 
-      nameField.setInitialData("another");
+      nameField.setInitialData('another')
 
-      expect(nameField.initialValue.value).toBe("another");
-      expect(nameField.data.value).toBe("another");
+      expect(nameField.initialValue.value).toBe('another')
+      expect(nameField.data.value).toBe('another')
     },
-  );
+  )
 
   it(
-    "it should take over the new initial data from the form after setting initial data on field",
+    'it should take over the new initial data from the form after setting initial data on field',
     { timeout: 500 },
     async () => {
       const initialData = ref({
         name: null as null | number,
-      });
+      })
 
       const form = useForm({
         initialData,
-      });
+      })
 
-      const nameField = form.getField("name");
+      const nameField = form.getField('name')
 
-      expect(form.isDirty.value).toBe(false);
-      expect(nameField.dirty.value).toBe(false);
+      expect(form.isDirty.value).toBe(false)
+      expect(nameField.dirty.value).toBe(false)
 
-      nameField.setInitialData(0);
+      nameField.setInitialData(0)
 
-      expect(form.isDirty.value).toBe(false);
-      expect(nameField.dirty.value).toBe(false);
+      expect(form.isDirty.value).toBe(false)
+      expect(nameField.dirty.value).toBe(false)
 
       initialData.value = {
         name: null,
-      };
+      }
 
-      expect(form.initialData.value.name).toBe(null);
-      expect(nameField.initialValue.value).toBe(null);
-      expect(nameField.data.value).toBe(null);
+      expect(form.initialData.value.name).toBe(null)
+      expect(nameField.initialValue.value).toBe(null)
+      expect(nameField.data.value).toBe(null)
 
-      nameField.setInitialData(23);
+      nameField.setInitialData(23)
 
-      expect(nameField.initialValue.value).toBe(23);
-      expect(nameField.data.value).toBe(23);
+      expect(nameField.initialValue.value).toBe(23)
+      expect(nameField.data.value).toBe(23)
     },
-  );
+  )
 
-  it("it should keep values on unmount if keepValuesOnUnmount is true (default)", async () => {
+  it('it should keep values on unmount if keepValuesOnUnmount is true (default)', async () => {
     const form = useForm({
       initialData: {
-        name: "A",
+        name: 'A',
       },
-    });
+    })
 
     effectScope().run(() => {
-      const nameField = form.defineField({ path: "name" });
+      const nameField = form.defineField({ path: 'name' })
 
-      expect(form.fields.value.length).toBe(1);
-      expect(nameField.data.value).toBe("A");
+      expect(form.fields.value.length).toBe(1)
+      expect(nameField.data.value).toBe('A')
 
-      nameField.setData("Modified");
-    });
+      nameField.setData('Modified')
+    })
 
-    expect(form.data.value.name).toBe("Modified");
-  });
+    expect(form.data.value.name).toBe('Modified')
+  })
 
-  it("it should NOT keep values on unmount if keepValuesOnUnmount is false", async () => {
+  it('it should NOT keep values on unmount if keepValuesOnUnmount is false', async () => {
     const form = useForm({
       initialData: {
-        name: "A",
+        name: 'A',
       },
       keepValuesOnUnmount: false,
-    });
+    })
 
-    const scope = effectScope();
+    const scope = effectScope()
 
     scope.run(() => {
-      const nameField = form.defineField({ path: "name" });
+      const nameField = form.defineField({ path: 'name' })
 
-      expect(form.fields.value.length).toBe(1);
-      expect(nameField.data.value).toBe("A");
+      expect(form.fields.value.length).toBe(1)
+      expect(nameField.data.value).toBe('A')
 
-      nameField.setData("Modified");
-    });
+      nameField.setData('Modified')
+    })
 
-    scope.stop();
+    scope.stop()
 
-    expect(form.data.value.name).toBe("A");
-  });
+    expect(form.data.value.name).toBe('A')
+  })
 
-  it("it not create empty objects if the field is going to be destroyed", async () => {
+  it('it not create empty objects if the field is going to be destroyed', async () => {
     const form = useForm({
       initialData: {
         data: { names: [] as string[] },
       },
-    });
+    })
 
-    const scope = effectScope();
+    const scope = effectScope()
 
     scope.run(() => {
-      const nameField = form.defineField({ path: "data.names.0" });
-      nameField.setData("Modified");
-      form.reset();
-    });
+      const nameField = form.defineField({ path: 'data.names.0' })
+      nameField.setData('Modified')
+      form.reset()
+    })
 
-    scope.stop();
+    scope.stop()
 
-    expect(form.data.value.data.names).toHaveLength(0);
-  });
+    expect(form.data.value.data.names).toHaveLength(0)
+  })
 
-  it("it not create empty objects if the nested array field is going to be destroyed", async () => {
+  it('it not create empty objects if the nested array field is going to be destroyed', async () => {
     const form = useForm({
       initialData: {
         data: [] as Array<{ name: string }>,
       },
-    });
+    })
 
-    const scope = effectScope();
+    const scope = effectScope()
 
     scope.run(() => {
-      const nameField = form.defineField({ path: "data.0.name" });
-      nameField.setData("Modified");
-      form.reset();
-    });
+      const nameField = form.defineField({ path: 'data.0.name' })
+      nameField.setData('Modified')
+      form.reset()
+    })
 
-    scope.stop();
+    scope.stop()
 
-    expect(form.data.value.data).toHaveLength(0);
-  });
+    expect(form.data.value.data).toHaveLength(0)
+  })
 
-  describe("useForm - submit handler", () => {
+  describe('useForm - submit handler', () => {
     it(
-      "it should not call the handler when validation errors exist",
+      'it should not call the handler when validation errors exist',
       { timeout: 500 },
       async () => {
         const initialData = ref({
           name: null as null | number,
-        });
+        })
 
         const schema = z.object({
           name: z.number().min(5),
-        });
+        })
 
         const form = useForm({
           initialData,
           schema,
-        });
+        })
 
-        const nameField = form.getField("name");
+        const nameField = form.getField('name')
 
-        const cb = vi.fn();
+        const cb = vi.fn()
 
-        const handler = form.submitHandler(cb);
+        const handler = form.submitHandler(cb)
 
-        await handler(new SubmitEvent("submit"));
+        await handler(new SubmitEvent('submit'))
 
-        expect(form.isValidated.value).toBe(true);
-        expect(cb).not.toHaveBeenCalled();
-        expect(nameField.errors.value?.length).toBe(1);
+        expect(form.isValidated.value).toBe(true)
+        expect(cb).not.toHaveBeenCalled()
+        expect(nameField.errors.value?.length).toBe(1)
       },
-    );
+    )
 
     it(
-      "it should call the handler when no validation errors exist",
+      'it should call the handler when no validation errors exist',
       { timeout: 500 },
       async () => {
         const initialData = ref({
           name: 10,
-        });
+        })
 
         const schema = z.object({
           name: z.number().min(5),
-        });
+        })
 
         const form = useForm({
           initialData,
           schema,
-        });
+        })
 
-        const nameField = form.getField("name");
+        const nameField = form.getField('name')
 
-        const cb = vi.fn();
+        const cb = vi.fn()
 
-        const handler = form.submitHandler(cb);
+        const handler = form.submitHandler(cb)
 
-        await handler(new SubmitEvent("submit"));
+        await handler(new SubmitEvent('submit'))
 
-        expect(form.isValidated.value).toBe(true);
-        expect(cb).toHaveBeenCalled();
-        expect(nameField.errors.value?.length).toBe(0);
+        expect(form.isValidated.value).toBe(true)
+        expect(cb).toHaveBeenCalled()
+        expect(nameField.errors.value?.length).toBe(0)
       },
-    );
-  });
-});
+    )
+  })
+})