chore: test cases

Author: harry-whorlow

packages/angular-form/tests/test.component.spec.ts

@@ -363,3 +363,52 @@ describe('TanStackFieldDirective', () => {
     expect(getByText(onBlurError)).toBeInTheDocument()
   })
 })
+
+describe('form should reset when rendered correctly - angular', () => {
+  it('should be able to handle async resets', async () => {
+    @Component({
+      selector: 'test-component',
+      standalone: true,
+      template: `
+        <ng-container [tanstackField]="form" name="name" #f="field">
+          <input
+            data-testid="fieldinput"
+            [value]="f.api.state.value"
+            (input)="f.api.handleChange($any($event).target.value)"
+          />
+        </ng-container>
+        <button
+          type="button"
+          (click)="form.handleSubmit()"
+          data-testid="submit"
+        >
+          submit
+        </button>
+      `,
+      imports: [TanStackField],
+    })
+    class TestComponent {
+      form = injectForm({
+        defaultValues: {
+          name: '',
+        },
+        onSubmit: ({ value }) => {
+          expect(value).toEqual({ name: 'test' })
+          this.form.reset({ name: 'test' })
+        },
+      })
+    }
+
+    const { getByTestId } = await render(TestComponent)
+
+    const input = getByTestId('fieldinput')
+    const submit = getByTestId('submit')
+
+    await user.type(input, 'test')
+    await expect(input).toHaveValue('test')
+
+    await user.click(submit)
+
+    await expect(input).toHaveValue('test')
+  })
+})

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

@@ -120,6 +120,25 @@ describe('form api', () => {
     })
   })
 
+  it('form should reset when rendered correctly - core', async () => {
+    const defaultValues = {
+      name: '',
+    }
+    const form = new FormApi({
+      defaultValues: defaultValues,
+      onSubmit: ({ value }) => {
+        form.reset(value)
+
+        expect(form.options.defaultValues).toMatchObject({
+          name: 'test',
+        })
+      },
+    })
+    form.mount()
+    form.setFieldValue('name', 'test')
+    form.handleSubmit()
+  })
+
   it('should reset and set the new default values that are restored after an empty reset', () => {
     const form = new FormApi({ defaultValues: { name: 'initial' } })
     form.mount()

packages/react-form/tests/useForm.test.tsx

@@ -795,3 +795,53 @@ describe('useForm', () => {
     expect(fn).toHaveBeenCalledTimes(1)
   })
 })
+
+it('form should reset when rendered correctly - react', async () => {
+  function Comp() {
+    const form = useForm({
+      defaultValues: {
+        name: '',
+      },
+      onSubmit: ({ value }) => {
+        expect(value).toEqual({ name: 'test' })
+
+        form.reset({ name: 'test' })
+      },
+    })
+
+    return (
+      <div>
+        <form.Field
+          name="name"
+          children={(field) => (
+            <input
+              data-testid="fieldinput"
+              name={field.name}
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+            />
+          )}
+        />
+
+        <button
+          type="button"
+          onClick={() => form.handleSubmit()}
+          data-testid="submit"
+        >
+          submit
+        </button>
+      </div>
+    )
+  }
+
+  const { getByTestId } = render(<Comp />)
+  const input = getByTestId('fieldinput')
+  const submit = getByTestId('submit')
+
+  await user.type(input, 'test')
+  await waitFor(() => expect(input).toHaveValue('test'))
+
+  await user.click(submit)
+
+  await waitFor(() => expect(input).toHaveValue('test'))
+})

packages/vue-form/tests/useForm.test.tsx

@@ -476,4 +476,55 @@ describe('useForm', () => {
     await waitFor(() => getByText(error))
     expect(getByText(error)).toBeInTheDocument()
   })
+
+  it('form should reset when rendered correctly - vue', async () => {
+    const Comp = defineComponent(() => {
+      const form = useForm({
+        defaultValues: {
+          name: '',
+        },
+        onSubmit: ({ value }) => {
+          expect(value).toEqual({ name: 'test' })
+
+          form.reset({ name: 'test' })
+        },
+      })
+
+      return () => (
+        <div>
+          <form.Field name="name">
+            {({ field }: { field: AnyFieldApi }) => (
+              <input
+                data-testid="fieldinput"
+                name={field.name}
+                value={field.state.value}
+                onInput={(e) =>
+                  field.handleChange((e.target as HTMLInputElement).value)
+                }
+              />
+            )}
+          </form.Field>
+
+          <button
+            type="button"
+            onClick={() => form.handleSubmit()}
+            data-testid="submit"
+          >
+            submit
+          </button>
+        </div>
+      )
+    })
+
+    const { getByTestId } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    const submit = getByTestId('submit')
+
+    await user.type(input, 'test')
+    await waitFor(() => expect(input).toHaveValue('test'))
+
+    await user.click(submit)
+
+    await waitFor(() => expect(input).toHaveValue('test'))
+  })
 })