問(wèn)題描述
我正在嘗試進(jìn)行此測(cè)試，但我不知道如何使用 FileReader 編寫測(cè)試.這是我的代碼
<上一頁(yè)><代碼>功能上傳器(文件){this.file = 文件；}Uploader.prototype = (function() {函數(shù)上傳文件(文件，文件內(nèi)容){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: "/上傳/文件",類型:發(fā)布"，數(shù)據(jù):文件內(nèi)容，內(nèi)容類型:文件類型，成功:函數(shù)(){//$("#thumbnail").attr("src", "/upload/thumbnail");},錯(cuò)誤:函數(shù)(){警報(bào)(失敗")；},xhr:函數(shù)(){myXhr = $.ajaxSettings.xhr();如果(myXhr.upload){myXhr.upload.addEventListener('progress',showProgress, false);} 別的 {console.log("不支持上傳進(jìn)度");}返回我的Xhr；}});}返回 {上傳:函數(shù)(){var self = 這個(gè)，閱讀器=新文件閱讀器()，文件內(nèi)容 = {};reader.onload = 函數(shù)(e){file_content = e.target.result.split(',')[1];上傳文件(self.file，文件內(nèi)容)；}}};})();這是我的測(cè)試
<上一頁(yè)><代碼>描述(上傳者"，函數(shù)(){it("應(yīng)該上傳文件成功", function() {spyOn($, "ajax");var fakeFile = {};var uploader = new Uploader(fakeFile);上傳者.上傳()；期望($.ajax.mostRecentCall.args[0]["url"]).toEqual("/upload/file");})});但它永遠(yuǎn)不會(huì)到達(dá) reader.onload.
這里的問(wèn)題是 reader.onload 的使用很難測(cè)試.您可以使用 reader.addEventListener 代替，這樣您就可以監(jiān)視全局 FileReader 對(duì)象并返回一個(gè)模擬:
eventListener = jasmine.createSpy();spyOn(window, "FileReader").andReturn({添加事件監(jiān)聽器:事件監(jiān)聽器})然后你可以自己觸發(fā) onload 回調(diào):
expect(eventListener.mostRecentCall.args[0]).toEqual('load');eventListener.mostRecentCall.args[1]({目標(biāo):{result:'你要測(cè)試的結(jié)果'}})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'
}
})
這篇關(guān)于如何在 Jasmine 中編寫 FileReader 測(cè)試?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！