Hello,
I’m developing an application using LiveView and as a way to update
the status of inner LiveComponents I started using send_update
the
same way it was pioneered by surface here:
http://surface-demo.msaraiva.io/state_management but without the
“reactivesque” bits.
Now i want to test the components (together with one of the views that
uses them) but I’m facing some issues because of how the send_update
works. For example, when I delete an item from a list I want to show a
confirmation dialog to the user, which means really to switch the CSS
class of a “dialog” HTML fragment. Here is how the the Dialog
component is used in the parent LiveView:
<%= live_component @socket, Journey.Manage.Components.Dialog,
id: "delete-confirm" do %>
<%= gettext("Are you sure you want to delete this item?") %>
<% end %>
then, when the delete button is clicked, the event event handler on
parent view shows the dialog like this:
def handle_event("item-delete-pre", %{"id" => rec_id},
%{assigns: %{live_action: :index}} = socket) do
Dialog.show("delete-confirm",
actions: [yes: gettext("yes"), no: gettext("no")])
{:noreply, assign(socket, ask_confirm_id: rec_id)}
end
Then the execution of the Dialog.show()
functions runs a send_update()
that internally uses a send()
to do the perform the update
asynchronously.
And this asynchronicity is the source of the problem… i think. The
test creates the view and sends the event to the main LiveView:
{:ok, view, html} = live(conn, "/region")
assert html =~ ~r/<div class="modal.*hidden"/
assert render_click(view, "item-delete-pre",
%{"id" => "A"}) =~ ~r/<div class="modal.*shown"/
… but the check fails because the update is not there yet!
Any idea of something (a workaround) to make it testable? Or am I not
seeing a solution that is there already?