77 lines
1.9 KiB
TypeScript
77 lines
1.9 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { describe, it, expect } from 'vitest';
|
|
import { FormField } from './FormField';
|
|
import { Input } from './input';
|
|
|
|
describe('FormField Component', () => {
|
|
it('renders label', () => {
|
|
render(
|
|
<FormField label="Username">
|
|
<Input />
|
|
</FormField>,
|
|
);
|
|
|
|
expect(screen.getByText('Username')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders required indicator', () => {
|
|
render(
|
|
<FormField label="Email" required>
|
|
<Input />
|
|
</FormField>,
|
|
);
|
|
|
|
expect(screen.getByText('*')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders error message', () => {
|
|
render(
|
|
<FormField label="Email" error="Invalid email">
|
|
<Input />
|
|
</FormField>,
|
|
);
|
|
|
|
expect(screen.getByText('Invalid email')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders help text when no error', () => {
|
|
render(
|
|
<FormField label="Email" helpText="Enter your email address">
|
|
<Input />
|
|
</FormField>,
|
|
);
|
|
|
|
expect(screen.getByText('Enter your email address')).toBeInTheDocument();
|
|
});
|
|
|
|
it('does not render help text when error is present', () => {
|
|
render(
|
|
<FormField label="Email" error="Invalid email" helpText="Help text">
|
|
<Input />
|
|
</FormField>,
|
|
);
|
|
|
|
expect(screen.queryByText('Help text')).not.toBeInTheDocument();
|
|
expect(screen.getByText('Invalid email')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders children', () => {
|
|
render(
|
|
<FormField label="Email">
|
|
<Input data-testid="test-input" />
|
|
</FormField>,
|
|
);
|
|
|
|
expect(screen.getByTestId('test-input')).toBeInTheDocument();
|
|
});
|
|
|
|
it('applies custom className', () => {
|
|
const { container } = render(
|
|
<FormField label="Email" className="custom-class">
|
|
<Input />
|
|
</FormField>,
|
|
);
|
|
|
|
expect(container.firstChild).toHaveClass('custom-class');
|
|
});
|
|
});
|