@hookform/resolvers 3.1.1 → 3.3.0

package/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('');
+});

package/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();
+});

package/valibot/src/__tests__/__fixtures__/data.ts

@@ -0,0 +1,89 @@
+import { Field, InternalFieldName } from 'react-hook-form';
+import {
+  object,
+  string,
+  minLength,
+  maxLength,
+  regex,
+  number,
+  minValue,
+  maxValue,
+  email,
+  array,
+  boolean,
+  required,
+  union
+} from 'valibot';
+
+export const schema = required(
+  object({
+    username: string([minLength(2), maxLength(30), regex(/^\w+$/)]),
+    password: string('New Password is required', [
+      regex(new RegExp('.*[A-Z].*'), 'One uppercase character'),
+      regex(new RegExp('.*[a-z].*'), 'One lowercase character'),
+      regex(new RegExp('.*\\d.*'), 'One number'),
+      regex(
+        new RegExp('.*[`~<>?,./!@#$%^&*()\\-_+="\'|{}\\[\\];:\\\\].*'),
+        'One special character',
+      ),
+      minLength(8, 'Must be at least 8 characters in length'),
+    ]),
+    repeatPassword: string('Repeat Password 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),
+    ]),
+    email: string([email('Invalid email address')]),
+    tags: array(string('Tags should be strings')),
+    enabled: boolean(),
+    like: required(
+      object({
+        id: number('Like id is required'),
+        name: string('Like name is required', [minLength(4, 'Too short')]),
+      }),
+    ),
+  }),
+);
+
+export const validData = {
+  username: 'Doe',
+  password: 'Password123_',
+  repeatPassword: 'Password123_',
+  birthYear: 2000,
+  email: 'john@doe.com',
+  tags: ['tag1', 'tag2'],
+  enabled: true,
+  accessToken: 'accessToken',
+  like: {
+    id: 1,
+    name: 'name',
+  },
+};
+
+export const invalidData = {
+  password: '___',
+  email: '',
+  birthYear: 'birthYear',
+  like: { id: 'z' },
+  tags: [1, 2, 3],
+};
+
+export const fields: Record<InternalFieldName, Field['_f']> = {
+  username: {
+    ref: { name: 'username' },
+    name: 'username',
+  },
+  password: {
+    ref: { name: 'password' },
+    name: 'password',
+  },
+  email: {
+    ref: { name: 'email' },
+    name: 'email',
+  },
+  birthday: {
+    ref: { name: 'birthday' },
+    name: 'birthday',
+  },
+};

package/valibot/src/__tests__/__snapshots__/valibot.ts.snap

@@ -0,0 +1,418 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`valibotResolver > should return a single error from valibotResolver when validation fails 1`] = `
+{
+  "errors": {
+    "accessToken": {
+      "message": "Invalid type",
+      "ref": undefined,
+      "type": "non_optional",
+    },
+    "birthYear": {
+      "message": "Please enter your birth year",
+      "ref": undefined,
+      "type": "number",
+    },
+    "email": {
+      "message": "Invalid email address",
+      "ref": {
+        "name": "email",
+      },
+      "type": "email",
+    },
+    "enabled": {
+      "message": "Invalid type",
+      "ref": undefined,
+      "type": "non_optional",
+    },
+    "like": {
+      "id": {
+        "message": "Like id is required",
+        "ref": undefined,
+        "type": "number",
+      },
+      "name": {
+        "message": "Invalid type",
+        "ref": undefined,
+        "type": "non_optional",
+      },
+    },
+    "password": {
+      "message": "One uppercase character",
+      "ref": {
+        "name": "password",
+      },
+      "type": "regex",
+    },
+    "repeatPassword": {
+      "message": "Invalid type",
+      "ref": undefined,
+      "type": "non_optional",
+    },
+    "tags": [
+      {
+        "message": "Tags should be strings",
+        "ref": undefined,
+        "type": "string",
+      },
+      {
+        "message": "Tags should be strings",
+        "ref": undefined,
+        "type": "string",
+      },
+      {
+        "message": "Tags should be strings",
+        "ref": undefined,
+        "type": "string",
+      },
+    ],
+    "username": {
+      "message": "Invalid type",
+      "ref": {
+        "name": "username",
+      },
+      "type": "non_optional",
+    },
+  },
+  "values": {},
+}
+`;
+
+exports[`valibotResolver > should return a single error from valibotResolver with \`mode: sync\` when validation fails 1`] = `
+{
+  "errors": {
+    "accessToken": {
+      "message": "Invalid type",
+      "ref": undefined,
+      "type": "non_optional",
+    },
+    "birthYear": {
+      "message": "Please enter your birth year",
+      "ref": undefined,
+      "type": "number",
+    },
+    "email": {
+      "message": "Invalid email address",
+      "ref": {
+        "name": "email",
+      },
+      "type": "email",
+    },
+    "enabled": {
+      "message": "Invalid type",
+      "ref": undefined,
+      "type": "non_optional",
+    },
+    "like": {
+      "id": {
+        "message": "Like id is required",
+        "ref": undefined,
+        "type": "number",
+      },
+      "name": {
+        "message": "Invalid type",
+        "ref": undefined,
+        "type": "non_optional",
+      },
+    },
+    "password": {
+      "message": "One uppercase character",
+      "ref": {
+        "name": "password",
+      },
+      "type": "regex",
+    },
+    "repeatPassword": {
+      "message": "Invalid type",
+      "ref": undefined,
+      "type": "non_optional",
+    },
+    "tags": [
+      {
+        "message": "Tags should be strings",
+        "ref": undefined,
+        "type": "string",
+      },
+      {
+        "message": "Tags should be strings",
+        "ref": undefined,
+        "type": "string",
+      },
+      {
+        "message": "Tags should be strings",
+        "ref": undefined,
+        "type": "string",
+      },
+    ],
+    "username": {
+      "message": "Invalid type",
+      "ref": {
+        "name": "username",
+      },
+      "type": "non_optional",
+    },
+  },
+  "values": {},
+}
+`;
+
+exports[`valibotResolver > should return all the errors from valibotResolver when validation fails with \`validateAllFieldCriteria\` set to true 1`] = `
+{
+  "errors": {
+    "accessToken": {
+      "message": "Invalid type",
+      "ref": undefined,
+      "type": "non_optional",
+      "types": {
+        "non_optional": "Invalid type",
+      },
+    },
+    "birthYear": {
+      "message": "Please enter your birth year",
+      "ref": undefined,
+      "type": "number",
+      "types": {
+        "number": "Please enter your birth year",
+      },
+    },
+    "email": {
+      "message": "Invalid email address",
+      "ref": {
+        "name": "email",
+      },
+      "type": "email",
+      "types": {
+        "email": "Invalid email address",
+      },
+    },
+    "enabled": {
+      "message": "Invalid type",
+      "ref": undefined,
+      "type": "non_optional",
+      "types": {
+        "non_optional": "Invalid type",
+      },
+    },
+    "like": {
+      "id": {
+        "message": "Like id is required",
+        "ref": undefined,
+        "type": "number",
+        "types": {
+          "number": "Like id is required",
+        },
+      },
+      "name": {
+        "message": "Invalid type",
+        "ref": undefined,
+        "type": "non_optional",
+        "types": {
+          "non_optional": "Invalid type",
+        },
+      },
+    },
+    "password": {
+      "message": "One uppercase character",
+      "ref": {
+        "name": "password",
+      },
+      "type": "regex",
+      "types": {
+        "min_length": "Must be at least 8 characters in length",
+        "regex": [
+          "One uppercase character",
+          "One lowercase character",
+          "One number",
+        ],
+      },
+    },
+    "repeatPassword": {
+      "message": "Invalid type",
+      "ref": undefined,
+      "type": "non_optional",
+      "types": {
+        "non_optional": "Invalid type",
+      },
+    },
+    "tags": [
+      {
+        "message": "Tags should be strings",
+        "ref": undefined,
+        "type": "string",
+        "types": {
+          "string": "Tags should be strings",
+        },
+      },
+      {
+        "message": "Tags should be strings",
+        "ref": undefined,
+        "type": "string",
+        "types": {
+          "string": "Tags should be strings",
+        },
+      },
+      {
+        "message": "Tags should be strings",
+        "ref": undefined,
+        "type": "string",
+        "types": {
+          "string": "Tags should be strings",
+        },
+      },
+    ],
+    "username": {
+      "message": "Invalid type",
+      "ref": {
+        "name": "username",
+      },
+      "type": "non_optional",
+      "types": {
+        "non_optional": "Invalid type",
+      },
+    },
+  },
+  "values": {},
+}
+`;
+
+exports[`valibotResolver > should return all the errors from valibotResolver when validation fails with \`validateAllFieldCriteria\` set to true and \`mode: sync\` 1`] = `
+{
+  "errors": {
+    "accessToken": {
+      "message": "Invalid type",
+      "ref": undefined,
+      "type": "non_optional",
+      "types": {
+        "non_optional": "Invalid type",
+      },
+    },
+    "birthYear": {
+      "message": "Please enter your birth year",
+      "ref": undefined,
+      "type": "number",
+      "types": {
+        "number": "Please enter your birth year",
+      },
+    },
+    "email": {
+      "message": "Invalid email address",
+      "ref": {
+        "name": "email",
+      },
+      "type": "email",
+      "types": {
+        "email": "Invalid email address",
+      },
+    },
+    "enabled": {
+      "message": "Invalid type",
+      "ref": undefined,
+      "type": "non_optional",
+      "types": {
+        "non_optional": "Invalid type",
+      },
+    },
+    "like": {
+      "id": {
+        "message": "Like id is required",
+        "ref": undefined,
+        "type": "number",
+        "types": {
+          "number": "Like id is required",
+        },
+      },
+      "name": {
+        "message": "Invalid type",
+        "ref": undefined,
+        "type": "non_optional",
+        "types": {
+          "non_optional": "Invalid type",
+        },
+      },
+    },
+    "password": {
+      "message": "One uppercase character",
+      "ref": {
+        "name": "password",
+      },
+      "type": "regex",
+      "types": {
+        "min_length": "Must be at least 8 characters in length",
+        "regex": [
+          "One uppercase character",
+          "One lowercase character",
+          "One number",
+        ],
+      },
+    },
+    "repeatPassword": {
+      "message": "Invalid type",
+      "ref": undefined,
+      "type": "non_optional",
+      "types": {
+        "non_optional": "Invalid type",
+      },
+    },
+    "tags": [
+      {
+        "message": "Tags should be strings",
+        "ref": undefined,
+        "type": "string",
+        "types": {
+          "string": "Tags should be strings",
+        },
+      },
+      {
+        "message": "Tags should be strings",
+        "ref": undefined,
+        "type": "string",
+        "types": {
+          "string": "Tags should be strings",
+        },
+      },
+      {
+        "message": "Tags should be strings",
+        "ref": undefined,
+        "type": "string",
+        "types": {
+          "string": "Tags should be strings",
+        },
+      },
+    ],
+    "username": {
+      "message": "Invalid type",
+      "ref": {
+        "name": "username",
+      },
+      "type": "non_optional",
+      "types": {
+        "non_optional": "Invalid type",
+      },
+    },
+  },
+  "values": {},
+}
+`;
+
+exports[`valibotResolver > should return parsed values from valibotResolver with \`mode: sync\` when validation pass 1`] = `
+{
+  "errors": {},
+  "values": {
+    "accessToken": "accessToken",
+    "birthYear": 2000,
+    "email": "john@doe.com",
+    "enabled": true,
+    "like": {
+      "id": 1,
+      "name": "name",
+    },
+    "password": "Password123_",
+    "repeatPassword": "Password123_",
+    "tags": [
+      "tag1",
+      "tag2",
+    ],
+    "username": "Doe",
+  },
+}
+`;