Mock-Datei Eingang für Unit-Test

Question

habe ich so etwas wie diese Zeilen Code:

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); 
}; 

Alle Methoden sind privat in einer jQuery-Funktion und ich whant nicht „handleNewFiles“ öffentlich machen nur für Testzweck
Ich würde gerne diese Zeilen mit so etwas wie dies zu testen:

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(); 
}); 

Aber wie kam ich einige Dummy-Daten in event.target.files?

Answer 1

Okay, ich finde eine Lösung. Sie können ein gefälschtes natives Ereignis mit Dateien nicht erstellen und aus Sicherheitsgründen ist das eine gute Sache. Aber in meinem Fall sieht die Lösung dieses wie:

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(); 
}); 

Answer 2

ich eine leicht modifizierte Lösung bin Entsendung basierend auf Jakobs Antwort. Ich brauchte ein paar kleine Änderungen, damit es für mich funktionierte. Dieser arbeitete für mich "eckig" mit: "1.0.6", "Jasmin-Knoten": "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'}});

Answer 3

dieses Artikel kann hilft

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(); 
 
}