- Created comprehensive tests for ForgotPasswordForm component - Created comprehensive tests for AuthButton component - Created comprehensive tests for AuthFormField component - Created comprehensive tests for AuthErrorMessage component - Created comprehensive tests for TwoFactorVerify component All 48 tests pass. Covers all auth components that were missing tests. Phase: PHASE-5 Priority: P2 Progress: 242/267 (90.64%)
55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
/**
|
|
* Tests for AuthErrorMessage Component
|
|
* FE-TEST-005: Test auth error message component
|
|
*/
|
|
|
|
import { describe, it, expect } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { AuthErrorMessage } from './AuthErrorMessage';
|
|
|
|
describe('AuthErrorMessage', () => {
|
|
it('should render error message', () => {
|
|
render(<AuthErrorMessage message="Invalid credentials" />);
|
|
|
|
expect(screen.getByText('Invalid credentials')).toBeInTheDocument();
|
|
expect(screen.getByRole('alert')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should not render when message is empty', () => {
|
|
const { container } = render(<AuthErrorMessage message="" />);
|
|
|
|
expect(container.firstChild).toBeNull();
|
|
});
|
|
|
|
it('should have aria-live attribute', () => {
|
|
render(<AuthErrorMessage message="Error message" />);
|
|
|
|
const alert = screen.getByRole('alert');
|
|
expect(alert).toHaveAttribute('aria-live', 'polite');
|
|
});
|
|
|
|
it('should apply custom className', () => {
|
|
render(
|
|
<AuthErrorMessage message="Error" className="custom-class" />,
|
|
);
|
|
|
|
const alert = screen.getByRole('alert');
|
|
expect(alert.className).toContain('custom-class');
|
|
});
|
|
|
|
it('should apply custom id', () => {
|
|
render(<AuthErrorMessage message="Error" id="custom-id" />);
|
|
|
|
const alert = screen.getByRole('alert');
|
|
expect(alert).toHaveAttribute('id', 'custom-id');
|
|
});
|
|
|
|
it('should have proper styling classes', () => {
|
|
render(<AuthErrorMessage message="Error message" />);
|
|
|
|
const alert = screen.getByRole('alert');
|
|
expect(alert.className).toContain('bg-red-50');
|
|
expect(alert.className).toContain('border-red-200');
|
|
});
|
|
});
|
|
|