Capybara and dropzone.js (Rails)

Question

I am trying to follow the answers that I found elsewhere but for some reason, while there aren't any basic code errors, the following test fails anyway. if I look at the screenshot taken during the test, I can see that there is no "book cover" attached. So it looks like that the actual attachment of the jpg is not happening...? I am not quite sure how to go from here?

Test:

# frozen_string_literal: true

require 'rails_helper'

RSpec.describe 'creating a book', type: :system do
  scenario 'displays a cover image if there is one', js: true do
    visit new_book_path
    fill_in 'Book Title', with: 'Catcher in the Rye'
    el = find('#book_cover', visible: false)
    el.attach_file('db/sample/images/cover-1.jpg')
    click_on 'Create Book'
    expect(page).to have_css('div.cover-large img')
  end
end

The expected code that I have on my webpage - confirmed in a dev environment is something like

<div class="cover-large">
  <img src="...">
</div>

(and if there is no real image, the img tag is replaced with an svg tag that renders a dummy image).

EDIT: Here is the HTML source of the form in question around the #book_cover element:

<div
  class="form-col col-wide dropzone dropzone-default dz-clickable"
  data-controller="coverdrop"
  data-coverdrop-max-file-size="3"
  data-coverdrop-max-files="1"
>
  <input data-coverdrop-target="input" data-direct-upload-url="http://127.0.0.1:3000/rails/active_storage/direct_uploads" type="file" name="book[cover]" id="book_cover" />
  <div class="dropzone-msg dz-message">
    <h3 class="dropzone-msg-title heading4 color-primary-dark">Drag cover image here or click to browse</h3>
    <span class="dropzone-msg-desc small color-primary-dark">3 MB file size maximum. Allowed are only image file types.</span>
  </div>
</div>

The corresponding CSS sets display=none for the input element with type=file.

Answer 1

If you are working with a newer version of capabraya you can try:

find(".dropzone").drop(Rails.root.join("path/to/image"))