added apps
This commit is contained in:
77
node_modules/@hookform/resolvers/typanion/src/__tests__/Form-native-validation.tsx
generated
vendored
Normal file
77
node_modules/@hookform/resolvers/typanion/src/__tests__/Form-native-validation.tsx
generated
vendored
Normal file
@@ -0,0 +1,77 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import user from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import * as t from 'typanion';
|
||||
import { typanionResolver } from '..';
|
||||
|
||||
const ERROR_MESSAGE =
|
||||
'Expected to have a length of at least 1 elements (got 0)';
|
||||
|
||||
const schema = t.isObject({
|
||||
username: t.cascade(t.isString(), [t.hasMinLength(1)]),
|
||||
password: t.cascade(t.isString(), [t.hasMinLength(1)]),
|
||||
});
|
||||
|
||||
function TestComponent({
|
||||
onSubmit,
|
||||
}: { onSubmit: (data: t.InferType<typeof schema>) => void }) {
|
||||
const { register, handleSubmit } = useForm({
|
||||
resolver: typanionResolver(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 Typanion", 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(ERROR_MESSAGE);
|
||||
|
||||
// password
|
||||
passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
|
||||
expect(passwordField.validity.valid).toBe(false);
|
||||
expect(passwordField.validationMessage).toBe(ERROR_MESSAGE);
|
||||
|
||||
await user.type(screen.getByPlaceholderText(/username/i), 'joe');
|
||||
await user.type(screen.getByPlaceholderText(/password/i), 'password');
|
||||
|
||||
// username
|
||||
usernameField = screen.getByPlaceholderText(/username/i) as HTMLInputElement;
|
||||
expect(usernameField.validity.valid).toBe(true);
|
||||
expect(usernameField.validationMessage).toBe('');
|
||||
|
||||
// password
|
||||
passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
|
||||
expect(passwordField.validity.valid).toBe(true);
|
||||
expect(passwordField.validationMessage).toBe('');
|
||||
});
|
||||
51
node_modules/@hookform/resolvers/typanion/src/__tests__/Form.tsx
generated
vendored
Normal file
51
node_modules/@hookform/resolvers/typanion/src/__tests__/Form.tsx
generated
vendored
Normal file
@@ -0,0 +1,51 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import user from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import * as t from 'typanion';
|
||||
import { typanionResolver } from '..';
|
||||
|
||||
const schema = t.isObject({
|
||||
username: t.cascade(t.isString(), [t.hasMinLength(1)]),
|
||||
password: t.cascade(t.isString(), [t.hasMinLength(1)]),
|
||||
});
|
||||
|
||||
function TestComponent({
|
||||
onSubmit,
|
||||
}: { onSubmit: (data: t.InferType<typeof schema>) => void }) {
|
||||
const {
|
||||
register,
|
||||
formState: { errors },
|
||||
handleSubmit,
|
||||
} = useForm({
|
||||
resolver: typanionResolver(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 Typanion 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.getAllByText(
|
||||
'Expected to have a length of at least 1 elements (got 0)',
|
||||
),
|
||||
).toHaveLength(2);
|
||||
expect(handleSubmit).not.toHaveBeenCalled();
|
||||
});
|
||||
82
node_modules/@hookform/resolvers/typanion/src/__tests__/__fixtures__/data.ts
generated
vendored
Normal file
82
node_modules/@hookform/resolvers/typanion/src/__tests__/__fixtures__/data.ts
generated
vendored
Normal file
@@ -0,0 +1,82 @@
|
||||
import { Field, InternalFieldName } from 'react-hook-form';
|
||||
import * as t from 'typanion';
|
||||
|
||||
export const schema = t.isObject({
|
||||
username: t.cascade(t.isString(), [
|
||||
t.matchesRegExp(/^\w+$/),
|
||||
t.hasMinLength(2),
|
||||
t.hasMaxLength(30),
|
||||
]),
|
||||
password: t.cascade(t.isString(), [
|
||||
t.matchesRegExp(new RegExp('.*[A-Z].*')), // one uppercase character
|
||||
t.matchesRegExp(new RegExp('.*[a-z].*')), // one lowercase character
|
||||
t.matchesRegExp(new RegExp('.*\\d.*')), // one number
|
||||
t.matchesRegExp(
|
||||
new RegExp('.*[`~<>?,./!@#$%^&*()\\-_+="\'|{}\\[\\];:\\\\].*'),
|
||||
), // one special character
|
||||
t.hasMinLength(8), // Must be at least 8 characters in length
|
||||
]),
|
||||
repeatPassword: t.cascade(t.isString(), [
|
||||
t.matchesRegExp(new RegExp('.*[A-Z].*')), // one uppercase character
|
||||
t.matchesRegExp(new RegExp('.*[a-z].*')), // one lowercase character
|
||||
t.matchesRegExp(new RegExp('.*\\d.*')), // one number
|
||||
t.matchesRegExp(
|
||||
new RegExp('.*[`~<>?,./!@#$%^&*()\\-_+="\'|{}\\[\\];:\\\\].*'),
|
||||
), // one special character
|
||||
t.hasMinLength(8), // Must be at least 8 characters in length
|
||||
]),
|
||||
accessToken: t.isString(),
|
||||
birthYear: t.cascade(t.isNumber(), [
|
||||
t.isInteger(),
|
||||
t.isInInclusiveRange(1900, 2013),
|
||||
]),
|
||||
email: t.cascade(t.isString(), [t.matchesRegExp(/^\S+@\S+$/)]),
|
||||
tags: t.isArray(t.isString()),
|
||||
enabled: t.isBoolean(),
|
||||
like: t.isObject({
|
||||
id: t.cascade(t.isNumber(), [t.isInteger(), t.isPositive()]),
|
||||
name: t.cascade(t.isString(), [t.hasMinLength(4)]),
|
||||
}),
|
||||
});
|
||||
|
||||
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],
|
||||
} as any as t.InferType<typeof schema>;
|
||||
|
||||
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',
|
||||
},
|
||||
};
|
||||
67
node_modules/@hookform/resolvers/typanion/src/__tests__/__snapshots__/typanion.ts.snap
generated
vendored
Normal file
67
node_modules/@hookform/resolvers/typanion/src/__tests__/__snapshots__/typanion.ts.snap
generated
vendored
Normal file
@@ -0,0 +1,67 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`typanionResolver > should return a single error from typanionResolver when validation fails 1`] = `
|
||||
{
|
||||
"errors": {
|
||||
"accessToken": {
|
||||
"message": "Expected a string (got undefined)",
|
||||
"ref": undefined,
|
||||
},
|
||||
"birthYear": {
|
||||
"message": "Expected a number (got "birthYear")",
|
||||
"ref": undefined,
|
||||
},
|
||||
"email": {
|
||||
"message": "Expected to match the pattern /^\\S+@\\S+$/ (got an empty string)",
|
||||
"ref": {
|
||||
"name": "email",
|
||||
},
|
||||
},
|
||||
"enabled": {
|
||||
"message": "Expected a boolean (got undefined)",
|
||||
"ref": undefined,
|
||||
},
|
||||
"like": {
|
||||
"id": {
|
||||
"message": "Expected a number (got "z")",
|
||||
"ref": undefined,
|
||||
},
|
||||
"name": {
|
||||
"message": "Expected a string (got undefined)",
|
||||
"ref": undefined,
|
||||
},
|
||||
},
|
||||
"password": {
|
||||
"message": "Expected to match the pattern /.*[A-Z].*/ (got "___")",
|
||||
"ref": {
|
||||
"name": "password",
|
||||
},
|
||||
},
|
||||
"repeatPassword": {
|
||||
"message": "Expected a string (got undefined)",
|
||||
"ref": undefined,
|
||||
},
|
||||
"tags": [
|
||||
{
|
||||
"message": "Expected a string (got 1)",
|
||||
"ref": undefined,
|
||||
},
|
||||
{
|
||||
"message": "Expected a string (got 2)",
|
||||
"ref": undefined,
|
||||
},
|
||||
{
|
||||
"message": "Expected a string (got 3)",
|
||||
"ref": undefined,
|
||||
},
|
||||
],
|
||||
"username": {
|
||||
"message": "Expected a string (got undefined)",
|
||||
"ref": {
|
||||
"name": "username",
|
||||
},
|
||||
},
|
||||
},
|
||||
"values": {},
|
||||
}
|
||||
`;
|
||||
84
node_modules/@hookform/resolvers/typanion/src/__tests__/typanion.ts
generated
vendored
Normal file
84
node_modules/@hookform/resolvers/typanion/src/__tests__/typanion.ts
generated
vendored
Normal file
@@ -0,0 +1,84 @@
|
||||
import { SubmitHandler } from 'react-hook-form';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { Resolver } from 'react-hook-form';
|
||||
import * as t from 'typanion';
|
||||
import { typanionResolver } from '..';
|
||||
import { fields, invalidData, schema, validData } from './__fixtures__/data';
|
||||
|
||||
const tmpObj = {
|
||||
validate: schema,
|
||||
};
|
||||
|
||||
const shouldUseNativeValidation = false;
|
||||
|
||||
describe('typanionResolver', () => {
|
||||
it('should return values from typanionResolver when validation pass', async () => {
|
||||
const schemaSpy = vi.spyOn(tmpObj, 'validate');
|
||||
|
||||
const result = await typanionResolver(schemaSpy as any)(
|
||||
validData,
|
||||
undefined,
|
||||
{
|
||||
fields,
|
||||
shouldUseNativeValidation,
|
||||
},
|
||||
);
|
||||
|
||||
expect(schemaSpy).toHaveBeenCalledTimes(1);
|
||||
expect(result).toEqual({ errors: {}, values: validData });
|
||||
});
|
||||
|
||||
it('should return a single error from typanionResolver when validation fails', async () => {
|
||||
const result = await typanionResolver(schema)(invalidData, undefined, {
|
||||
fields,
|
||||
shouldUseNativeValidation,
|
||||
});
|
||||
|
||||
expect(result).toMatchSnapshot();
|
||||
});
|
||||
|
||||
/**
|
||||
* Type inference tests
|
||||
*/
|
||||
it('should correctly infer the output type from a typanion schema', () => {
|
||||
const resolver = typanionResolver(t.isObject({ id: t.isNumber() }));
|
||||
|
||||
expectTypeOf(resolver).toEqualTypeOf<
|
||||
Resolver<ObjectType<{ id: number }>, unknown, ObjectType<{ id: number }>>
|
||||
>();
|
||||
});
|
||||
|
||||
it('should correctly infer the output type from a typanion schema for the handleSubmit function in useForm', () => {
|
||||
const schema = t.isObject({ id: t.isNumber() });
|
||||
|
||||
const form = useForm({
|
||||
resolver: typanionResolver(schema),
|
||||
});
|
||||
|
||||
expectTypeOf(form.watch('id')).toEqualTypeOf<number>();
|
||||
|
||||
expectTypeOf(form.handleSubmit)
|
||||
.parameter(0)
|
||||
.toEqualTypeOf<SubmitHandler<ObjectType<{ id: number }>>>();
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Copied from Typanion source code because it's not exported
|
||||
*/
|
||||
|
||||
declare type ExtractIndex<T> = {
|
||||
// biome-ignore lint/complexity/noBannedTypes: for testing purposes
|
||||
[K in keyof T as {} extends Record<K, 1> ? K : never]: T[K];
|
||||
};
|
||||
declare type RemoveIndex<T> = {
|
||||
// biome-ignore lint/complexity/noBannedTypes: for testing purposes
|
||||
[K in keyof T as {} extends Record<K, 1> ? never : K]: T[K];
|
||||
};
|
||||
declare type UndefinedProperties<T> = {
|
||||
[P in keyof T]-?: undefined extends T[P] ? P : never;
|
||||
}[keyof T];
|
||||
declare type UndefinedToOptional<T> = Partial<Pick<T, UndefinedProperties<T>>> &
|
||||
Pick<T, Exclude<keyof T, UndefinedProperties<T>>>;
|
||||
declare type ObjectType<T> = UndefinedToOptional<RemoveIndex<T>> &
|
||||
ExtractIndex<T>;
|
||||
1
node_modules/@hookform/resolvers/typanion/src/index.ts
generated
vendored
Normal file
1
node_modules/@hookform/resolvers/typanion/src/index.ts
generated
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export * from './typanion';
|
||||
85
node_modules/@hookform/resolvers/typanion/src/typanion.ts
generated
vendored
Normal file
85
node_modules/@hookform/resolvers/typanion/src/typanion.ts
generated
vendored
Normal file
@@ -0,0 +1,85 @@
|
||||
import { toNestErrors, validateFieldsNatively } from '@hookform/resolvers';
|
||||
import type {
|
||||
FieldError,
|
||||
FieldErrors,
|
||||
FieldValues,
|
||||
Resolver,
|
||||
} from 'react-hook-form';
|
||||
import * as t from 'typanion';
|
||||
|
||||
function parseErrors(errors: string[], parsedErrors: FieldErrors = {}) {
|
||||
return errors.reduce((acc, error) => {
|
||||
const fieldIndex = error.indexOf(':');
|
||||
|
||||
const field = error.slice(1, fieldIndex);
|
||||
const message = error.slice(fieldIndex + 1).trim();
|
||||
|
||||
acc[field] = {
|
||||
message,
|
||||
} as FieldError;
|
||||
|
||||
return acc;
|
||||
}, parsedErrors);
|
||||
}
|
||||
|
||||
export function typanionResolver<Input extends FieldValues, Context, Output>(
|
||||
schema: t.StrictValidator<Input, Input>,
|
||||
schemaOptions?: Pick<t.ValidationState, 'coercions' | 'coercion'>,
|
||||
resolverOptions?: {
|
||||
mode?: 'async' | 'sync';
|
||||
raw?: false;
|
||||
},
|
||||
): Resolver<Input, Context, t.InferType<typeof schema>>;
|
||||
|
||||
export function typanionResolver<Input extends FieldValues, Context, Output>(
|
||||
schema: t.StrictValidator<Input, Input>,
|
||||
schemaOptions: Pick<t.ValidationState, 'coercions' | 'coercion'> | undefined,
|
||||
resolverOptions: {
|
||||
mode?: 'async' | 'sync';
|
||||
raw: true;
|
||||
},
|
||||
): Resolver<Input, Context, Input>;
|
||||
|
||||
/**
|
||||
* Creates a resolver for react-hook-form using Typanion schema validation
|
||||
* @param {t.StrictValidator<TFieldValues, TFieldValues>} schema - The Typanion schema to validate against
|
||||
* @param {Pick<t.ValidationState, 'coercions' | 'coercion'>} [schemaOptions] - Optional Typanion validation options
|
||||
* @returns {Resolver<t.InferType<typeof schema>>} A resolver function compatible with react-hook-form
|
||||
* @example
|
||||
* const schema = t.isObject({
|
||||
* name: t.isString(),
|
||||
* age: t.isInteger()
|
||||
* });
|
||||
*
|
||||
* useForm({
|
||||
* resolver: typanionResolver(schema)
|
||||
* });
|
||||
*/
|
||||
export function typanionResolver<Input extends FieldValues, Context, Output>(
|
||||
schema: t.StrictValidator<Input, Input>,
|
||||
schemaOptions: Pick<t.ValidationState, 'coercions' | 'coercion'> = {},
|
||||
): Resolver<Input, Context, Output | Input> {
|
||||
return (values: Input, _, options) => {
|
||||
const rawErrors: string[] = [];
|
||||
const isValid = schema(
|
||||
values,
|
||||
Object.assign(
|
||||
{},
|
||||
{
|
||||
errors: rawErrors,
|
||||
},
|
||||
schemaOptions,
|
||||
),
|
||||
);
|
||||
const parsedErrors = parseErrors(rawErrors);
|
||||
|
||||
if (isValid) {
|
||||
options.shouldUseNativeValidation &&
|
||||
validateFieldsNatively(parsedErrors, options);
|
||||
|
||||
return { values, errors: {} };
|
||||
}
|
||||
|
||||
return { values: {}, errors: toNestErrors(parsedErrors, options) };
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user