Hi all,
I have a LiveView which has LiveComponent, which is the form with 2 steps:
the form itself, with inputs
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)}
end
end
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}
end
end
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?
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.
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?
test "open a confirmation modal with a valid form", %{conn: conn} do
{:ok, view, _html} = live(conn, "/some/path/")
view
|> form("#first_form", valid_params)
|> render_submit() =~ "HTML with modal"
end
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)
