模拟文件输入

我有类似的几行代码：模拟文件输入

jQuery('.js-img-input').on('change', handleNewFiles); 

var handleNewFiles = function(event) { 
    var fileList = event.target.files; 
    loadFileList(fileList); 
}; 

var loadFileList = function(fileList) { 
    jQuery(fileList).each(function(key, file) { 
     readFileAsync(file); 
    }); 
} 

var readFileAsync = function(file) { 
    var fileReader = new FileReader(); 
    fileReader.addEventListener("load", function(event) { 
     file.result = event.target.result; 
     saveFile(file); 
    }); 
    fileReader.readAsDataURL(file); 
};

所有的方法都是一个jQuery函数内部私人，我不whant使“handleNewFiles”公众只为测试目的。
我很乐意与这样的事情来测试这些行：

it('should create a fileReader', function(){ 
    spyOn(window, 'FileReader').and.returnValue({ 
     addEventListener: function(){}, 
     readAsDataURL: function(){} 
    }); 
    jQuery('.js-img-input').trigger('change'); 
    expect(window.FileReader).toHaveBeenCalled(); 
});

但我怎么得到一些无效资料event.target.files？

来源

2016-03-31 Jakob

好吧我找到了解决方案。您不能用文件创建伪造的本机事件，并且出于安全原因这是件好事。但在我的情况下，解决方案如下所示：

it('should create a fileReader', function(){ 
    var onChangeCallback; 
    spyOn(jQuery.fn, 'on').and.callFake(function(eventName, callback){ 
    if(eventName === 'change'){ 
     onChangeCallback = callback; 
    } 
    }); 
    spyOn(window, 'FileReader').and.returnValue({ 
    addEventListener: function(){}, 
    readAsDataURL: function(){} 
    }); 
    onChangeCallback({target:{files:[1,2,3]}}); 
    expect(window.FileReader).toHaveBeenCalled(); 
});

来源

2016-04-04 05:35:41 Jakob

Fix onChangeCallback（{target {files：[1,2,3]}}）;请。你在那里错过了一个冒号。它应该是：onChangeCallback（{target：{files：[1,2,3]}}）; – vullnetyy

添加冒号。谢谢！ – Jakob

我发布了一个基于Jakob的答案稍作修改的解决方案。我需要稍作修改才能为我工作。 “1.0.6”， “茉莉花节点”： “1.3.1”， “jQuery的”：这是用 “角” 为我工作 “1.10.0”

var onChangeCallback; 
 

 
spyOn(jQuery.fn, 'on').andCallFake(function(eventName, selector, callback){ 
 
    if(eventName === 'change'){ 
 
    onChangeCallback = callback; 
 
    } 
 
}); 
 
spyOn(window, 'FileReader').andReturn({ 
 
    addEventListener: function(){}, 
 
    readAsDataURL: function(){} 
 
}); 
 

 
onChangeCallback({currentTarget: {files:[{size: 4000}], value: 'asd'}});

来源

2016-10-01 17:59:08 vullnetyy

这物品可以帮助

http://nerds.intuo.io/2016/05/12/mocking-file-uploads-in-javascript.html

function fillInFileInput(selector, file) { 
 
    // Get the input 
 
    let input = jQuery(selector); 
 

 
    // Get out file options 
 
    let { name, type, content } = file; 
 

 
    // Create a custom event for change and inject target 
 
    let event = jQuery.Event('change', { 
 
    target: { 
 
     files: [{ 
 
     name: name, type: type 
 
     }] 
 
    } 
 
    }); 
 

 
    // Stub readAsDataURL function 
 
    let stub = sinon.stub(FileReader.prototype, 'readAsDataURL', function() { 
 
    this.onload({ target: { result: content }}); 
 
    }); 
 

 
    // Trigger event 
 
    input.trigger(event); 
 

 
    // We don't want FileReader to be stubbed for all eternity 
 
    stub.restore(); 
 
}

来源

2017-04-11 02:38:55 level55

模拟文件输入

回答

相关问题