Testing LiveView that uses `send_update`


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
    actions: [yes: gettext("yes"), no: gettext("no")])
  {:noreply, assign(socket, ask_confirm_id: rec_id)}

Then the execution of the Dialog.show() functions runs a send_update()
that internally uses a send() to do the perform the update

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?

1 Like

Calling render after your click should be all you need :slight_smile:

{:ok, view, html} = live(conn, "/region")

assert html =~ ~r/<div class="modal.*hidden"/
render_click(view, "item-delete-pre", %{"id" => "A"})
assert render(view) =~ ~r/<div class="modal.*shown"/

Indeed it works, Thanks Chris