test: add tests on yup and valibot

packages/valibot-form-adapter/package.json

@@ -54,7 +54,8 @@
     "@tanstack/form-core": "workspace:*"
   },
   "devDependencies": {
-    "valibot": "^0.37.0"
+    "valibot": "^0.37.0",
+    "@tanstack/react-form": "workspace:*"
   },
   "peerDependencies": {
     "valibot": ">=0.33.0 <1"

packages/valibot-form-adapter/tests/createServerValidate.spec.ts

@@ -0,0 +1,118 @@
+import { describe, expect, it } from 'vitest'
+
+import { createServerValidate } from '@tanstack/react-form/nextjs'
+import * as v from 'valibot'
+import { valibotValidator } from '../src/index'
+import { sleep } from './utils'
+
+describe('valibot createServerValidate api', () => {
+  it('should run v.string validation', async () => {
+    const serverValidate = createServerValidate({
+      validatorAdapter: valibotValidator(),
+      onServerValidate: v.object({
+        name: v.pipe(
+          v.string(),
+          v.minLength(3, 'You must have a length of at least 3'),
+        ),
+      }),
+    })
+
+    const formData1 = new FormData()
+    formData1.append('name', 'a')
+    expect(
+      await serverValidate(formData1).catch((e) => e.formState.errors),
+    ).toEqual(['You must have a length of at least 3'])
+
+    const formData2 = new FormData()
+    formData2.append('name', 'asdf')
+    expect(await serverValidate(formData2)).toBeUndefined()
+  })
+
+  it('should run fn with valibot validation option enabled', async () => {
+    const serverValidate = createServerValidate({
+      validatorAdapter: valibotValidator(),
+      onServerValidate: ({ value }: { value: { name: string } }) =>
+        value.name === 'a' ? 'Test' : undefined,
+    })
+
+    const formData1 = new FormData()
+    formData1.append('name', 'a')
+    expect(
+      await serverValidate(formData1).catch((e) => e.formState.errors),
+    ).toEqual(['Test'])
+
+    const formData2 = new FormData()
+    formData2.append('name', 'asdf')
+    expect(await serverValidate(formData2)).toBeUndefined()
+  })
+
+  it('should run v.string async validation', async () => {
+    const serverValidate = createServerValidate({
+      validatorAdapter: valibotValidator(),
+      onServerValidate: v.pipeAsync(
+        v.object({
+          name: v.string(),
+        }),
+        v.checkAsync(async (val) => {
+          await sleep(1)
+          return val.name.length > 3
+        }, 'Testing 123'),
+      ),
+    })
+
+    const formData1 = new FormData()
+    formData1.append('name', 'a')
+    expect(
+      await serverValidate(formData1).catch((e) => e.formState.errors),
+    ).toEqual(['Testing 123'])
+
+    const formData2 = new FormData()
+    formData2.append('name', 'asdf')
+    expect(await serverValidate(formData2)).toBeUndefined()
+  })
+
+  it('should run async fn with valibot validation option enabled', async () => {
+    const serverValidate = createServerValidate({
+      validatorAdapter: valibotValidator(),
+      onServerValidate: async ({ value }: { value: { name: string } }) => {
+        await sleep(1)
+        return value.name === 'a' ? 'Test' : undefined
+      },
+    })
+
+    const formData1 = new FormData()
+    formData1.append('name', 'a')
+    expect(
+      await serverValidate(formData1).catch((e) => e.formState.errors),
+    ).toEqual(['Test'])
+
+    const formData2 = new FormData()
+    formData2.append('name', 'asdf')
+    expect(await serverValidate(formData2)).toBeUndefined()
+  })
+
+  it('should transform errors to display all error message', async () => {
+    const serverValidate = createServerValidate({
+      validatorAdapter: valibotValidator(),
+      onServerValidate: v.object({
+        name: v.pipe(
+          v.string(),
+          v.minLength(3, 'You must have a length of at least 3'),
+          v.uuid('UUID'),
+        ),
+      }),
+    })
+
+    const formData1 = new FormData()
+    formData1.append('name', 'aa')
+    expect(
+      await serverValidate(formData1).catch((e) => e.formState.errors),
+    ).toEqual(['You must have a length of at least 3, UUID'])
+
+    const formData2 = new FormData()
+    formData2.append('name', 'aaa')
+    expect(
+      await serverValidate(formData2).catch((e) => e.formState.errors),
+    ).toEqual(['UUID'])
+  })
+})

packages/yup-form-adapter/package.json

@@ -55,7 +55,8 @@
     "@tanstack/form-core": "workspace:*"
   },
   "devDependencies": {
-    "yup": "^1.4.0"
+    "yup": "^1.4.0",
+    "@tanstack/react-form": "workspace:*"
   },
   "peerDependencies": {
     "yup": "^1.x"

packages/yup-form-adapter/tests/createServerValidate.spec.ts

@@ -0,0 +1,111 @@
+import { describe, expect, it } from 'vitest'
+
+import { createServerValidate } from '@tanstack/react-form/nextjs'
+import yup from 'yup'
+import { yupValidator } from '../src/index'
+import { sleep } from './utils'
+
+describe('yup createServerValidate api', () => {
+  it('should run yup.string validation', async () => {
+    const serverValidate = createServerValidate({
+      validatorAdapter: yupValidator(),
+      onServerValidate: yup.object({
+        name: yup.string().min(3, 'You must have a length of at least 3'),
+      }),
+    })
+
+    const formData1 = new FormData()
+    formData1.append('name', 'a')
+    expect(
+      await serverValidate(formData1).catch((e) => e.formState.errors),
+    ).toEqual(['You must have a length of at least 3'])
+
+    const formData2 = new FormData()
+    formData2.append('name', 'asdf')
+    expect(await serverValidate(formData2)).toBeUndefined()
+  })
+
+  it('should run fn with yup validation option enabled', async () => {
+    const serverValidate = createServerValidate({
+      validatorAdapter: yupValidator(),
+      onServerValidate: ({ value }: { value: { name: string } }) =>
+        value.name === 'a' ? 'Test' : undefined,
+    })
+
+    const formData1 = new FormData()
+    formData1.append('name', 'a')
+    expect(
+      await serverValidate(formData1).catch((e) => e.formState.errors),
+    ).toEqual(['Test'])
+
+    const formData2 = new FormData()
+    formData2.append('name', 'asdf')
+    expect(await serverValidate(formData2)).toBeUndefined()
+  })
+
+  it('should run yup.string async validation', async () => {
+    const serverValidate = createServerValidate({
+      validatorAdapter: yupValidator(),
+      onServerValidate: yup.object({
+        name: yup.string().test('Testing 123', 'Testing 123', async (val) => {
+          await sleep(1)
+          return typeof val === 'string' ? val.length > 3 : false
+        }),
+      }),
+    })
+
+    const formData1 = new FormData()
+    formData1.append('name', 'a')
+    expect(
+      await serverValidate(formData1).catch((e) => e.formState.errors),
+    ).toEqual(['Testing 123'])
+
+    const formData2 = new FormData()
+    formData2.append('name', 'asdf')
+    expect(await serverValidate(formData2)).toBeUndefined()
+  })
+
+  it('should run async fn with yup validation option enabled', async () => {
+    const serverValidate = createServerValidate({
+      validatorAdapter: yupValidator(),
+      onServerValidate: async ({ value }: { value: { name: string } }) => {
+        await sleep(1)
+        return value.name === 'a' ? 'Test' : undefined
+      },
+    })
+
+    const formData1 = new FormData()
+    formData1.append('name', 'a')
+    expect(
+      await serverValidate(formData1).catch((e) => e.formState.errors),
+    ).toEqual(['Test'])
+
+    const formData2 = new FormData()
+    formData2.append('name', 'asdf')
+    expect(await serverValidate(formData2)).toBeUndefined()
+  })
+
+  it('should transform errors to display all error message', async () => {
+    const serverValidate = createServerValidate({
+      validatorAdapter: yupValidator(),
+      onServerValidate: yup.object({
+        name: yup
+          .string()
+          .min(3, 'You must have a length of at least 3')
+          .uuid('UUID'),
+      }),
+    })
+
+    const formData1 = new FormData()
+    formData1.append('name', 'aa')
+    expect(
+      await serverValidate(formData1).catch((e) => e.formState.errors),
+    ).toEqual(['You must have a length of at least 3'])
+
+    const formData2 = new FormData()
+    formData2.append('name', 'aaa')
+    expect(
+      await serverValidate(formData2).catch((e) => e.formState.errors),
+    ).toEqual(['UUID'])
+  })
+})

packages/zod-form-adapter/package.json

@@ -52,11 +52,11 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/form-core": "workspace:*",
-    "@tanstack/react-form": "workspace:*"
+    "@tanstack/form-core": "workspace:*"
   },
   "devDependencies": {
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "@tanstack/react-form": "workspace:*"
   },
   "peerDependencies": {
     "zod": "^3.x"