96 lines
2.4 KiB
TypeScript
96 lines
2.4 KiB
TypeScript
import { render, screen, fireEvent } from '@testing-library/react';
|
|
import { describe, it, expect, vi } from 'vitest';
|
|
import { ImageCropper } from './ImageCropper';
|
|
|
|
// Mock react-easy-crop
|
|
vi.mock('react-easy-crop', () => ({
|
|
default: ({ image, onCropChange, onCropComplete }: any) => (
|
|
<div data-testid="cropper">
|
|
<img src={image} alt="cropper" />
|
|
<button onClick={() => onCropChange({ x: 10, y: 10 })}>
|
|
Change Crop
|
|
</button>
|
|
<button
|
|
onClick={() =>
|
|
onCropComplete({}, { x: 0, y: 0, width: 100, height: 100 })
|
|
}
|
|
>
|
|
Complete Crop
|
|
</button>
|
|
</div>
|
|
),
|
|
}));
|
|
|
|
describe('ImageCropper Component', () => {
|
|
const mockOnCancel = vi.fn();
|
|
const mockOnCropComplete = vi.fn();
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
it('renders cropper with image', () => {
|
|
render(
|
|
<ImageCropper
|
|
imageSrc="test.jpg"
|
|
aspectRatio={1}
|
|
onCancel={mockOnCancel}
|
|
onCropComplete={mockOnCropComplete}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByTestId('cropper')).toBeInTheDocument();
|
|
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}
|
|
/>,
|
|
);
|
|
|
|
// First complete a crop
|
|
const completeButton = screen.getByText('Complete Crop');
|
|
fireEvent.click(completeButton);
|
|
|
|
// Then save
|
|
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.getByTestId('cropper')).toBeInTheDocument();
|
|
});
|
|
});
|