src/app/shared/controls/file-drop/component/file-drop.component.spec.ts

/********************************************************************************
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/

import {async, ComponentFixture, TestBed} from "@angular/core/testing";
import {FileDropComponent} from "./file-drop.component";

describe("FileDropComponent", () => {
    let component: FileDropComponent;
    let fixture: ComponentFixture<FileDropComponent>;

    let file: File;
    let anotherFile: File;
    let thirdFile: File;
    let fakeFileList: FakeFileList;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [FileDropComponent]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(FileDropComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    beforeEach(() => {
        file = new File(["Some", "File"], "Some File");
        anotherFile = new File(["Another", "File"], "Another File");
        thirdFile = new File(["Third", "File"], "Third File");
        fakeFileList = new FakeFileList([file]);
    });

    it("should create", () => {
        expect(component).toBeTruthy();
    });

    describe("onInput", () => {
        it("should add the files of the given filelist to the appValue array", () => {
            expect(component.appValue).toEqual(undefined);
            component.appDisabled = false;
            component.onInput(fakeFileList as FileList);
            expect(component.appValue).toEqual(getAttachmentListWithTags([file]));
        });

        it("should not add the files to appValue when the app is disabled", () => {
            expect(component.appValue).toEqual(undefined);
            component.appDisabled = true;
            component.onInput(fakeFileList as FileList);
            expect(component.appValue).toEqual(undefined);
        });

        it("should emit the appValueChanged", () => {
            spyOn(component.appValueChange, "emit");
            component.appDisabled = false;
            component.onInput(fakeFileList as FileList);
            expect(component.appValueChange.emit).toHaveBeenCalledWith(getAttachmentListWithTags([file]));
        });
    });

    describe("onDelete", () => {
        it("should not delete the file when disabled or the index is invalid", () => {
            const fileArray = [file, anotherFile, thirdFile];
            const attachmentList = getAttachmentListWithTags(fileArray);

            component.appValue = attachmentList;
            component.appDisabled = true;
            component.onDelete(2);
            expect(component.appValue).toEqual(attachmentList);

            component.appDisabled = false;
            component.onDelete(14);
            expect(component.appValue).toEqual(attachmentList);
        });

        it("should delete the file found at the index in appValue", () => {
            component.appValue = getAttachmentListWithTags([file, anotherFile, thirdFile]);
            component.appDisabled = false;
            component.onDelete(1);
            expect(component.appValue).toEqual(getAttachmentListWithTags([file, thirdFile]));
            component.onDelete(1);
            expect(component.appValue).toEqual(getAttachmentListWithTags([file]));
        });

        it("should emit the deleted file for appValueDelete and the new appValue array for appValueChange", () => {
            spyOn(component.appValueChange, "emit");
            spyOn(component.appValueDelete, "emit");
            component.appValue = getAttachmentListWithTags([file, anotherFile, thirdFile]);
            component.appDisabled = false;
            component.onDelete(1);
            expect(component.appValueChange.emit).toHaveBeenCalledWith(getAttachmentListWithTags([file, thirdFile]));
            expect(component.appValueDelete.emit).toHaveBeenCalledWith(anotherFile);
        });
    });

    describe("onDrop", () => {
        it("should not call onInput when appDisabled is set to true", () => {
            const dataTransfer = {
                files: fakeFileList
            } as unknown as DataTransfer;
            const dragEvent = {
                dataTransfer,
                preventDefault() {
                }
            } as DragEvent;

            spyOn(component, "onInput");
            component.appDisabled = true;
            component.onDrop(dragEvent);
            expect(component.onInput).not.toHaveBeenCalled();
        });

        it("should call onInput with the data supplied to onDrop", () => {
            const dataTransfer = {
                files: fakeFileList
            } as unknown as DataTransfer;
            const dragEvent = {
                dataTransfer,
                preventDefault() {
                }
            } as DragEvent;

            spyOn(component, "onInput");
            component.appDisabled = false;
            component.onDrop(dragEvent);
            expect(component.onInput).toHaveBeenCalledWith(fakeFileList);
        });

        it("should not call onInput when there are no files in the DataTransfer-Object", () => {
            const dataTransfer = {
                files: null
            } as unknown as DataTransfer;
            const dragEvent = {
                dataTransfer,
                preventDefault() {
                }
            } as DragEvent;

            spyOn(component, "onInput");
            component.appDisabled = false;
            component.onDrop(dragEvent);
            expect(component.onInput).not.toHaveBeenCalled();
        });
    });

    describe("onDragOver", () => {
        it("should call preventDefault", () => {
            const dragEvent = {
                preventDefault() {
                }
            } as DragEvent;

            spyOn(dragEvent, "preventDefault");
            component.appDisabled = false;
            component.onDragOver(dragEvent);
            expect(dragEvent.preventDefault).toHaveBeenCalled();
        });
    });

    describe("openDialog", () => {
        it("should call the click function for the inputElement if not disabled", () => {
            spyOn(component.inputElement.nativeElement, "click");
            component.appDisabled = true;
            component.openDialog();
            expect(component.inputElement.nativeElement.click).not.toHaveBeenCalled();

            component.appDisabled = false;
            component.openDialog();
            expect(component.inputElement.nativeElement.click).toHaveBeenCalled();
        });
    });
});

class FakeFileList implements FileList {
    public data: File[];
    public length: number;

    [index: number]: File;

    constructor(data: File[]) {
        this.data = data;
        this.length = this.data.length;
    }

    public item(idx) {
        return this.data[idx];
    }
}

const getAttachmentWithTags = (attachment: File) => {
    return {
        attachment,
        tags: []
    };
};

const getAttachmentListWithTags = (attachments: any[]) => {
    return attachments.map((_) => getAttachmentWithTags(_));
};