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" />);

    // ErrorDisplay formats messages, so check for alert role and that message is present
    expect(screen.getByRole('alert')).toBeInTheDocument();
    // Check that some error content is rendered (ErrorDisplay may format the message)
    expect(screen.getByRole('alert').textContent).toBeTruthy();
  });

  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', () => {
    const { container } = render(<AuthErrorMessage message="Error" id="custom-id" />);

    // The id is on the wrapper div, not the alert element
    const wrapper = container.querySelector('#custom-id');
    expect(wrapper).toBeInTheDocument();
  });

  it('should have proper styling classes', () => {
    render(<AuthErrorMessage message="Error message" />);

    const alert = screen.getByRole('alert');
    // ErrorDisplay uses kodo-red styling, check for error-related classes
    expect(alert.className).toMatch(/error|red|kodo-red/i);
  });
});