import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { TargetBox } from './TargetBox';
var mockOnAppendFile = jest.fn();
var setUp = function () {
    return render(React.createElement(TargetBox, { onAppendFile: mockOnAppendFile }));
};
describe('TargetBox', function () {
    afterEach(function () {
        jest.clearAllMocks();
    });
    it('should render correctly', function () {
        setUp();
        expect(screen.getByText('Drag an image here')).toBeInTheDocument();
        expect(screen.getByRole('button', { name: 'Drop files here' })).toBeInTheDocument();
    });
    it('should call onAppendFile when file is dropped', function () {
        var file = new File(['test content'], 'test.png', { type: 'image/png' });
        setUp();
        var dropZone = screen.getByRole('button', { name: 'Drop files here' });
        fireEvent.drop(dropZone, {
            dataTransfer: {
                files: [file],
                types: ['Files']
            }
        });
        expect(mockOnAppendFile).toHaveBeenCalledWith(file);
    });
});
