82 lines
3.0 KiB
TypeScript
82 lines
3.0 KiB
TypeScript
// src/components/ConfirmationModal.test.tsx
|
|
import React from 'react';
|
|
import { render, screen, fireEvent } from '@testing-library/react';
|
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
|
import { ConfirmationModal } from './ConfirmationModal';
|
|
|
|
describe('ConfirmationModal (in components)', () => {
|
|
const mockOnClose = vi.fn();
|
|
const mockOnConfirm = vi.fn();
|
|
|
|
const defaultProps = {
|
|
isOpen: true,
|
|
onClose: mockOnClose,
|
|
onConfirm: mockOnConfirm,
|
|
title: 'Confirm Action',
|
|
message: 'Are you sure you want to do this?',
|
|
};
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
it('should not render when isOpen is false', () => {
|
|
const { container } = render(<ConfirmationModal {...defaultProps} isOpen={false} />);
|
|
expect(container.firstChild).toBeNull();
|
|
});
|
|
|
|
it('should render correctly when isOpen is true', () => {
|
|
render(<ConfirmationModal {...defaultProps} />);
|
|
expect(screen.getByRole('heading', { name: 'Confirm Action' })).toBeInTheDocument();
|
|
expect(screen.getByText('Are you sure you want to do this?')).toBeInTheDocument();
|
|
expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument();
|
|
expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
|
|
});
|
|
|
|
it('should call onConfirm when the confirm button is clicked', () => {
|
|
render(<ConfirmationModal {...defaultProps} />);
|
|
fireEvent.click(screen.getByRole('button', { name: 'Confirm' }));
|
|
expect(mockOnConfirm).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('should call onClose when the cancel button is clicked', () => {
|
|
render(<ConfirmationModal {...defaultProps} />);
|
|
fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
|
|
expect(mockOnClose).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('should call onClose when the close icon is clicked', () => {
|
|
render(<ConfirmationModal {...defaultProps} />);
|
|
fireEvent.click(screen.getByLabelText('Close confirmation modal'));
|
|
expect(mockOnClose).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('should call onClose when the overlay is clicked', () => {
|
|
render(<ConfirmationModal {...defaultProps} />);
|
|
// The overlay is the parent of the modal content div
|
|
fireEvent.click(screen.getByRole('dialog'));
|
|
expect(mockOnClose).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('should not call onClose when clicking inside the modal content', () => {
|
|
render(<ConfirmationModal {...defaultProps} />);
|
|
fireEvent.click(screen.getByText('Are you sure you want to do this?'));
|
|
expect(mockOnClose).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should render custom button text and classes', () => {
|
|
render(
|
|
<ConfirmationModal
|
|
{...defaultProps}
|
|
confirmButtonText="Yes, Delete"
|
|
cancelButtonText="No, Keep"
|
|
confirmButtonClass="bg-blue-500"
|
|
/>,
|
|
);
|
|
const confirmButton = screen.getByRole('button', { name: 'Yes, Delete' });
|
|
expect(confirmButton).toBeInTheDocument();
|
|
expect(confirmButton).toHaveClass('bg-blue-500');
|
|
expect(screen.getByRole('button', { name: 'No, Keep' })).toBeInTheDocument();
|
|
});
|
|
});
|