Files
mes-budgets-participatifs/src/__tests__/components/DeleteModal.test.tsx

103 lines
3.3 KiB
TypeScript

import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import { DeleteModal } from '../../components/base/DeleteModal';
describe('DeleteModal', () => {
const defaultProps = {
isOpen: true,
onClose: jest.fn(),
onConfirm: jest.fn().mockResolvedValue(undefined),
title: 'Supprimer la campagne',
description: 'Êtes-vous sûr de vouloir supprimer cette campagne ?',
itemName: 'Campagne Test',
itemDetails: <div>Détails de la campagne à supprimer</div>,
};
beforeEach(() => {
jest.clearAllMocks();
});
it('should render modal when open', () => {
render(<DeleteModal {...defaultProps} />);
expect(screen.getByText('Supprimer la campagne')).toBeInTheDocument();
expect(screen.getByText('Êtes-vous sûr de vouloir supprimer cette campagne ?')).toBeInTheDocument();
expect(screen.getByText('Campagne Test à supprimer :')).toBeInTheDocument();
});
it('should not render modal when closed', () => {
render(<DeleteModal {...defaultProps} isOpen={false} />);
expect(screen.queryByText('Supprimer la campagne')).not.toBeInTheDocument();
});
it('should call onConfirm when delete button is clicked', async () => {
const onConfirm = jest.fn().mockResolvedValue(undefined);
render(<DeleteModal {...defaultProps} onConfirm={onConfirm} />);
const deleteButton = screen.getByRole('button', { name: /supprimer définitivement/i });
fireEvent.click(deleteButton);
await waitFor(() => {
expect(onConfirm).toHaveBeenCalledTimes(1);
});
});
it('should call onClose when cancel button is clicked', () => {
const onClose = jest.fn();
render(<DeleteModal {...defaultProps} onClose={onClose} />);
const cancelButton = screen.getByRole('button', { name: /annuler/i });
fireEvent.click(cancelButton);
expect(onClose).toHaveBeenCalledTimes(1);
});
it('should show loading state during deletion', async () => {
const onConfirm = jest.fn().mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));
render(<DeleteModal {...defaultProps} onConfirm={onConfirm} />);
const deleteButton = screen.getByRole('button', { name: /supprimer définitivement/i });
fireEvent.click(deleteButton);
await waitFor(() => {
expect(screen.getByText('Suppression...')).toBeInTheDocument();
});
});
it('should render with custom confirm text', () => {
render(
<DeleteModal
{...defaultProps}
confirmText="Oui, supprimer définitivement"
/>
);
expect(screen.getByRole('button', { name: /oui, supprimer définitivement/i })).toBeInTheDocument();
});
it('should show warning message', () => {
render(<DeleteModal {...defaultProps} />);
expect(screen.getByText(/⚠️ Cette action est irréversible./)).toBeInTheDocument();
});
it('should show custom warning message', () => {
render(
<DeleteModal
{...defaultProps}
warningMessage="Attention, cette suppression est définitive !"
/>
);
expect(screen.getByText(/⚠️ Attention, cette suppression est définitive !/)).toBeInTheDocument();
});
it('should display item details', () => {
render(<DeleteModal {...defaultProps} />);
expect(screen.getByText('Détails de la campagne à supprimer')).toBeInTheDocument();
});
});