veza/apps/web/src/components/feedback/Alert.test.tsx

import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import userEvent from '@testing-library/user-event';
import { Alert } from './Alert';

describe('Alert Component', () => {
  describe('Rendering', () => {
    it('renders alert with children', () => {
      render(<Alert>Alert message</Alert>);

      expect(screen.getByText('Alert message')).toBeInTheDocument();
    });

    it('renders alert with title', () => {
      render(<Alert title="Alert Title">Alert message</Alert>);

      expect(screen.getByText('Alert Title')).toBeInTheDocument();
      expect(screen.getByText('Alert message')).toBeInTheDocument();
    });

    it('renders without title', () => {
      render(<Alert>Alert message</Alert>);

      expect(screen.queryByRole('heading')).not.toBeInTheDocument();
      expect(screen.getByText('Alert message')).toBeInTheDocument();
    });
  });

  describe('Variants', () => {
    it('renders info variant by default', () => {
      const { container } = render(<Alert>Info alert</Alert>);

      const alert = container.firstChild;
      expect(alert).toHaveClass('bg-blue-50');
    });

    it('renders success variant', () => {
      const { container } = render(
        <Alert variant="success">Success alert</Alert>,
      );

      const alert = container.firstChild;
      expect(alert).toHaveClass('bg-green-50');
    });

    it('renders warning variant', () => {
      const { container } = render(
        <Alert variant="warning">Warning alert</Alert>,
      );

      const alert = container.firstChild;
      expect(alert).toHaveClass('bg-yellow-50');
    });

    it('renders error variant', () => {
      const { container } = render(<Alert variant="error">Error alert</Alert>);

      const alert = container.firstChild;
      expect(alert).toHaveClass('bg-red-50');
    });
  });

  describe('Icons', () => {
    it('renders info icon for info variant', () => {
      const { container } = render(<Alert variant="info">Info alert</Alert>);

      const icon = container.querySelector('svg');
      expect(icon).toBeInTheDocument();
    });

    it('renders success icon for success variant', () => {
      const { container } = render(
        <Alert variant="success">Success alert</Alert>,
      );

      const icon = container.querySelector('svg');
      expect(icon).toBeInTheDocument();
    });

    it('renders warning icon for warning variant', () => {
      const { container } = render(
        <Alert variant="warning">Warning alert</Alert>,
      );

      const icon = container.querySelector('svg');
      expect(icon).toBeInTheDocument();
    });

    it('renders error icon for error variant', () => {
      const { container } = render(<Alert variant="error">Error alert</Alert>);

      const icon = container.querySelector('svg');
      expect(icon).toBeInTheDocument();
    });
  });

  describe('Dismissible', () => {
    it('does not show close button when dismissible is false', () => {
      render(<Alert dismissible={false}>Alert message</Alert>);

      expect(screen.queryByLabelText('Fermer')).not.toBeInTheDocument();
    });

    it('does not show close button when dismissible is true but onClose is not provided', () => {
      render(<Alert dismissible>Alert message</Alert>);

      expect(screen.queryByLabelText('Fermer')).not.toBeInTheDocument();
    });

    it('shows close button when dismissible and onClose are provided', () => {
      const onClose = vi.fn();
      render(
        <Alert dismissible onClose={onClose}>
          Alert message
        </Alert>,
      );

      expect(screen.getByLabelText('Fermer')).toBeInTheDocument();
    });

    it('calls onClose when close button is clicked', async () => {
      const user = userEvent.setup();
      const onClose = vi.fn();

      render(
        <Alert dismissible onClose={onClose}>
          Alert message
        </Alert>,
      );

      const closeButton = screen.getByLabelText('Fermer');
      await user.click(closeButton);

      expect(onClose).toHaveBeenCalledTimes(1);
    });
  });

  describe('Accessibility', () => {
    it('has role="alert"', () => {
      render(<Alert>Alert message</Alert>);

      expect(screen.getByRole('alert')).toBeInTheDocument();
    });

    it('has aria-label on close button', () => {
      const onClose = vi.fn();
      render(
        <Alert dismissible onClose={onClose}>
          Alert message
        </Alert>,
      );

      const closeButton = screen.getByLabelText('Fermer');
      expect(closeButton).toBeInTheDocument();
    });
  });

  describe('Custom className', () => {
    it('applies custom className', () => {
      const { container } = render(
        <Alert className="custom-alert">Alert message</Alert>,
      );

      const alert = container.firstChild;
      expect(alert).toHaveClass('custom-alert');
    });
  });

  describe('Complex content', () => {
    it('renders complex children content', () => {
      render(
        <Alert title="Complex Alert">
          <p>First paragraph</p>
          <p>Second paragraph</p>
        </Alert>,
      );

      expect(screen.getByText('Complex Alert')).toBeInTheDocument();
      expect(screen.getByText('First paragraph')).toBeInTheDocument();
      expect(screen.getByText('Second paragraph')).toBeInTheDocument();
    });
  });
});