カピバラで画像のプレビューをテストするには？

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例をご覧ください。

質問：カピバラを使用すると、画像を添付するときに画像プレビューが表示されることをどのようにテストできますか？ imgタグsrcを確認できますが、どうすればCapybaraとJavascriptコードを組み合わせることができますか？

attach_file（）は、CapybaraがJSとの親和性が低いのでここでは役に立ちません。

Answer 1

カピバラがJSと親和性がないのはどういう意味かわかりませんが、あなたのファイル入力には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