dsnipe
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:
- 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?
First Post!
gabriel137
Where does this “form” you are signing on the socket in handle_event “show_modal” come from?
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance









