Testing stateful LiveComponent which holds the state of the previous action

Hi all,
I have a LiveView which has LiveComponent, which is the form with 2 steps:

  1. the form itself, with inputs
  2. the confirmation modal where a user needs to fill the same input for one field (like when you delete a github repository, you need to fill in the name of it in the confirmation pop-up)

This is how it works. When all fields are filled and validated, a user submits the form which triggers a modal. Then a user fills in the confirmation field and submits it. After the first submitting the initial form is assigned to the socket, so it can be used for the validation and sending it further.

The problem is - I can’t test the second confirmation form, because it requires the component allready to have some profiled state.
There is some code as an example:

defmodule FormComponent do
  # live component stuff here

  def handle_event("show_modal", params, socket) do
    case Form.changeset(params) do
      %{valid?: true} -> 
        {:noreply, assign(socket, show_modal: true, form: form)}

      changeset -> 
        {:noreply, assign(socket, form: form)}

  def handle_event("submit", params, socket) do
    Map.merge(params, socket.assigns.form.changes)
    |> Form.confirm_changeset()
    # do some actions if it is valid
    {:noreply, socket}

So, to be able to test the modal confirmation form I need to have assigned form changeset from the first step.
But I can only render a result of the first submit and check that the pop-up is rendered. But the second form I can’t test, because there is not possible to assign necessary data to the socket.

Is it any way I can test it? Or do I use live components incorrectly?

Where does this “form” you are signing on the socket in handle_event “show_modal” come from?

Remembering that it is possible to initialize your changeset in the mount of your live view

Ex: {:ok, assign(:changeset: Form.changeset.changeset(%Form{}))

It will always start when you redenrize your live view so you can always validate the fields in real time.

Yes, it is initialized in mount/3. But it is empty.
I need it with the data which is generated from the previous step.
So, the flow is mount with init changeset -> form -> user interaction -> show modal through a form submit -> confirm the submit (validate with the field which was entered previously)
So, when I test, I can submit the first form which updates the changeset with one with filled data and opens a modal, but I can’t continue with this state of a component to submit the confirmation form.

Can you share what you’ve built for the test so far? Phoenix.LiveViewTest — Phoenix LiveView v0.17.5 should have functions for everything you’re trying to do.

Got it, I don’t know how your code is but you passed the variable that you want to keep the state in the FormComponent module update so that it receives updates in real time and registers it on the socket later?

I was able to test the first form:

test "open a confirmation modal with a valid form", %{conn: conn} do
  {:ok, view, _html} = live(conn, "/some/path/")

  |> form("#first_form", valid_params)
  |> render_submit() =~ "HTML with modal"

So, the same component has the second confirmation form in the modal, but I can’t test it, as it requires a state of the first one, so I didn’t find anything which would help me with it. The test helpers mostly provide render_ functions which returns a rendered result of handle_event/3.
It would be nice to have submit/1 which would change the state of the view and then chain to it other actions or render when it is needed.

Kind of what you explained. FormComponent receives results of the first form, register them in the socket and the second form uses them to validate (and later send further)

The view is stateful. After rendering the submit, you can call the view again and it will have all the results from the submission. Like:

|> form("#first_form", valid_params)
|> render_submit()

|> element("only-available-after-first-form-submitted")
|> render_click()