私はこれらのコード行のようなものだユニットテスト

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」公衆を作るためにwhantはありませんテスト目的。
私はこのようなもので、これらの行をテストするのが大好きだ：

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にいくつかのダミーデータを取得するのですか？

Answer 1

申し訳ありません解決策を見つけました。ファイルで偽のネイティブイベントを作成することはできません。セキュリティ上の理由から、それは良いことです。しかし、私の場合、ソリューションは次のようになります。

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

私は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'}});

Answer 3

これを記事は

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

に役立つかもしれません3210