feat(valibot): add more tests, support of criteriaMode and reduce size (#620)

* feat(valibot): add more tests, support of criteriaMode and reduce size

* tests(valibot): remove only

* test

Author: jorisre

valibot/src/__tests__/Form-native-validation.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import { string, required, object, minLength } from 'valibot';
+import { valibotResolver } from '..';
+
+const USERNAME_REQUIRED_MESSAGE = 'username field is required';
+const PASSWORD_REQUIRED_MESSAGE = 'password field is required';
+
+const schema = required(
+  object({
+    username: string(USERNAME_REQUIRED_MESSAGE, [
+      minLength(2, USERNAME_REQUIRED_MESSAGE),
+    ]),
+    password: string(PASSWORD_REQUIRED_MESSAGE, [
+      minLength(2, PASSWORD_REQUIRED_MESSAGE),
+    ]),
+  }),
+);
+
+type FormData = { username: string; password: string };
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const { register, handleSubmit } = useForm<FormData>({
+    resolver: valibotResolver(schema),
+    shouldUseNativeValidation: true,
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register('username')} placeholder="username" />
+
+      <input {...register('password')} placeholder="password" />
+
+      <button type="submit">submit</button>
+    </form>
+  );
+}
+
+test("form's native validation with Zod", async () => {
+  const handleSubmit = vi.fn();
+  render(<TestComponent onSubmit={handleSubmit} />);
+
+  // username
+  let usernameField = screen.getByPlaceholderText(
+    /username/i,
+  ) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(true);
+  expect(usernameField.validationMessage).toBe('');
+
+  // password
+  let passwordField = screen.getByPlaceholderText(
+    /password/i,
+  ) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(true);
+  expect(passwordField.validationMessage).toBe('');
+
+  await user.click(screen.getByText(/submit/i));
+
+  // username
+  usernameField = screen.getByPlaceholderText(/username/i) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(false);
+  expect(usernameField.validationMessage).toBe(USERNAME_REQUIRED_MESSAGE);
+
+  // password
+  passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(false);
+  expect(passwordField.validationMessage).toBe(PASSWORD_REQUIRED_MESSAGE);
+
+  await user.type(screen.getByPlaceholderText(/password/i), 'password');
+
+  // password
+  passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(true);
+  expect(passwordField.validationMessage).toBe('');
+});

valibot/src/__tests__/Form.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import { useForm } from 'react-hook-form';
+import { string, required, object, minLength } from 'valibot';
+import { valibotResolver } from '..';
+
+const USERNAME_REQUIRED_MESSAGE = 'username field is required';
+const PASSWORD_REQUIRED_MESSAGE = 'password field is required';
+
+const schema = required(
+  object({
+    username: string(USERNAME_REQUIRED_MESSAGE, [
+      minLength(2, USERNAME_REQUIRED_MESSAGE),
+    ]),
+    password: string(PASSWORD_REQUIRED_MESSAGE, [
+      minLength(2, PASSWORD_REQUIRED_MESSAGE),
+    ]),
+  }),
+);
+
+type FormData = { username: string; password: string };
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormData>({
+    resolver: valibotResolver(schema), // Useful to check TypeScript regressions
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register('username')} />
+      {errors.username && <span role="alert">{errors.username.message}</span>}
+
+      <input {...register('password')} />
+      {errors.password && <span role="alert">{errors.password.message}</span>}
+
+      <button type="submit">submit</button>
+    </form>
+  );
+}
+
+test("form's validation with Valibot and TypeScript's integration", async () => {
+  const handleSubmit = vi.fn();
+  render(<TestComponent onSubmit={handleSubmit} />);
+
+  expect(screen.queryAllByRole('alert')).toHaveLength(0);
+
+  await user.click(screen.getByText(/submit/i));
+
+  expect(screen.getByText(/username field is required/i)).toBeInTheDocument();
+  expect(screen.getByText(/password field is required/i)).toBeInTheDocument();
+  expect(handleSubmit).not.toHaveBeenCalled();
+});

valibot/src/__tests__/__fixtures__/data.ts

@@ -12,6 +12,7 @@ import {
   array,
   boolean,
   required,
+  union
 } from 'valibot';
 
 export const schema = required(
@@ -28,7 +29,7 @@ export const schema = required(
       minLength(8, 'Must be at least 8 characters in length'),
     ]),
     repeatPassword: string('Repeat Password is required'),
-    accessToken: string('Access token is required'),
+    accessToken: union([string('Access token should be a string'), number('Access token  should be a number')], "access token is required"),
     birthYear: number('Please enter your birth year', [
       minValue(1900),
       maxValue(2013),