模擬文件輸入

我有類似的幾行代碼：模擬文件輸入

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

模擬文件輸入

回答

相關問題