Mock file upload to test a FileReader

Question

Hello and thank you for your time reading this!

I am very interested to do unit tests while developing. I am new to tests in Javascript.

I have written a function to read files we choose,with an input, however I do not know how to test it.

I have read the documentation of Jasmine, about spies: https://jasmine.github.io/api/2.6/global.html#spyOn

And: https://jasmine.github.io/2.0/introduction.html

The code:

    function readImage() {
    if ( this.files && this.files[0] ) {
        var FR= new FileReader();
        var img = new Image();
        FR.onload = function(e) {
            img.src = e.target.result;
            img.onload = function() {
                ctx.drawImage(img, 0, 0, 512, 512);
            };
        };
        FR.readAsDataURL( this.files[0] );
    }
    return [this.files, FR, img, ctx];
}

fileUpload.onchange = readImage;

The test I tried:

describe('readImage', function () {
 it('should get at least one file ', function () {

        spyOn(window, 'readImage');

        fileUpload.dispatchEvent(new Event('onchange'));

        expect(window.readImage).toHaveBeenCalled();

    })

});

Also, fileUpload is:

    function createUploadInput() {
    body = document.getElementsByTagName("BODY")[0];
    upload = document.createElement("input");
    upload.setAttribute("type", "file");
    upload.setAttribute("id", "fileUpload");
    body.appendChild(upload);
    return upload;
}

createUploadInput();

The output I get:

        Expected spy readImage to have been called.
    Error: Expected spy readImage to have been called.
        at jasmine.Spec.<anonymous> (test/readImageSpec.js:42:34)

I think it is because of the readImage method has not been called in the test. The reason could be because fileUpload.dispatchEvent(new Event('onchange')); does nothing

Could you help me please?

I have also read: How to trigger event in JavaScript?

Triggering event for unit testing

Using Jasmine to spy on a function without an object

Thank you for your help!

I have tried:

it('should get at least one file ', function () {

    spyOn(window, 'readImage');

    fileUpload.dispatchEvent(new Event('change'));

    expect(window.readImage).toHaveBeenCalled();

})

But output is:

   Expected spy readImage to have been called.
        Error: Expected spy readImage to have been called.
            at jasmine.Spec.<anonymous> (test/readImageSpec.js:42:34)

Also I tried:

it('should get at least one file ', function () {

    spyOn(window, 'readImage');

    fileUpload.onchange();

    expect(window.readImage).toHaveBeenCalled();

})

And output:

Expected spy readImage to have been called.
Error: Expected spy readImage to have been called.
    at jasmine.Spec.<anonymous> (test/readImageSpec.js:42:34)

I have also read: How can I trigger an onchange event manually?