replace-code-modal.spec.tsx

import { render, fireEvent, screen } from '@testing-library/react';
import { ReplaceCodeModal } from '../replace-code-modal';

jest.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => key,
  }),
}));

describe('ReplaceCodeModal', () => {
  const handleCodeReplaceMock = jest.fn();

  beforeEach(() => {
    handleCodeReplaceMock.mockClear();
  });

  const renderComponent = () =>
    render(<ReplaceCodeModal handleCodeReplace={handleCodeReplaceMock} />);

  it('should render the modal with correct title and message', () => {
    renderComponent();

    expect(screen.getByText('Replace current content?')).toBeInTheDocument();
    expect(
      screen.getByText('Existing content will be replaced. Do you want to continue?'),
    ).toBeInTheDocument();
  });

  it('should render buttons with correct text', () => {
    renderComponent();

    expect(screen.getByText('Yes')).toBeInTheDocument();
    expect(screen.getByText('No')).toBeInTheDocument();
    expect(screen.getByText('Keep both')).toBeInTheDocument();
  });

  it('should call handleCodeReplace when "Yes" button is clicked', () => {
    renderComponent();

    fireEvent.click(screen.getByText('Yes'));
    expect(handleCodeReplaceMock).toHaveBeenCalledTimes(1);
  });

  it('should call handleCodeReplace when "No" button is clicked', () => {
    renderComponent();

    fireEvent.click(screen.getByText('No'));
    expect(handleCodeReplaceMock).toHaveBeenCalledTimes(1);
  });

  it('should call handleCodeReplace when "Keep both" button is clicked', () => {
    renderComponent();

    fireEvent.click(screen.getByText('Keep both'));
    expect(handleCodeReplaceMock).toHaveBeenCalledTimes(1);
  });

  it('should call handleCodeReplace when close button (X) is clicked', () => {
    renderComponent();

    const closeButton = screen.getByLabelText('Close');
    expect(closeButton).toBeInTheDocument();

    fireEvent.click(closeButton);
    expect(handleCodeReplaceMock).toHaveBeenCalledTimes(1);
  });
});