Как проверить предварительный просмотр изображения с Capybara?

Question

У меня есть код js, который отображает предварительный просмотр изображения после добавления изображения.

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#preview').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 
$(document).ready(function(){ 
    $("#attach").change(function() { 
     readURL(this); 
    }); 
}); 

И HTML:

<img id="preview" style="width:400px;height:400px;"> 

<label for="attach"> 
    <span>Click to add picture</span> 
</label> 

<input class="hidden" id="attach" type="file" name="profile[image]"> 

Заканчивать Codepen пример.

Вопрос: Используя capybara, как я могу проверить, что предварительный просмотр изображения появляется, когда я прикрепляю изображение? Я знаю, мы можем проверить img тег для src но как я могу объединить Capybara с Javascript кодом?

Просто используя attach_file() ничего полезного здесь не делает, поскольку Capybara не дружит с JS.

Answer 1

Я не уверен, что вы имеете в виду, что Capybara не дружит с JS, однако в вашем примере есть несогласованность, поскольку ваш входной файл имеет идентификатор «attach», а ваш слушатель смены JS прослушивает «#inputFile '- при условии, что это исправлено (в этом коде я предположил, что входной идентификатор должен быть «прикреплен»), тогда вы можете сделать

execute_script('$("#attach").removeClass("hidden")') #make input visible so you can attach to it 
attach_file('attach', 'some_file.jpg') #attach the file 
expect(page).to have_css('#preview[src]') #confirm a src attribute was set