@tanstack/form-core 0.20.2 → 0.21.0

package/src/tests/FormApi.spec.ts

@@ -324,6 +324,42 @@ describe('form api', () => {
     expect(form.getFieldValue('names')).toStrictEqual(['test', 'other'])
   })
 
+  it("should insert an array field's value as first element", () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two', 'three'],
+      },
+    })
+    form.mount()
+    form.insertFieldValue('names', 0, 'other')
+
+    expect(form.getFieldValue('names')).toStrictEqual([
+      'other',
+      'one',
+      'two',
+      'three',
+    ])
+  })
+
+  it("should run onChange validation when pushing an array field's value", () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['test'],
+      },
+      validators: {
+        onChange: ({ value }) =>
+          value.names.length > 3 ? undefined : 'At least 3 names are required',
+      },
+    })
+    form.mount()
+    // Since validation runs through the field, a field must be mounted for that array
+    new FieldApi({ form, name: 'names' }).mount()
+
+    form.pushFieldValue('names', 'other')
+
+    expect(form.state.errors).toStrictEqual(['At least 3 names are required'])
+  })
+
   it("should insert an array field's value", () => {
     const form = new FormApi({
       defaultValues: {
@@ -333,9 +369,105 @@ describe('form api', () => {
     form.mount()
     form.insertFieldValue('names', 1, 'other')
 
+    expect(form.getFieldValue('names')).toStrictEqual([
+      'one',
+      'other',
+      'two',
+      'three',
+    ])
+  })
+
+  it("should insert an array field's value at the end if the index is higher than the length", () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two', 'three'],
+      },
+    })
+    form.mount()
+    form.insertFieldValue('names', 10, 'other')
+
+    expect(form.getFieldValue('names')).toStrictEqual([
+      'one',
+      'two',
+      'three',
+      'other',
+    ])
+  })
+
+  it("should replace an array field's value", () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two', 'three'],
+      },
+    })
+    form.mount()
+    form.replaceFieldValue('names', 1, 'other')
+
     expect(form.getFieldValue('names')).toStrictEqual(['one', 'other', 'three'])
   })
 
+  it("should do nothing when replacing an array field's value with an index that doesn't exist", () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two', 'three'],
+      },
+    })
+    form.mount()
+    form.replaceFieldValue('names', 10, 'other')
+
+    expect(form.getFieldValue('names')).toStrictEqual(['one', 'two', 'three'])
+  })
+
+  it("should run onChange validation when inserting an array field's value", () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['test'],
+      },
+      validators: {
+        onChange: ({ value }) =>
+          value.names.length > 3 ? undefined : 'At least 3 names are required',
+      },
+    })
+    form.mount()
+    // Since validation runs through the field, a field must be mounted for that array
+    new FieldApi({ form, name: 'names' }).mount()
+
+    form.insertFieldValue('names', 1, 'other')
+
+    expect(form.state.errors).toStrictEqual(['At least 3 names are required'])
+  })
+
+  it("should validate all shifted fields when inserting an array field's value", async () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: [{ first: 'test' }, { first: 'test2' }],
+      },
+      validators: {
+        onChange: ({ value }) =>
+          value.names.length > 3 ? undefined : 'At least 3 names are required',
+      },
+    })
+    form.mount()
+    // Since validation runs through the field, a field must be mounted for that array
+    new FieldApi({ form, name: 'names' }).mount()
+
+    const field1 = new FieldApi({
+      form,
+      name: 'names[0].first',
+      defaultValue: 'test',
+      validators: {
+        onChange: ({ value }) => value !== 'test' && 'Invalid value',
+      },
+    })
+    field1.mount()
+
+    expect(field1.state.meta.errors).toStrictEqual([])
+
+    await form.replaceFieldValue('names', 0, { first: 'other' })
+
+    expect(field1.state.meta.errors).toStrictEqual(['Invalid value'])
+  })
+
   it("should remove an array field's value", () => {
     const form = new FormApi({
       defaultValues: {
@@ -348,6 +480,79 @@ describe('form api', () => {
     expect(form.getFieldValue('names')).toStrictEqual(['one', 'three'])
   })
 
+  it("should run onChange validation when removing an array field's value", () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['test'],
+      },
+      validators: {
+        onChange: ({ value }) =>
+          value.names.length > 1 ? undefined : 'At least 1 name is required',
+      },
+    })
+    form.mount()
+    // Since validation runs through the field, a field must be mounted for that array
+    new FieldApi({ form, name: 'names' }).mount()
+
+    form.removeFieldValue('names', 0)
+
+    expect(form.state.errors).toStrictEqual(['At least 1 name is required'])
+  })
+
+  it("should validate following fields when removing an array field's value", async () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['test', 'test2', 'test3'],
+      },
+      validators: {
+        onChange: ({ value }) =>
+          value.names.length > 1 ? undefined : 'At least 1 name is required',
+      },
+    })
+    form.mount()
+    // Since validation runs through the field, a field must be mounted for that array
+    new FieldApi({ form, name: 'names' }).mount()
+
+    const field1 = new FieldApi({
+      form,
+      name: 'names[0]',
+      defaultValue: 'test',
+      validators: {
+        onChange: ({ value }) => value !== 'test' && 'Invalid value',
+      },
+    })
+    field1.mount()
+    const field2 = new FieldApi({
+      form,
+      name: 'names[1]',
+      defaultValue: 'test2',
+      validators: {
+        onChange: ({ value }) => value !== 'test2' && 'Invalid value',
+      },
+    })
+    field2.mount()
+    const field3 = new FieldApi({
+      form,
+      name: 'names[2]',
+      defaultValue: 'test3',
+      validators: {
+        onChange: ({ value }) => value !== 'test3' && 'Invalid value',
+      },
+    })
+    field3.mount()
+
+    expect(field1.state.meta.errors).toStrictEqual([])
+    expect(field2.state.meta.errors).toStrictEqual([])
+    expect(field3.state.meta.errors).toStrictEqual([])
+
+    await form.removeFieldValue('names', 1)
+
+    expect(field1.state.meta.errors).toStrictEqual([])
+    expect(field2.state.meta.errors).toStrictEqual(['Invalid value'])
+    // This field does not exist anymore. Therefore, its validation should also not run
+    expect(field3.state.meta.errors).toStrictEqual([])
+  })
+
   it("should swap an array field's value", () => {
     const form = new FormApi({
       defaultValues: {
@@ -355,11 +560,146 @@ describe('form api', () => {
       },
     })
     form.mount()
+    // Since validation runs through the field, a field must be mounted for that array
+    new FieldApi({ form, name: 'names' }).mount()
+
     form.swapFieldValues('names', 1, 2)
 
     expect(form.getFieldValue('names')).toStrictEqual(['one', 'three', 'two'])
   })
 
+  it("should run onChange validation when swapping an array field's value", () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['test', 'test2'],
+      },
+      validators: {
+        onChange: ({ value }) =>
+          value.names.length > 3 ? undefined : 'At least 3 names are required',
+      },
+    })
+    form.mount()
+    // Since validation runs through the field, a field must be mounted for that array
+    new FieldApi({ form, name: 'names' }).mount()
+    expect(form.state.errors).toStrictEqual([])
+
+    form.swapFieldValues('names', 1, 2)
+
+    expect(form.state.errors).toStrictEqual(['At least 3 names are required'])
+  })
+
+  it('should run validation on swapped fields', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['test', 'test2'],
+      },
+      validators: {
+        onChange: ({ value }) =>
+          value.names.length > 3 ? undefined : 'At least 3 names are required',
+      },
+    })
+    form.mount()
+    // Since validation runs through the field, a field must be mounted for that array
+    new FieldApi({ form, name: 'names' }).mount()
+
+    const field1 = new FieldApi({
+      form,
+      name: 'names[0]',
+      defaultValue: 'test',
+      validators: {
+        onChange: ({ value }) => value !== 'test' && 'Invalid value',
+      },
+    })
+    field1.mount()
+
+    const field2 = new FieldApi({
+      form,
+      name: 'names[1]',
+      defaultValue: 'test2',
+    })
+    field2.mount()
+
+    expect(field1.state.meta.errors).toStrictEqual([])
+    expect(field2.state.meta.errors).toStrictEqual([])
+
+    form.swapFieldValues('names', 0, 1)
+
+    expect(field1.state.meta.errors).toStrictEqual(['Invalid value'])
+    expect(field2.state.meta.errors).toStrictEqual([])
+  })
+
+  it("should move an array field's value", () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two', 'three'],
+      },
+    })
+    form.mount()
+    form.moveFieldValues('names', 1, 2)
+
+    expect(form.getFieldValue('names')).toStrictEqual(['one', 'three', 'two'])
+  })
+
+  it("should run onChange validation when moving an array field's value", () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['test', 'test2'],
+      },
+      validators: {
+        onChange: ({ value }) =>
+          value.names.length > 3 ? undefined : 'At least 3 names are required',
+      },
+    })
+    form.mount()
+    // Since validation runs through the field, a field must be mounted for that array
+    new FieldApi({ form, name: 'names' }).mount()
+
+    expect(form.state.errors).toStrictEqual([])
+    form.moveFieldValues('names', 0, 1)
+
+    expect(form.state.errors).toStrictEqual(['At least 3 names are required'])
+  })
+
+  it('should run validation on moved fields', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['test', 'test2'],
+      },
+      validators: {
+        onChange: ({ value }) =>
+          value.names.length > 3 ? undefined : 'At least 3 names are required',
+      },
+    })
+    form.mount()
+    // Since validation runs through the field, a field must be mounted for that array
+    new FieldApi({ form, name: 'names' }).mount()
+
+    const field1 = new FieldApi({
+      form,
+      name: 'names[0]',
+      defaultValue: 'test',
+      validators: {
+        onChange: ({ value }) => value !== 'test' && 'Invalid value',
+      },
+    })
+    field1.mount()
+
+    const field2 = new FieldApi({
+      form,
+      name: 'names[1]',
+      defaultValue: 'test2',
+    })
+    field2.mount()
+
+    expect(field1.state.meta.errors).toStrictEqual([])
+    expect(field2.state.meta.errors).toStrictEqual([])
+
+    form.swapFieldValues('names', 0, 1)
+
+    expect(field1.state.meta.errors).toStrictEqual(['Invalid value'])
+    expect(field2.state.meta.errors).toStrictEqual([])
+  })
+
   it('should handle fields inside an array', async () => {
     interface Employee {
       firstName: string
@@ -1052,6 +1392,35 @@ describe('form api', () => {
     expect(field.getMeta().errorMap.onChange).toEqual('first name is required')
   })
 
+  it('should validate a single field consistently if touched', async () => {
+    const form = new FormApi({
+      defaultValues: {
+        firstName: '',
+        lastName: '',
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'firstName',
+      validators: {
+        onChange: ({ value }) =>
+          value.length > 0 ? undefined : 'first name is required',
+      },
+      defaultMeta: {
+        isTouched: true,
+      },
+    })
+
+    field.mount()
+    form.mount()
+
+    await form.validateField('firstName', 'change')
+    expect(field.getMeta().errorMap.onChange).toEqual('first name is required')
+    await form.validateField('firstName', 'change')
+    expect(field.getMeta().errorMap.onChange).toEqual('first name is required')
+  })
+
   it('should show onSubmit errors', async () => {
     const form = new FormApi({
       defaultValues: {