用于单元测试的模拟文件输入

Question

我得到了类似这些代码行的东西：

 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 函数中都是私有的，我不想仅仅为了测试目的而公开“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 的呢？

原文由 Jakob 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

虽然您不能为 fileInput.files ，但您可以用您自己的属性替换该属性，这会完成同样的事情：

 it('should create a fileReader', () => {
    const fileInput = $('input[type=file]');
    const fileInputElement = fileInput.get(0);
    Object.defineProperty(fileInputElement, 'files', {
      value: [{name: 'file.txt'}],
      writable: false,
    });
    fileInput.trigger('input').trigger('change');

    // expect outputs...
});

这比创建您自己的事件对象要好一些，因为它更接近地模拟真实环境。

原文由 AJ Richardson 发布，翻译遵循 CC BY-SA 4.0 许可协议