如何在 Jasmine 中编写 FileReader 测试?

我正在尝试进行此测试，但我不知道如何使用 FileReader 编写测试.这是我的代码

<上一页><代码>功能上传器(文件){this.file = 文件；}Uploader.prototype = (function() {函数上传文件(文件，文件内容){var file_data = new FormData()file_data.append('文件名', 文件名)file_data.append('mimetype', file.type)file_data.append('data', file_contents)file_data.append('size', file.size)$.ajax({url: "/上传/文件",类型:发布"，数据:文件内容，内容类型:文件类型，成功:函数(){//$("#thumbnail").attr("src", "/upload/thumbnail");},错误:函数(){警报(失败")；},xhr:函数(){myXhr = $.ajaxSettings.xhr();如果(myXhr.upload){myXhr.upload.addEventListener('progress',showProgress, false);} 别的 {console.log("不支持上传进度");}返回我的Xhr；}});}返回 {上传:函数(){var self = 这个，阅读器=新文件阅读器()，文件内容 = {};reader.onload = 函数(e){file_content = e.target.result.split(',')[1];上传文件(self.file，文件内容)；}}};})();

这是我的测试

<上一页><代码>描述(上传者"，函数(){it("应该上传文件成功", function() {spyOn($, "ajax");var fakeFile = {};var uploader = new Uploader(fakeFile);上传者.上传()；期望($.ajax.mostRecentCall.args[0]["url"]).toEqual("/upload/file");})});

但它永远不会到达 reader.onload.

解决方案

这里的问题是 reader.onload 的使用很难测试.您可以使用 reader.addEventListener 代替，这样您就可以监视全局 FileReader 对象并返回一个模拟:

eventListener = jasmine.createSpy();spyOn(window, "FileReader").andReturn({添加事件监听器:事件监听器})

然后你可以自己触发 onload 回调:

expect(eventListener.mostRecentCall.args[0]).toEqual('load');eventListener.mostRecentCall.args[1]({目标:{result:'你要测试的结果'}})

I'm trying to make this test work, but I couldn't get my head around how to write a test with FileReader. This is my code

function Uploader(file) {
    this.file = file;
}

Uploader.prototype =  (function() {

    function upload_file(file, file_contents) {
        var file_data = new FormData()
        file_data.append('filename', file.name)
        file_data.append('mimetype', file.type)
        file_data.append('data', file_contents)
        file_data.append('size', file.size)

        $.ajax({
            url: "/upload/file",
            type: "POST",
            data: file_contents,            
            contentType: file.type,
            success: function(){

                // $("#thumbnail").attr("src", "/upload/thumbnail");    

            },
            error: function(){
                alert("Failed");
            },
            xhr: function() {
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener('progress',showProgress, false);
                } else {
                    console.log("Upload progress is not supported.");
                }
                return myXhr;
            }
        });
    }

    return {
        upload : function() {
            var self = this,
                reader = new FileReader(),
                file_content = {};

            reader.onload = function(e) {
                file_content = e.target.result.split(',')[1];

                upload_file(self.file, file_content);
            }
        }
    };
})();

And this is my test

describe("Uploader", function() {
    it("should upload a file successfully", function() {
        spyOn($, "ajax");
        var fakeFile = {};

        var uploader = new Uploader(fakeFile);
        uploader.upload();

        expect($.ajax.mostRecentCall.args[0]["url"]).toEqual("/upload/file");
    })
});

But it never gets to reader.onload.

解决方案

The problem here is the use of reader.onload which is hard to test. You could use reader.addEventListener instead so you can spy on the global FileReader object and return a mock:

eventListener = jasmine.createSpy();
spyOn(window, "FileReader").andReturn({
 addEventListener: eventListener
})

then you can fire the onload callback by yourself:

expect(eventListener.mostRecentCall.args[0]).toEqual('load');
eventListener.mostRecentCall.args[1]({
  target:{
    result:'the result you wanna test'
  }
})