140 lines
3.3 KiB
TypeScript
140 lines
3.3 KiB
TypeScript
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="Confirm"
|
|
description="Test"
|
|
/>,
|
|
);
|
|
|
|
const confirmButton = screen.getByText('Confirm');
|
|
fireEvent.click(confirmButton);
|
|
|
|
expect(mockOnConfirm).toHaveBeenCalled();
|
|
});
|
|
|
|
it('calls onClose when cancel button is clicked', () => {
|
|
render(
|
|
<ConfirmationDialog
|
|
open={true}
|
|
onClose={mockOnClose}
|
|
onConfirm={mockOnConfirm}
|
|
title="Confirm"
|
|
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="Confirm"
|
|
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="Confirm"
|
|
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="Confirm"
|
|
description="Test"
|
|
confirmLabel="Delete"
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByText('Delete')).toBeInTheDocument();
|
|
});
|
|
|
|
it('shows destructive variant icon', () => {
|
|
render(
|
|
<ConfirmationDialog
|
|
open={true}
|
|
onClose={mockOnClose}
|
|
onConfirm={mockOnConfirm}
|
|
title="Confirm"
|
|
description="Test"
|
|
variant="destructive"
|
|
/>,
|
|
);
|
|
|
|
const icon = screen.getByRole('img', { hidden: true });
|
|
expect(icon).toBeInTheDocument();
|
|
});
|
|
});
|