azazel75

azazel75

Testing LiveView that uses `send_update`

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:
Surface 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?

Marked As Solved

chrismccord

chrismccord

Creator of Phoenix

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"/

Where Next?

Popular in Questions Top

nobody
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
New
Tee
can someone please explain to me how Enum.reduce works with maps
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
srinivasu
How to handle excepions in elixir? Suppose i have A, B, C ,D, E modules. and each module has get() function. A.get() method will call t...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
dotdotdotPaul
Okay, I’m having a heck of a time trying to figure out how to best handle the validation of belongs_to associations in Ecto. I’m sure I’...
New
jaysoifer
Is there a way to rollback a specific migration and only that one (“skipping” all the other ones)? Would mix ecto.rollback -v 200809061...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New

Other popular topics Top

siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
Lily
In templates/appointment/index.html.eex: &lt;%= for appointment &lt;- @appointments do %&gt; &lt;tr&gt; &lt;td&gt;&lt;%= appoi...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 52774 488
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

We're in Beta

About us Mission Statement