Error when testing add/remove of nested forms - data getting out of sync?

[sevenseacat]

I'm not sure whether my issue is in PhoenixTest or LV itself, any guidance you can offer would be appreciated :)

I'm having issues trying to use PhoenixTest to test a page that has a nested form, with add/remove functionality for the nested records. The form works in a browser, and everything looks correct in the test right up until submitting the form - then I get an error because something is trying fill in form fields that don't exist.

My test looks like this:

    test "track data can be added and removed for an album", %{conn: conn, artist: artist} do
      conn
      |> insert_and_authenticate_user(:admin)
      |> visit(~p"/artists/#{artist}/albums/new")
      |> fill_in("Name", with: "Sample With Tracks")
      |> fill_in("Year Released", with: 2021)
      |> click_link("Add Track")
      |> click_link("Add Track")
      |> fill_in("tr[data-role=track-0] input", "Number", with: 1)
      |> fill_in("tr[data-role=track-0] input", "Name", with: "First Track")
      |> fill_in("tr[data-role=track-0] input", "Duration", with: "2:22")
      |> fill_in("tr[data-role=track-1] input", "Number", with: 2)
      |> fill_in("tr[data-role=track-1] input", "Name", with: "Second Track")
      |> fill_in("tr[data-role=track-1] input", "Duration", with: "3:33")
      |> check("tr[data-role=track-0] input", "Delete")
      |> open_browser()
      |> click_button("Save")

It's a little bit convoluted while I try to get it to work. but the idea is to test both the add and remove functionality in one test by adding two, removing one, submitting the form, and the record should be created with one track. The open_browser() shows exactly what I would expect, the form with one track record rendered.

The error I get on save is the following:

  1) test creating a new album track data can be added and removed for an album (TunezWeb.Albums.FormLiveTest)
     test/tunez_web/live/albums/form_live_test.exs:32
     ** (ArgumentError) could not find non-disabled input, select or textarea with name "form[tracks][1][duration]" within:

         <input type="text" name="form[name]" id="album_form_name" value="Sample With Tracks" class="input input-bordered w-full error:input-error" phx-debounce="250"/>
         <input type="number" name="form[year_released]" id="album_form_year_released" value="2021" class="input input-bordered w-full error:input-error" phx-debounce="250"/>
         <input type="text" name="form[cover_image_url]" id="album_form_cover_image_url" class="input input-bordered w-full error:input-error" phx-debounce="250"/>
         <input type="hidden" name="form[tracks][0][_persistent_id]" value="1"/>
         <input type="hidden" name="form[tracks][0][_touched]" value="_form_type,_persistent_id,_touched,duration,name,number"/>
         <input type="hidden" name="form[tracks][0][_form_type]" value="create"/>
         <input type="number" name="form[tracks][0][number]" id="album_form_tracks_1_number" value="2" class="input input-bordered w-full error:input-error" phx-debounce="250"/>
         <input type="text" name="form[tracks][0][name]" id="album_form_tracks_1_name" value="Second Track" class="input input-bordered w-full error:input-error" phx-debounce="250"/>
         <input type="text" name="form[tracks][0][duration]" id="album_form_tracks_1_duration" value="3:33" class="input input-bordered w-full error:input-error" phx-debounce="250"/>
         <input type="checkbox" id="album_form_tracks_1_delete" name="form[_drop_tracks][]" value="0" class="hidden"/>

     code: |> click_button("Save")
     stacktrace:
       (phoenix_live_view 1.0.2) lib/phoenix_live_view/test/live_view_test.ex:1106: Phoenix.LiveViewTest.call/2
       (phoenix_test 0.5.1) lib/phoenix_test/live.ex:338: PhoenixTest.Live.submit_form/4
       test/tunez_web/live/albums/form_live_test.exs:51: (test)

Somewhere in memory has an out-of-date version of what fields the form has - it thinks there should still be two tracks rendered, at indexes 0 and 1, when the page only has one. I can't work out if this is done in PhoenixTest, as it seems to hold some state, or in the ClientProxy in Phoenix.LiveViewTest.

I've gone around and around on this for a bit now but can't work out where the issue is coming from.