veza/apps/web/src/components/ui/ImageCropper.test.tsx

import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { ImageCropper } from './ImageCropper';

// Mock react-easy-crop (lazy loaded in the component)
// The component uses a mock Cropper internally that renders "Cropper Mock"

describe('ImageCropper Component', () => {
  const mockOnCancel = vi.fn();
  const mockOnCropComplete = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders cropper with image', async () => {
    render(
      <ImageCropper
        imageSrc="test.jpg"
        aspectRatio={1}
        onCancel={mockOnCancel}
        onCropComplete={mockOnCropComplete}
      />,
    );

    expect(screen.getByText('Edit Image')).toBeInTheDocument();
  });

  it('calls onCancel when cancel button is clicked', () => {
    render(
      <ImageCropper
        imageSrc="test.jpg"
        aspectRatio={1}
        onCancel={mockOnCancel}
        onCropComplete={mockOnCropComplete}
      />,
    );

    const cancelButton = screen.getByText('Cancel');
    fireEvent.click(cancelButton);

    expect(mockOnCancel).toHaveBeenCalled();
  });

  it('calls onCropComplete when save button is clicked', () => {
    render(
      <ImageCropper
        imageSrc="test.jpg"
        aspectRatio={1}
        onCancel={mockOnCancel}
        onCropComplete={mockOnCropComplete}
      />,
    );

    // Click save button (Apply Crop) - it calls onCropComplete with current croppedAreaPixels
    const saveButton = screen.getByText('Apply Crop');
    fireEvent.click(saveButton);

    expect(mockOnCropComplete).toHaveBeenCalled();
  });

  it('renders with circular crop when circularCrop is true', () => {
    render(
      <ImageCropper
        imageSrc="test.jpg"
        aspectRatio={1}
        onCancel={mockOnCancel}
        onCropComplete={mockOnCropComplete}
        circularCrop={true}
      />,
    );

    expect(screen.getByText('Edit Image')).toBeInTheDocument();
  });
});