veza/apps/web/src/components/ui/confirmation-dialog.test.tsx

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

describe('ConfirmationDialog Component', () => {
  const mockOnClose = vi.fn();
  const mockOnConfirm = vi.fn();

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

  it('renders when open', () => {
    render(
      <ConfirmationDialog
        open={true}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        title="Confirm Action"
        description="Are you sure?"
      />,
    );

    expect(screen.getByText('Confirm Action')).toBeInTheDocument();
    expect(screen.getByText('Are you sure?')).toBeInTheDocument();
  });

  it('does not render when closed', () => {
    render(
      <ConfirmationDialog
        open={false}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        title="Confirm Action"
        description="Are you sure?"
      />,
    );

    expect(screen.queryByText('Confirm Action')).not.toBeInTheDocument();
  });

  it('calls onConfirm when confirm button is clicked', () => {
    render(
      <ConfirmationDialog
        open={true}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        title="Delete Item"
        description="Test"
        confirmLabel="Confirm"
      />,
    );

    const confirmButton = screen.getByRole('button', { name: 'Confirm' });
    fireEvent.click(confirmButton);

    expect(mockOnConfirm).toHaveBeenCalled();
  });

  it('calls onClose when cancel button is clicked', () => {
    render(
      <ConfirmationDialog
        open={true}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        title="Delete Item"
        description="Test"
      />,
    );

    const cancelButton = screen.getByText('Cancel');
    fireEvent.click(cancelButton);

    expect(mockOnClose).toHaveBeenCalled();
  });

  it('shows loading text when isLoading is true', () => {
    render(
      <ConfirmationDialog
        open={true}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        title="Delete Item"
        description="Test"
        isLoading={true}
      />,
    );

    expect(screen.getByText('Processing...')).toBeInTheDocument();
  });

  it('does not call onConfirm when isLoading is true', () => {
    render(
      <ConfirmationDialog
        open={true}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        title="Delete Item"
        description="Test"
        isLoading={true}
      />,
    );

    const confirmButton = screen.getByText('Processing...');
    fireEvent.click(confirmButton);

    // onConfirm should not be called when loading
    expect(mockOnConfirm).not.toHaveBeenCalled();
  });

  it('uses custom confirm label', () => {
    render(
      <ConfirmationDialog
        open={true}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        title="Delete Item"
        description="Test"
        confirmLabel="Delete"
      />,
    );

    expect(screen.getByText('Delete')).toBeInTheDocument();
  });

  it('shows destructive variant icon', () => {
    render(
      <ConfirmationDialog
        open={true}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        title="Delete Item"
        description="Test"
        variant="destructive"
      />,
    );

    // The AlertTriangle icon is an SVG (rendered via portal in document.body)
    const icon = document.body.querySelector('svg');
    expect(icon).toBeInTheDocument();
  });
});