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>
82 lines
2.6 KiB
Text
82 lines
2.6 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 { Infer, object, size, string } from 'superstruct';
|
|
import { superstructResolver } from '..';
|
|
|
|
const schema = object({
|
|
username: size(string(), 2),
|
|
password: size(string(), 6),
|
|
});
|
|
|
|
type FormData = Infer<typeof schema>;
|
|
|
|
interface Props {
|
|
onSubmit: (data: FormData) => void;
|
|
}
|
|
|
|
function TestComponent({ onSubmit }: Props) {
|
|
const { register, handleSubmit } = useForm<FormData>({
|
|
resolver: superstructResolver(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 Superstruct", 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(
|
|
'Expected a string with a length of `2` but received one with a length of `0`',
|
|
);
|
|
|
|
// password
|
|
passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
|
|
expect(passwordField.validity.valid).toBe(false);
|
|
expect(passwordField.validationMessage).toBe(
|
|
'Expected a string with a length of `6` but received one with a length of `0`',
|
|
);
|
|
|
|
await user.type(screen.getByPlaceholderText(/username/i), 'jo');
|
|
await user.type(screen.getByPlaceholderText(/password/i), 'passwo');
|
|
|
|
// 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('');
|
|
});
|