refactor(form-core): adjust unit tests for parseValuesWithSchema

Author: LeCarbonator

docs/framework/react/guides/validation.md

@@ -510,7 +510,6 @@ If you need even more control over your Standard Schema validation, you can comb
   name="age"
   asyncDebounceMs={500}
   validators={{
-    onChange: 1500,
     onChangeAsync: async ({ value, fieldApi }) => {
       const errors = fieldApi.parseValueWithSchema(
         z.number().gte(13, 'You must be 13 to make an account'),

packages/form-core/src/FieldApi.ts

@@ -1648,7 +1648,7 @@ export class FieldApi<
    * issues (if any). This method does NOT set any internal errors.
    * @param schema The standard schema to parse this field's value with.
    */
-  parseValueWithSchema(schema: StandardSchemaV1) {
+  parseValueWithSchema = (schema: StandardSchemaV1<TData, unknown>) => {
     return standardSchemaValidators.validate(
       { value: this.state.value, validationSource: 'field' },
       schema,
@@ -1660,7 +1660,7 @@ export class FieldApi<
    * issues (if any). This method does NOT set any internal errors.
    * @param schema The standard schema to parse this field's value with.
    */
-  parseValueWithSchemaAsync(schema: StandardSchemaV1) {
+  parseValueWithSchemaAsync = (schema: StandardSchemaV1<TData, unknown>) => {
     return standardSchemaValidators.validateAsync(
       { value: this.state.value, validationSource: 'field' },
       schema,

packages/form-core/src/FormApi.ts

@@ -2072,7 +2072,9 @@ export class FormApi<
    * issues (if any). This method does NOT set any internal errors.
    * @param schema The standard schema to parse the form values with.
    */
-  parseFieldValuesWithSchema(schema: StandardSchemaV1) {
+  parseFieldValuesWithSchema = (
+    schema: StandardSchemaV1<TFormData, unknown>,
+  ) => {
     return standardSchemaValidators.validate(
       { value: this.state.values, validationSource: 'form' },
       schema,
@@ -2084,7 +2086,9 @@ export class FormApi<
    * issues (if any). This method does NOT set any internal errors.
    * @param schema The standard schema to parse the form values with.
    */
-  parseFieldValuesWithSchemaAsync(schema: StandardSchemaV1) {
+  parseFieldValuesWithSchemaAsync = (
+    schema: StandardSchemaV1<TFormData, unknown>,
+  ) => {
     return standardSchemaValidators.validateAsync(
       { value: this.state.values, validationSource: 'form' },
       schema,

packages/form-core/tests/FieldApi.spec.ts

@@ -1956,7 +1956,9 @@ describe('field api', () => {
     expect(onBlurMock).toHaveBeenCalledTimes(1)
   })
 
-  it('should pass the current value to the standard schema when calling parseValueWithSchema', async () => {
+  it('should pass the current value to the Standard Schema when calling parseValueWithSchema', async () => {
+    const schema = z.string().min(3)
+
     const form = new FormApi({
       defaultValues: {
         firstName: '',
@@ -1971,18 +1973,20 @@ describe('field api', () => {
     field.mount()
 
     // The schema should complain that the value is too short
-    const firstNameSchemaResult = field.parseValueWithSchema(z.string().min(3))
-    expect(firstNameSchemaResult).not.toBeUndefined()
-    expect(Array.isArray(firstNameSchemaResult)).toBe(true)
-    expect(firstNameSchemaResult).not.toHaveLength(0)
+    const issueResult = field.parseValueWithSchema(schema)
+    expect(issueResult).toBeDefined()
+    expect(Array.isArray(issueResult)).toBe(true)
+    expect(issueResult?.length).toBeGreaterThan(0)
 
     field.setValue('some long name that satisfies firstNameSchemaResult')
     // the schema should now be satisfied
-    const successResult = field.parseValueWithSchema(z.string().min(3))
+    const successResult = field.parseValueWithSchema(schema)
     expect(successResult).toBeUndefined()
   })
 
-  it('should pass the current value to the standard schema when calling parseValueWithSchemaAsync', async () => {
+  it('should pass the current value to the Standard Schema when calling parseValueWithSchemaAsync', async () => {
+    const schema = z.string().min(3)
+
     const form = new FormApi({
       defaultValues: {
         firstName: '',
@@ -1997,25 +2001,25 @@ describe('field api', () => {
     field.mount()
 
     // The schema should complain that the value is too short
-    const firstNamePromise = field.parseValueWithSchemaAsync(z.string().min(3))
-    expect(firstNamePromise).toBeInstanceOf(Promise)
+    const issuePromise = field.parseValueWithSchemaAsync(schema)
+    expect(issuePromise).toBeInstanceOf(Promise)
 
-    const firstNameSchemaResult = await firstNamePromise
+    const issueResult = await issuePromise
 
-    expect(firstNameSchemaResult).not.toBeUndefined()
-    expect(Array.isArray(firstNameSchemaResult)).toBe(true)
-    expect(firstNameSchemaResult).not.toHaveLength(0)
+    expect(issueResult).toBeDefined()
+    expect(Array.isArray(issueResult)).toBe(true)
+    expect(issueResult?.length).toBeGreaterThan(0)
 
     field.setValue('some long name that satisfies firstNameSchemaResult')
     // the schema should now be satisfied
-    const successPromise = field.parseValueWithSchemaAsync(z.string().min(3))
+    const successPromise = field.parseValueWithSchemaAsync(schema)
     expect(successPromise).toBeInstanceOf(Promise)
 
     const successResult = await successPromise
     expect(successResult).toBeUndefined()
   })
 
-  it('should throw an error when passing an async schema to parseValueWithSchema', async () => {
+  it('should throw an error when passing an async Standard Schema to parseValueWithSchema', async () => {
     const testSchema = z.string().superRefine(async () => {
       await sleep(1000)
       return true

packages/form-core/tests/FieldApi.test-d.ts

@@ -1,5 +1,7 @@
 import { assertType, describe, it } from 'vitest'
+import { z } from 'zod'
 import { FieldApi, FormApi } from '../src/index'
+import type { StandardSchemaV1Issue } from '../src/index'
 
 it('should type value properly', () => {
   const form = new FormApi({
@@ -356,3 +358,25 @@ it('should handle "sub-fields" async return types added to the field\'s error ar
 
   assertType<Array<'Testing' | undefined>>(field.getMeta().errors)
 })
+
+it('should only have field-level error types returned from parseValueWithSchema and parseValueWithSchemaAsync', () => {
+  const form = new FormApi({
+    defaultValues: { name: '' },
+  })
+  form.mount()
+
+  const field = new FieldApi({
+    form,
+    name: 'name',
+  })
+  field.mount()
+
+  const schema = z.string()
+  // assert that it doesn't think it's a form-level error
+  assertType<StandardSchemaV1Issue[] | undefined>(
+    field.parseValueWithSchema(schema),
+  )
+  assertType<Promise<StandardSchemaV1Issue[] | undefined>>(
+    field.parseValueWithSchemaAsync(schema),
+  )
+})

packages/form-core/tests/FormApi.spec.ts

@@ -2909,11 +2909,8 @@ describe('form api', () => {
     expect(form.state.canSubmit).toBe(true)
   })
 
-  it('should pass the current values to the standard schema when calling parseValuesWithSchema', async () => {
-    const nameSchema = z.object({
-      name: z.string(),
-    })
-    const firstNameSchema = z.object({
+  it('should pass the current values to the Standard Schema when calling parseValuesWithSchema', async () => {
+    const schema = z.object({
       firstName: z.string().min(3),
     })
 
@@ -2924,47 +2921,31 @@ describe('form api', () => {
     })
     form.mount()
 
-    const nameSchemaResult = form.parseFieldValuesWithSchema(nameSchema)
-    // Name schema should complain that 'name' is missing in our form
-    expect(nameSchemaResult).not.toBeUndefined()
-    expect(Array.isArray(nameSchemaResult)).not.toBe(true)
-
-    expect(nameSchemaResult).toHaveProperty('fields')
-    expect(nameSchemaResult).toHaveProperty('form')
-
-    expect(nameSchemaResult?.fields).toHaveProperty('name')
-    expect(Array.isArray(nameSchemaResult?.fields['name'])).toBe(true)
-    expect(nameSchemaResult?.fields['name']).not.toHaveLength(0)
-
     // First name schema should complain that 'firstName' is too short
-    const firstNameSchemaResult =
-      form.parseFieldValuesWithSchema(firstNameSchema)
-    expect(firstNameSchemaResult).not.toBeUndefined()
-    expect(Array.isArray(firstNameSchemaResult)).not.toBe(true)
+    const issueResult = form.parseFieldValuesWithSchema(schema)
+    expect(issueResult).toBeDefined()
+    expect(Array.isArray(issueResult)).toBe(false)
 
-    expect(firstNameSchemaResult).toHaveProperty('fields')
-    expect(firstNameSchemaResult).toHaveProperty('form')
+    expect(issueResult).toHaveProperty('fields')
+    expect(issueResult).toHaveProperty('form')
 
-    expect(firstNameSchemaResult?.fields).toHaveProperty('firstName')
-    expect(Array.isArray(firstNameSchemaResult?.fields['firstName'])).toBe(true)
-    expect(firstNameSchemaResult?.fields['firstName']).not.toHaveLength(0)
+    expect(issueResult?.fields).toHaveProperty('firstName')
+    expect(Array.isArray(issueResult?.fields['firstName'])).toBe(true)
+    expect(issueResult?.fields['firstName']?.length).toBeGreaterThan(0)
 
     form.setFieldValue(
       'firstName',
       'some long name that satisfies firstNameSchemaResult',
     )
     // firstName should now be satisfied
-    const successResult = form.parseFieldValuesWithSchema(firstNameSchema)
+    const successResult = form.parseFieldValuesWithSchema(schema)
     expect(successResult).toBeUndefined()
   })
 
-  it('should pass the current values to the standard schema when calling parseValuesWithSchemaAsync', async () => {
+  it('should pass the current values to the Standard Schema when calling parseValuesWithSchemaAsync', async () => {
     vi.useFakeTimers()
 
-    const nameSchema = z.object({
-      name: z.string(),
-    })
-    const firstNameSchema = z.object({
+    const schema = z.object({
       firstName: z.string().min(3),
     })
 
@@ -2975,53 +2956,36 @@ describe('form api', () => {
     })
     form.mount()
 
-    const nameSchemaPromise = form.parseFieldValuesWithSchemaAsync(nameSchema)
-    expect(nameSchemaPromise).toBeInstanceOf(Promise)
-
-    const nameSchemaResult = await nameSchemaPromise
-
-    // Name schema should complain that 'name' is missing in our form
-    expect(nameSchemaResult).not.toBeUndefined()
-    expect(Array.isArray(nameSchemaResult)).not.toBe(true)
-
-    expect(nameSchemaResult).toHaveProperty('fields')
-    expect(nameSchemaResult).toHaveProperty('form')
-
-    expect(nameSchemaResult?.fields).toHaveProperty('name')
-    expect(Array.isArray(nameSchemaResult?.fields['name'])).toBe(true)
-    expect(nameSchemaResult?.fields['name']).not.toHaveLength(0)
-
     // First name schema should complain that 'firstName' is too short
-    const firstNamePromise =
-      form.parseFieldValuesWithSchemaAsync(firstNameSchema)
-    expect(firstNamePromise).toBeInstanceOf(Promise)
+    const issuePromise = form.parseFieldValuesWithSchemaAsync(schema)
+    expect(issuePromise).toBeInstanceOf(Promise)
 
-    const firstNameSchemaResult = await firstNamePromise
+    const issueResult = await issuePromise
 
-    expect(firstNameSchemaResult).not.toBeUndefined()
-    expect(Array.isArray(firstNameSchemaResult)).not.toBe(true)
+    expect(issueResult).toBeDefined()
+    expect(Array.isArray(issueResult)).toBe(false)
 
-    expect(firstNameSchemaResult).toHaveProperty('fields')
-    expect(firstNameSchemaResult).toHaveProperty('form')
+    expect(issueResult).toHaveProperty('fields')
+    expect(issueResult).toHaveProperty('form')
 
-    expect(firstNameSchemaResult?.fields).toHaveProperty('firstName')
-    expect(Array.isArray(firstNameSchemaResult?.fields['firstName'])).toBe(true)
-    expect(firstNameSchemaResult?.fields['firstName']).not.toHaveLength(0)
+    expect(issueResult?.fields).toHaveProperty('firstName')
+    expect(Array.isArray(issueResult?.fields['firstName'])).toBe(true)
+    expect(issueResult?.fields['firstName']?.length).toBeGreaterThan(0)
 
     form.setFieldValue(
       'firstName',
       'some long name that satisfies firstNameSchemaResult',
     )
 
     // firstName should now be satisfied
-    const successPromise = form.parseFieldValuesWithSchemaAsync(firstNameSchema)
+    const successPromise = form.parseFieldValuesWithSchemaAsync(schema)
     expect(successPromise).toBeInstanceOf(Promise)
 
     const successResult = await successPromise
     expect(successResult).toBeUndefined()
   })
 
-  it('should throw an error when passing an async schema to parseValuesWithSchema', async () => {
+  it('should throw an error when passing an async Standard Schema to parseValuesWithSchema', async () => {
     const testSchema = z
       .object({
         name: z.string(),

packages/form-core/tests/FormApi.test-d.ts

@@ -1,6 +1,11 @@
 import { assertType, it } from 'vitest'
+import { z } from 'zod'
 import { FormApi } from '../src'
-import type { ValidationError, ValidationErrorMap } from '../src'
+import type {
+  StandardSchemaV1Issue,
+  ValidationError,
+  ValidationErrorMap,
+} from '../src'
 
 it('should return all errors matching the right type from getAllErrors', () => {
   const form = new FormApi({
@@ -84,3 +89,26 @@ it('should type handleChange correctly', () => {
     form.handleSubmit,
   )
 })
+
+type FormLevelStandardSchemaIssue = {
+  form: Record<string, StandardSchemaV1Issue[]>
+  fields: Record<string, StandardSchemaV1Issue[]>
+}
+
+it('should only have form-level error types returned from parseFieldValuesWithSchema and parseFieldValuesWithSchemaAsync', () => {
+  const form = new FormApi({
+    defaultValues: { name: '' },
+  })
+  form.mount()
+
+  const schema = z.object({
+    name: z.string(),
+  })
+  // assert that it doesn't think it's a field-level error
+  assertType<FormLevelStandardSchemaIssue | undefined>(
+    form.parseFieldValuesWithSchema(schema),
+  )
+  assertType<Promise<FormLevelStandardSchemaIssue | undefined>>(
+    form.parseFieldValuesWithSchemaAsync(schema),
+  )
+})

packages/form-core/tests/standardSchemaValidator.test-d.ts

@@ -1,6 +1,6 @@
 import { assertType, describe, it } from 'vitest'
 import { z } from 'zod'
-import { FieldApi, FormApi } from '../src/index'
+import { FieldApi, FormApi, standardSchemaValidators } from '../src/index'
 import type { StandardSchemaV1Issue } from '../src/index'
 
 describe('standard schema validator', () => {
@@ -56,4 +56,39 @@ describe('standard schema validator', () => {
       field.getMeta().errorMap.onChange,
     )
   })
+
+  type FormLevelStandardSchemaIssue = {
+    form: Record<string, StandardSchemaV1Issue[]>
+    fields: Record<string, StandardSchemaV1Issue[]>
+  }
+
+  it('Should return different Standard Schema Issue types from validate based on scope', () => {
+    const formSourceError = standardSchemaValidators.validate(
+      { value: '', validationSource: 'form' },
+      z.string(),
+    )
+    const fieldSourceError = standardSchemaValidators.validate(
+      { value: '', validationSource: 'field' },
+      z.string(),
+    )
+
+    assertType<FormLevelStandardSchemaIssue | undefined>(formSourceError)
+    assertType<StandardSchemaV1Issue[] | undefined>(fieldSourceError)
+  })
+
+  it('Should return different Standard Schema Issue types from validateAsync based on scope', () => {
+    const formSourceError = standardSchemaValidators.validateAsync(
+      { value: '', validationSource: 'form' },
+      z.string(),
+    )
+    const fieldSourceError = standardSchemaValidators.validateAsync(
+      { value: '', validationSource: 'field' },
+      z.string(),
+    )
+
+    assertType<Promise<FormLevelStandardSchemaIssue | undefined>>(
+      formSourceError,
+    )
+    assertType<Promise<StandardSchemaV1Issue[] | undefined>>(fieldSourceError)
+  })
 })