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.7 KiB
Text
82 lines
2.7 KiB
Text
import { render, screen } from '@testing-library/react';
|
|
import user from '@testing-library/user-event';
|
|
import type { Infer } from '@typeschema/main';
|
|
import React from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { z } from 'zod';
|
|
import { typeschemaResolver } from '..';
|
|
|
|
const USERNAME_REQUIRED_MESSAGE = 'username field is required';
|
|
const PASSWORD_REQUIRED_MESSAGE = 'password field is required';
|
|
|
|
const schema = z.object({
|
|
username: z.string().min(1, { message: USERNAME_REQUIRED_MESSAGE }),
|
|
password: z.string().min(1, { message: PASSWORD_REQUIRED_MESSAGE }),
|
|
});
|
|
|
|
type FormData = Infer<typeof schema>;
|
|
|
|
interface Props {
|
|
onSubmit: (data: FormData) => void;
|
|
}
|
|
|
|
function TestComponent({ onSubmit }: Props) {
|
|
const { register, handleSubmit } = useForm<FormData>({
|
|
resolver: typeschemaResolver(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 TypeSchema", 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(/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('');
|
|
});
|