Как вы тестируете загрузку файла с помощью Capybara и Dropzone.js?

Я перешел на использование Dropzone.js плагина для перетаскивания файлов. Как я могу написать тест Capybara, чтобы убедиться, что эта функция продолжает работать?

Ранее у меня был шаблон с элементом входного файла:

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

И тест был прост:

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

Однако это больше не работает, потому что Dropzone не имеет видимого ввода файла.

12 голосов | спросил deepwell 1 +03002015-10-01T09:10:03+03:00312015bEurope/MoscowThu, 01 Oct 2015 09:10:03 +0300 2015, 09:10:03

2 ответа


0

Чтобы решить эту проблему, смоделируйте падение даже, чтобы вызвать сброс приложения в Dropzone. Сначала добавьте эту функцию в определение шага:

# 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

Затем проверьте с помощью

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

ПРИМЕЧАНИЕ. Вам необходимо загрузить jQuery, а элемент Dropzone требует класса dropzone .

ответил deepwell 1 +03002015-10-01T09:10:03+03:00312015bEurope/MoscowThu, 01 Oct 2015 09:10:03 +0300 2015, 09:10:03
0

На случай, если кому-то будет интересно, я перенес функцию @ deepwell на javascript, чтобы использовать ее с селеном, ароматизированным javascript.

 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);
  });
};
ответил ppires 7 J000000Thursday16 2016, 01:40:46

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132