veza/apps/web/src/features/auth/components/AuthErrorMessage.test.tsx

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