smoothschedule/frontend/src/components/__tests__/ConfirmationModal.test.tsx

import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import ConfirmationModal from '../ConfirmationModal';

// Mock react-i18next
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => key,
  }),
}));

describe('ConfirmationModal', () => {
  const defaultProps = {
    isOpen: true,
    onClose: vi.fn(),
    onConfirm: vi.fn(),
    title: 'Test Title',
    message: 'Test message',
  };

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('returns null when not open', () => {
    const { container } = render(
      <ConfirmationModal {...defaultProps} isOpen={false} />
    );
    expect(container.firstChild).toBeNull();
  });

  it('renders title when open', () => {
    render(<ConfirmationModal {...defaultProps} />);
    expect(screen.getByText('Test Title')).toBeInTheDocument();
  });

  it('renders message when open', () => {
    render(<ConfirmationModal {...defaultProps} />);
    expect(screen.getByText('Test message')).toBeInTheDocument();
  });

  it('renders message as ReactNode', () => {
    render(
      <ConfirmationModal
        {...defaultProps}
        message={<span data-testid="custom-message">Custom content</span>}
      />
    );
    expect(screen.getByTestId('custom-message')).toBeInTheDocument();
  });

  it('calls onClose when close button is clicked', () => {
    render(<ConfirmationModal {...defaultProps} />);
    const buttons = screen.getAllByRole('button');
    fireEvent.click(buttons[0]);
    expect(defaultProps.onClose).toHaveBeenCalled();
  });

  it('calls onClose when cancel button is clicked', () => {
    render(<ConfirmationModal {...defaultProps} />);
    fireEvent.click(screen.getByText('common.cancel'));
    expect(defaultProps.onClose).toHaveBeenCalled();
  });

  it('calls onConfirm when confirm button is clicked', () => {
    render(<ConfirmationModal {...defaultProps} />);
    fireEvent.click(screen.getByText('common.confirm'));
    expect(defaultProps.onConfirm).toHaveBeenCalled();
  });

  it('uses custom confirm text', () => {
    render(<ConfirmationModal {...defaultProps} confirmText="Yes, delete" />);
    expect(screen.getByText('Yes, delete')).toBeInTheDocument();
  });

  it('uses custom cancel text', () => {
    render(<ConfirmationModal {...defaultProps} cancelText="No, keep" />);
    expect(screen.getByText('No, keep')).toBeInTheDocument();
  });

  it('renders info variant', () => {
    render(<ConfirmationModal {...defaultProps} variant="info" />);
    expect(screen.getByText('Test Title')).toBeInTheDocument();
  });

  it('renders warning variant', () => {
    render(<ConfirmationModal {...defaultProps} variant="warning" />);
    expect(screen.getByText('Test Title')).toBeInTheDocument();
  });

  it('renders danger variant', () => {
    render(<ConfirmationModal {...defaultProps} variant="danger" />);
    expect(screen.getByText('Test Title')).toBeInTheDocument();
  });

  it('renders success variant', () => {
    render(<ConfirmationModal {...defaultProps} variant="success" />);
    expect(screen.getByText('Test Title')).toBeInTheDocument();
  });

  it('disables buttons when loading', () => {
    render(<ConfirmationModal {...defaultProps} isLoading={true} />);
    const buttons = screen.getAllByRole('button');
    buttons.forEach((button) => {
      expect(button).toBeDisabled();
    });
  });

  it('shows spinner when loading', () => {
    render(<ConfirmationModal {...defaultProps} isLoading={true} />);
    const spinner = document.querySelector('.animate-spin');
    expect(spinner).toBeInTheDocument();
  });
});