DMleadgen
46d973904b
Next.js website for Rocky Mountain Vending company featuring: - Product catalog with Stripe integration - Service areas and parts pages - Admin dashboard with Clerk authentication - SEO optimized pages with JSON-LD structured data Co-authored-by: Cursor <cursoragent@cursor.com>
81 lines
2.5 KiB
Text
81 lines
2.5 KiB
Text
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 v from 'valibot';
|
|
import { valibotResolver } from '..';
|
|
|
|
const USERNAME_REQUIRED_MESSAGE = 'username field is v.required';
|
|
const PASSWORD_REQUIRED_MESSAGE = 'password field is v.required';
|
|
|
|
const schema = v.object({
|
|
username: v.pipe(
|
|
v.string(USERNAME_REQUIRED_MESSAGE),
|
|
v.minLength(2, USERNAME_REQUIRED_MESSAGE),
|
|
),
|
|
password: v.pipe(
|
|
v.string(PASSWORD_REQUIRED_MESSAGE),
|
|
v.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 Valibot", 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('');
|
|
});
|