如何用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不友好的意思是什么，但是在你的例子中有一个不一致的地方，因为你的文件输入有一个id为"attach"，你的JS变化监听器正在监听'#inputFile' -假设这是固定的(在这段代码中我假设输入id应该是'attach')那么你可以做

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