Come si verifica il caricamento di un file con Capybara e Dropzone.js?

Question

Sono passato a utilizzare il plug-in Dropzone.js per il caricamento di file drag-and-drop. Come posso scrivere un test Capybara per garantire che questa funzionalità continui a funzionare?

In precedenza ho avuto un modello con un elemento file di input:

<input type="file" name="attachments"> 

E la prova è stata semplice:

When(/^I upload "([^"]*)"$/) do |filename| 
    attach_file("attachments", File.expand_path(filename)) 
    # add assertion here 
end 

Tuttavia, questo non funziona più perché Dropzone non dispone di un file di input visibile .

Answer 1

Per risolvere questo, simulare una caduta anche per attivare la caduta di un allegato su Dropzone. In primo luogo aggiungere questa funzione alla definizione step:

# Upload a file to Dropzone.js 
def drop_in_dropzone(file_path) 
    # Generate a fake input selector 
    page.execute_script <<-JS 
    fakeFileInput = window.$('<input/>').attr(
     {id: 'fakeFileInput', type:'file'} 
    ).appendTo('body'); 
    JS 
    # Attach the file to the fake input selector 
    attach_file("fakeFileInput", file_path) 
    # Add the file to a fileList array 
    page.execute_script("var fileList = [fakeFileInput.get(0).files[0]]") 
    # Trigger the fake drop event 
    page.execute_script <<-JS 
    var e = jQuery.Event('drop', { dataTransfer : { files : [fakeFileInput.get(0).files[0]] } }); 
    $('.dropzone')[0].dropzone.listeners[0].events.drop(e); 
    JS 
end 

Poi prova con:

When(/^I upload "([^"]*)"$/) do |filename| 
    drop_in_dropzone File.expand_path(filename) 
    # add assertion here 
end 

NOTA: È necessario avere jQuery caricato, e l'elemento Dropzone richiede l'zona di lancio classe.

Answer 2

Nel caso in cui qualcuno è interessato, ho portato la funzione di @ Deepwell a JavaScript per poter utilizzare con javascript selenio aromatizzato:

this.dropInDropzone = function(filePath) { 
    var script = "fakeFileInput = $('#fakeFileInput'); if (fakeFileInput.length === 0) fakeFileInput = window.$('<input/>').attr({id: 'fakeFileInput', type:'file'}).appendTo('body');"; 
    // Generate a fake input selector 
    return driver.executeScript(script).then(function() { 
    // Attach the file to the fake input selector 
    return driver.findElement(webdriver.By.css('#fakeFileInput')).sendKeys(filePath); 
    }).then(function() { 
    // Add the file to a fileList array 
    return driver.executeScript("var fileList = [fakeFileInput.get(0).files[0]]"); 
    }).then(function() { 
    // Trigger the fake drop event 
    script = "var e = jQuery.Event('drop', { dataTransfer : { files : [fakeFileInput.get(0).files[0]] } }); $('.dropzone')[0].dropzone.listeners[0].events.drop(e);" 
    return driver.executeScript(script); 
    }); 
};