Testing a live_component click event inside a live_view that uses send(self())

Phoenix Forum Questions / Help
, ,
1

I have a problem testing my LiveView that is similar to this post, except that I’m not broadcasting messages via PubSub. In my case, I have a :live_component that renders a button and handles the phx-click event. The handle_event looks like this:

  def handle_event("next-step", _params, socket) do
    IO.puts("clicked next")
    send(self(), {__MODULE__, :go_to_step, 1})
    {:noreply, socket}
  end

the handle_info(:go_to_step, 1) is defined in the parent :live_view of the live component:

  def handle_info({_component, :go_to_step, step_index}, socket) do
    IO.puts("handle go_to_step")
    socket = socket
    |> assign(:current_step, Enum.at(socket.assigns.wizard.steps, step_index))
    {:noreply, socket}
  end

I want to test that clicking the button renders the next step. the IO.puts show my test is properly clicking the button and the handle_info function is reached, so the send() is being received (also the feature works in the browser). However my test assertion fails because the view still shows the original :live_component content and not the one that should be rendered after handle_info finishes. The LiveViewTest:

describe "starts first step" do
  test "clicking Begin button goes to first step", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/wizard")
    assert view
      |> element("button", "Begin")
      |> render_click() =~ "<h1>The Aim</h1>"
  end
end

Any idea how I can get the test process to assert the rendered state at the end of that handle_info()?

2

Given you send a message to yourself during the event handler, the result of “that” render doesn’t change, as you’ve observed, you can always request a render from the view in tests with render(view), which in this case is probably the go.

There is a chance of a race condition in such a rest (click → render then requiring a sleep) but I don’t think in this case it will cause an issue, as the view should process the handle_event message, then the handle_info message, before being free to handle any others (and I believe render(view) requires a message on the view).

2 Likes
3

That fixed it, and the test is pretty simple still. Thanks again for the help!

  test "clicking Begin button goes to the first step", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/wizard")
    view
    |> element("button", "Begin")
    |> render_click()
    assert render(view) =~ "<h1>First Step</h1>"
  end
1 Like