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 renders well', function () {
        setUp();
        expect(screen.getByText('Drag an image here')).toBeInTheDocument();
    });
    it('should activates drag state on drag over with acceptable file type', function () {
        var container = setUp().container;
        var dropZone = container.firstChild;
        fireEvent.dragOver(dropZone, {
            dataTransfer: { types: ['Files'], dropEffect: 'copy' }
        });
        expect(dropZone).toHaveClass('isActive');
    });
    it('should does not activate drag state with unacceptable file type', function () {
        var container = setUp().container;
        var dropZone = container.firstChild;
        fireEvent.dragOver(dropZone, {
            dataTransfer: { types: ['Text'], dropEffect: 'none' }
        });
        expect(dropZone).not.toHaveClass('isActive');
    });
    it('should deactivates drag state on drag leave', function () {
        var container = setUp().container;
        var dropZone = container.firstChild;
        fireEvent.dragOver(dropZone, { dataTransfer: { types: ['Files'] } });
        expect(dropZone).toHaveClass('isActive');
        fireEvent.dragLeave(dropZone);
        expect(dropZone).not.toHaveClass('isActive');
    });
    it('should calls onAppendFile with the dropped file', function () {
        var file = new File(['test content'], 'test.png', { type: 'image/png' });
        var container = setUp().container;
        var dropZone = container.firstChild;
        fireEvent.drop(dropZone, {
            dataTransfer: {
                files: [file],
                types: ['Files']
            }
        });
        expect(mockOnAppendFile).toHaveBeenCalledWith(file);
    });
    it('should does not call onAppendFile if dropped item is not of file type', function () {
        var container = setUp().container;
        var dropZone = container.firstChild;
        fireEvent.drop(dropZone, {
            dataTransfer: {
                types: ['Text']
            }
        });
        expect(mockOnAppendFile).not.toHaveBeenCalled();
    });
});
