LiveView file upload test

Phoenix Forum Questions / Help
, ,
1

I’m trying to test a file upload:


    file =
      file_input(view, "#profile_pic_upload", :profile_pic, [
        %{
          last_modified: '1_624_366_053_000',
          name: "profile_test.png",
          content: File.read!("../support/profile_test.png"),
          size: 269_280,
          type: "image/png"
        }
      ])

    assert render_upload(file, "foo.png") =~ "100%"

But I keep getting this error:

** (ArgumentError) expected selector "#profile_pic_upload input[type=\"file\"][name=\"profile_pic\"]" to return a single element, but got none within:

But the HTML returned seems to contain that specific element:

<input accept=".jpg,.jpeg,.png" data-phx-active-refs="" data-phx-done-refs="" data-phx-preflighted-refs="" data-phx-update="ignore" data-phx-upload-ref="phx-Fors3j71WxhLhgGi" id="profile_pic_upload" name="profile_pic" phx-hook="Phoenix.LiveFileUpload" type="file"/>

So why is it unable to find the selector? Is there something I need to do to be more explicit?

For some context, I’m not actually trying to test the upload percentage, I’m just working through the docs. I am trying to populate the field with a file, submit the form to test some logic that my LiveView performs when a profile is updated with a profile picture. If there is another way to submit a form with a file attached, or fake it, I’m all ears!

2

I think that instead of doing

file_input(view, "#profile_pic_upload", ...)

you should do

file_input(view, "#my_form_containing_profile_pic_upload", ...)

Let us know if it works!

3

Thanks @cblavier that definitely gets the correct field input.
Now I’m getting an error:

** (exit) exited in: GenServer.call(#PID<0.802.0>, {:chunk, "profile_test.png", 100, #PID<0.800.0>, #Phoenix.LiveViewTest.Element<selector: "#account_form input[type=\"file\"][name=\"profile_pic\"]", text_filter: nil, ...>}, 5000)
 ** (EXIT) shutdown: :closed

But I assume that’s related to something else.

1 Like
4

What version of LiveView are you running currently? In the latest release we should be catching this exit for you.

5

Note that you do not need to pass size if you are passing the content, as we’ll calculate the correct byte_size for you. You may be passing a mismatched size which we aren’t handling

5 Likes
6

Thank you so much that was the exact issue. I wish I could mark two answers as solutions!