@tanstack/solid-form 0.6.0

package/src/tests/createField.test.tsx

@@ -0,0 +1,376 @@
+import { render, waitFor } from '@solidjs/testing-library'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+import { createFormFactory } from '..'
+import { sleep } from './utils'
+
+const user = userEvent.setup()
+
+describe('createField', () => {
+  it('should allow to set default value', () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultValue="FirstName"
+            children={(field) => {
+              return (
+                <input
+                  data-testid="fieldinput"
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.currentTarget.value)}
+                />
+              )
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId } = render(() => <Comp />)
+    const input = getByTestId('fieldinput')
+    expect(input).toHaveValue('FirstName')
+  })
+
+  it('should use field default value first', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm(() => ({
+        defaultValues: {
+          firstName: 'FirstName',
+          lastName: 'LastName',
+        },
+      }))
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultValue="otherName"
+            children={(field) => {
+              return (
+                <input
+                  data-testid="fieldinput"
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onChange={(e) => field().handleChange(e.target.value)}
+                />
+              )
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(input).toHaveValue('otherName')
+  })
+
+  it('should not validate on change if isTouched is false', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            onChange={(value) => (value.includes('other') ? error : undefined)}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field().name}
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().setValue(e.currentTarget.value)}
+                />
+                <p>{field().getMeta().errors}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, queryByText } = render(() => <Comp />)
+    const input = getByTestId('fieldinput')
+    await user.type(input, 'other')
+    expect(queryByText(error)).not.toBeInTheDocument()
+  })
+
+  it('should validate on change if isTouched is true', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            onChange={(value) => (value.includes('other') ? error : undefined)}
+            children={(field) => {
+              return (
+                <div>
+                  <input
+                    data-testid="fieldinput"
+                    name={field().name}
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onInput={(e) => field().setValue(e.currentTarget.value)}
+                  />
+                  <p>{field().getMeta().errorMap.onChange}</p>
+                </div>
+              )
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText, queryByText } = render(() => <Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(error)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    expect(getByText(error)).toBeInTheDocument()
+  })
+
+  it('should validate on change and on blur', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const onChangeError = 'Please enter a different value (onChangeError)'
+    const onBlurError = 'Please enter a different value (onBlurError)'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            onChange={(value) =>
+              value.includes('other') ? onChangeError : undefined
+            }
+            onBlur={(value) =>
+              value.includes('other') ? onBlurError : undefined
+            }
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field().name}
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.currentTarget.value)}
+                />
+                <p>{field().getMeta().errorMap.onChange}</p>
+                <p>{field().getMeta().errorMap.onBlur}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText, queryByText } = render(() => <Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(onChangeError)).not.toBeInTheDocument()
+    expect(queryByText(onBlurError)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    expect(getByText(onChangeError)).toBeInTheDocument()
+    // @ts-expect-error unsure why the 'vitest/globals' in tsconfig doesnt work here
+    await user.click(document.body)
+    expect(queryByText(onBlurError)).toBeInTheDocument()
+  })
+
+  it('should validate async on change', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            onChangeAsync={async () => {
+              await sleep(10)
+              return error
+            }}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field().name}
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.currentTarget.value)}
+                />
+                <p>{field().getMeta().errorMap.onChange}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText, queryByText } = render(() => <Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(error)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    await waitFor(() => getByText(error))
+    expect(getByText(error)).toBeInTheDocument()
+  })
+
+  it('should validate async on change and async on blur', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const onChangeError = 'Please enter a different value (onChangeError)'
+    const onBlurError = 'Please enter a different value (onBlurError)'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            onChangeAsync={async () => {
+              await sleep(10)
+              return onChangeError
+            }}
+            onBlurAsync={async () => {
+              await sleep(10)
+              return onBlurError
+            }}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field().name}
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.currentTarget.value)}
+                />
+                <p>{field().getMeta().errorMap?.onChange}</p>
+                <p>{field().getMeta().errorMap?.onBlur}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText, queryByText } = render(() => <Comp />)
+    const input = getByTestId('fieldinput')
+
+    expect(queryByText(onChangeError)).not.toBeInTheDocument()
+    expect(queryByText(onBlurError)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    await waitFor(() => getByText(onChangeError))
+    expect(getByText(onChangeError)).toBeInTheDocument()
+    // @ts-expect-error unsure why the 'vitest/globals' in tsconfig doesnt work here
+    await user.click(document.body)
+    await waitFor(() => getByText(onBlurError))
+    expect(getByText(onBlurError)).toBeInTheDocument()
+  })
+
+  it('should validate async on change with debounce', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const mockFn = vi.fn()
+    const error = 'Please enter a different value'
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            onChangeAsyncDebounceMs={100}
+            onChangeAsync={async () => {
+              mockFn()
+              await sleep(10)
+              return error
+            }}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field().name}
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.currentTarget.value)}
+                />
+                <p>{field().getMeta().errors}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText } = render(() => <Comp />)
+    const input = getByTestId('fieldinput')
+    await user.type(input, 'other')
+    // mockFn will have been called 5 times without onChangeAsyncDebounceMs
+    expect(mockFn).toHaveBeenCalledTimes(0)
+    await waitFor(() => getByText(error))
+    expect(getByText(error)).toBeInTheDocument()
+  })
+})

package/src/tests/createForm.test.tsx

@@ -0,0 +1,116 @@
+import { render, screen, waitFor } from '@solidjs/testing-library'
+import '@testing-library/jest-dom'
+import userEvent from '@testing-library/user-event'
+import { createFormFactory, createForm } from '..'
+
+const user = userEvent.setup()
+
+describe('createForm', () => {
+  it('preserves field state', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultValue={''}
+            children={(field) => (
+              <input
+                data-testid="fieldinput"
+                value={field().state.value}
+                onBlur={field().handleBlur}
+                onChange={(e) => field().handleChange(e.currentTarget.value)}
+              />
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    render(() => <Comp />)
+    const input = screen.getByTestId('fieldinput')
+    expect(screen.queryByText('FirstName')).not.toBeInTheDocument()
+    await user.type(input, 'FirstName')
+    expect(input).toHaveValue('FirstName')
+  })
+
+  it('should allow default values to be set', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm(() => ({
+        defaultValues: {
+          firstName: 'FirstName',
+          lastName: 'LastName',
+        },
+      }))
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            children={(field) => {
+              return <p>{field().state.value}</p>
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { findByText, queryByText } = render(() => <Comp />)
+    expect(await findByText('FirstName')).toBeInTheDocument()
+    expect(queryByText('LastName')).not.toBeInTheDocument()
+  })
+
+  it('should handle submitting properly', async () => {
+    let submittedData = null as { firstName: string } | null
+    function Comp() {
+      const form = createForm(() => ({
+        defaultValues: {
+          firstName: 'FirstName',
+        },
+        onSubmit: (data) => {
+          submittedData = data
+        },
+      }))
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            children={(field) => {
+              return (
+                <input
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onChange={(e) => field().handleChange(e.target.value)}
+                  placeholder={'First name'}
+                />
+              )
+            }}
+          />
+          <button onClick={form.handleSubmit}>Submit</button>
+        </form.Provider>
+      )
+    }
+
+    const { findByPlaceholderText, getByText } = render(() => <Comp />)
+    const input = await findByPlaceholderText('First name')
+    await user.clear(input)
+    await user.type(input, 'OtherName')
+    await user.click(getByText('Submit'))
+    expect(submittedData?.firstName).toEqual('OtherName')
+  })
+})

package/src/tests/createFormFactory.test.tsx

@@ -0,0 +1,38 @@
+import { render } from '@solidjs/testing-library'
+import '@testing-library/jest-dom'
+import { createFormFactory } from '..'
+
+describe('createFormFactory', () => {
+  it('should allow default values to be set', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person, unknown>(() => ({
+      defaultValues: {
+        firstName: 'FirstName',
+        lastName: 'LastName',
+      },
+    }))
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            children={(field) => {
+              return <p>{field().state.value}</p>
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { findByText, queryByText } = render(() => <Comp />)
+    expect(await findByText('FirstName')).toBeInTheDocument()
+    expect(queryByText('LastName')).not.toBeInTheDocument()
+  })
+})

package/src/tests/utils.ts

@@ -0,0 +1,5 @@
+export function sleep(timeout: number): Promise<void> {
+  return new Promise((resolve, _reject) => {
+    setTimeout(resolve, timeout)
+  })
+}

package/src/types.ts

@@ -0,0 +1,11 @@
+import type { FieldOptions, DeepKeys, DeepValue } from '@tanstack/form-core'
+
+export type CreateFieldOptions<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  ValidatorType,
+  FormValidator,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+> = FieldOptions<TParentData, TName, ValidatorType, FormValidator, TData> & {
+  mode?: 'value' | 'array'
+}