veza/apps/web/src/features/auth/components/AuthErrorMessage.test.tsx
senke 815d449c3d [FE-TEST-005] test: Add component tests for auth components
- 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%)
2025-12-25 17:12:50 +01:00

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');
});
});