121 lines
3.3 KiB
TypeScript
121 lines
3.3 KiB
TypeScript
/**
|
|
* Tests for AuthFormField Component
|
|
* FE-TEST-005: Test auth form field component
|
|
*/
|
|
|
|
import { describe, it, expect } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { AuthFormField } from './AuthFormField';
|
|
|
|
describe('AuthFormField', () => {
|
|
it('should render label and children', () => {
|
|
render(
|
|
<AuthFormField label="Email">
|
|
<input type="email" />
|
|
</AuthFormField>,
|
|
);
|
|
|
|
expect(screen.getByText('Email')).toBeInTheDocument();
|
|
expect(screen.getByRole('textbox')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should show required indicator', () => {
|
|
render(
|
|
<AuthFormField label="Email" required>
|
|
<input type="email" />
|
|
</AuthFormField>,
|
|
);
|
|
|
|
const label = screen.getByText('Email');
|
|
expect(label).toBeInTheDocument();
|
|
// Check for required asterisk (it's in a span with aria-label="required")
|
|
expect(screen.getByLabelText('required')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should display error message', () => {
|
|
render(
|
|
<AuthFormField label="Email" error="Email is required">
|
|
<input type="email" />
|
|
</AuthFormField>,
|
|
);
|
|
|
|
expect(screen.getByText('Email is required')).toBeInTheDocument();
|
|
expect(screen.getByText('Email is required')).toHaveAttribute(
|
|
'role',
|
|
'alert',
|
|
);
|
|
});
|
|
|
|
it('should display help text when no error', () => {
|
|
render(
|
|
<AuthFormField label="Email" helpText="Enter your email address">
|
|
<input type="email" />
|
|
</AuthFormField>,
|
|
);
|
|
|
|
expect(screen.getByText('Enter your email address')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should not display help text when error is present', () => {
|
|
render(
|
|
<AuthFormField
|
|
label="Email"
|
|
error="Email is required"
|
|
helpText="Enter your email address"
|
|
>
|
|
<input type="email" />
|
|
</AuthFormField>,
|
|
);
|
|
|
|
expect(screen.getByText('Email is required')).toBeInTheDocument();
|
|
expect(
|
|
screen.queryByText('Enter your email address'),
|
|
).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('should use custom htmlFor', () => {
|
|
render(
|
|
<AuthFormField label="Email" htmlFor="custom-email">
|
|
<input id="custom-email" type="email" />
|
|
</AuthFormField>,
|
|
);
|
|
|
|
const label = screen.getByText('Email');
|
|
expect(label).toHaveAttribute('for', 'custom-email');
|
|
});
|
|
|
|
it('should generate field id if htmlFor not provided', () => {
|
|
render(
|
|
<AuthFormField label="Email">
|
|
<input type="email" />
|
|
</AuthFormField>,
|
|
);
|
|
|
|
const label = screen.getByText('Email');
|
|
expect(label).toHaveAttribute('for');
|
|
expect(label.getAttribute('for')).toMatch(/^auth-field-/);
|
|
});
|
|
|
|
it('should apply custom className', () => {
|
|
const { container } = render(
|
|
<AuthFormField label="Email" className="custom-class">
|
|
<input type="email" />
|
|
</AuthFormField>,
|
|
);
|
|
|
|
const fieldContainer = container.querySelector('.custom-class');
|
|
expect(fieldContainer).toBeInTheDocument();
|
|
});
|
|
|
|
it('should associate error message with field', () => {
|
|
render(
|
|
<AuthFormField label="Email" error="Email is required">
|
|
<input type="email" />
|
|
</AuthFormField>,
|
|
);
|
|
|
|
const errorMessage = screen.getByText('Email is required');
|
|
const errorId = errorMessage.getAttribute('id');
|
|
expect(errorId).toMatch(/-error$/);
|
|
});
|
|
});
|