{
+ draggedOver = true;
+ },
+ onDrop: () => {
+ dropped = true;
+ },
+ "data-testid": "dropZone"
+ })}
+ />
+ )}
+
+ );
+
+ // This does not work (dataTransfer ends up being undefined).
+ fireEvent.drop(getByTestId("dropZone"), {});
+
+ fireEvent.dragOver(getByTestId("dropZone"));
+
+ expect(dropped).toBe(true);
+ expect(draggedOver).toBe(true);
+ });
+
+ test("testing drop internal handler (faking File instances) - without and with custom onSuccess / onError handlers", async () => {
+ let instance = null;
+
+ class FilesField extends React.Component {
+ constructor() {
+ super();
+ instance = this;
+ this.ref = React.createRef();
+ this.state = {
+ files: []
+ };
+ }
+
+ render() {
+ return (
+
{
+ this.setState({ files });
+ }}
+ >
+ {() => (
+
+ {this.state.files.map(file => {
+ return - {file.name}
;
+ })}
+
+ )}
+
+ );
+ }
+ }
+
+ const { getByText, queryByText, container } = render(
);
+
+ await instance.ref.current.onDropFilesHandler({
+ e: {
+ dataTransfer: {
+ files: [
+ new File(["content-of-file1.png"], "file1.png", {
+ type: "image/png"
+ }),
+ new File(["content-of-file2.png"], "file2.png", {
+ type: "image/png"
+ }),
+ new File(["content-of-file3.jpg"], "file3.jpg", {
+ type: "image/jpg"
+ })
+ ]
+ }
+ }
+ });
+
+ expect(container).toContainElement(getByText(/file1\.png/));
+ expect(container).toContainElement(getByText(/file2\.png/));
+ expect(container).toContainElement(getByText(/file3\.jpg/));
+
+ // Drop triggered with custom onSuccess and onError handlers (must override default ones).
+ let onSuccessTriggered = false;
+ let onErrorTriggered = false;
+
+ const e = {
+ dataTransfer: {
+ files: [
+ new File(["content-of-file4.png"], "file4.png", {
+ type: "image/png"
+ }),
+ new File(["content-of-file5.png"], "file5.png", {
+ type: "image/png"
+ }),
+ new File(["content-of-file6.jpg"], "file6.jpg", {
+ type: "image/jpg"
+ })
+ ]
+ }
+ };
+
+ await instance.ref.current.onDropFilesHandler({
+ onSuccess() {
+ onSuccessTriggered = true;
+ },
+ e
+ });
+
+ await instance.ref.current.onDropFilesHandler({
+ onError() {
+ onErrorTriggered = true;
+ },
+ e: {
+ dataTransfer: {
+ files: [
+ ...e.dataTransfer.files,
+ new File(["content-of-file6.jpg"], "file6.jpg", {
+ type: "image/jpg"
+ })
+ ]
+ }
+ }
+ });
+
+ expect(container).not.toContainElement(queryByText(/file4\.png/));
+ expect(container).not.toContainElement(queryByText(/file5\.png/));
+ expect(container).not.toContainElement(queryByText(/file6\.jpg/));
+
+ expect(onSuccessTriggered).toBe(true);
+ expect(onErrorTriggered).toBe(true);
+ });
+});