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( , ); expect(screen.getByText('Confirm Action')).toBeInTheDocument(); expect(screen.getByText('Are you sure?')).toBeInTheDocument(); }); it('does not render when closed', () => { render( , ); expect(screen.queryByText('Confirm Action')).not.toBeInTheDocument(); }); it('calls onConfirm when confirm button is clicked', () => { render( , ); const confirmButton = screen.getByText('Confirm'); fireEvent.click(confirmButton); expect(mockOnConfirm).toHaveBeenCalled(); }); it('calls onClose when cancel button is clicked', () => { render( , ); const cancelButton = screen.getByText('Cancel'); fireEvent.click(cancelButton); expect(mockOnClose).toHaveBeenCalled(); }); it('shows loading text when isLoading is true', () => { render( , ); expect(screen.getByText('Processing...')).toBeInTheDocument(); }); it('does not call onConfirm when isLoading is true', () => { render( , ); 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( , ); expect(screen.getByText('Delete')).toBeInTheDocument(); }); it('shows destructive variant icon', () => { render( , ); const icon = screen.getByRole('img', { hidden: true }); expect(icon).toBeInTheDocument(); }); });