flyer-crawler.projectium.com/src/components/ConfirmationModal.test.tsx

// src/components/ConfirmationModal.test.tsx
import React from 'react';
import { screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { ConfirmationModal } from './ConfirmationModal';
import { renderWithProviders } from '../tests/utils/renderWithProviders';

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 } = renderWithProviders(
      <ConfirmationModal {...defaultProps} isOpen={false} />,
    );
    expect(container.firstChild).toBeNull();
  });

  it('should render correctly when isOpen is true', () => {
    renderWithProviders(<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', () => {
    renderWithProviders(<ConfirmationModal {...defaultProps} />);
    fireEvent.click(screen.getByRole('button', { name: 'Confirm' }));
    expect(mockOnConfirm).toHaveBeenCalledTimes(1);
  });

  it('should call onClose when the cancel button is clicked', () => {
    renderWithProviders(<ConfirmationModal {...defaultProps} />);
    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
    expect(mockOnClose).toHaveBeenCalledTimes(1);
  });

  it('should call onClose when the close icon is clicked', () => {
    renderWithProviders(<ConfirmationModal {...defaultProps} />);
    fireEvent.click(screen.getByLabelText('Close confirmation modal'));
    expect(mockOnClose).toHaveBeenCalledTimes(1);
  });

  it('should call onClose when the overlay is clicked', () => {
    renderWithProviders(<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', () => {
    renderWithProviders(<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', () => {
    renderWithProviders(
      <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();
  });
});