Using render_change for testing input element changes - is this the correct way?

byoungdale

I am trying to write a test for a phx-change event I have on a input element inside a form. The phx-change happens only on the input element, not a change on the form.

 <%= url_input f, :url, phx_debounce: "2000", phx_change: "validate_url" %>

Everything works functionally, but I wrote this test for the element:

  test "successful URLs", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/submit")

    assert view
           |> element("#submit-item-form_url")
           |> render_change(:validate_url, %{url: "https://elixir-lang.org/learning.html"}) =~
             "value=\"Learning resources - The Elixir programming language\""

But, when I run the test, I get this error:

  1) test successful URLs (CommunWeb.Live.SubmitItemLiveTest)
     test/commun_web/live/submit_item_live_test.exs:15
     ** (FunctionClauseError) no function clause matching in Phoenix.LiveViewTest.render_event/4

     The following arguments were given to Phoenix.LiveViewTest.render_event/4:
     
         # 1
         #Phoenix.LiveViewTest.Element<selector: "#submit-item-form_url", text_filter: nil, ...>
     
         # 2
         :change
     
         # 3
         :validate_url
     
         # 4
         %{url: "https://elixir-lang.org/learning.html"}
     
     Attempted function clauses (showing 1 out of 1):
     
         defp render_event(%Phoenix.LiveViewTest.View{} = view, type, event, value) when is_map(value) or is_list(value)
     
     code: |> render_change(:validate_url, %{url: "https://elixir-lang.org/learning.html"}) =~
     stacktrace:
       (phoenix_live_view 0.17.10) lib/phoenix_live_view/test/live_view_test.ex:887: Phoenix.LiveViewTest.render_event/4
       test/commun_web/live/submit_item_live_test.exs:20: (test)

It is complaining that the private function render_event is expecting a %Phoenix.LiveViewTest.View{} type, but the render_change function expects an Phoenix.LiveViewTest.Element type, which is what i am passing.

I think I am missing something or is this not the correct way to test a render_change event on an input element?

3 comments

/phoenix #liveview #liveview-test

1 2111 3

2022-07-29 14:07:32 UTC

Showing Posts 1 to 3

Show Best Posts
Show All (oldest first)
Show All (newest first)

byoungdale

I think the issue is that when a Element is passed to render_change, it does not allow for a customer event to be passed:

  def render_change(%Element{} = element, value), do: render_event(element, :change, value)

for reference see source code here

So, when I change my test to this:

    assert view
           |> element("#submit-item-form_url")
           |> render_change(%{url: "https://elixir-lang.org/learning.html"}) =~
             "value=\"Learning resources - The Elixir programming language\""

My input’s phx-change event validate_url doesn’t get triggered. Just a generic :change event which means my view doesn’t get the url input added to it.

I think adding another match like this would work:

def render_change(%Element{} = element, event, value), do: render_event(element, event, value)

Post #1

mcrumm

Phoenix Core Team

Try including the _target: when you invoke render_change:

assert view
       |> element("#submit-item-form_url")
       |> render_change(%{url: "https://elixir-lang.org/learning.html"}, _target: "#submit-item-form_url") =~
             "value=\"Learning resources - The Elixir programming language\""

Here’s an example from the LiveView tests:

https://github.com/phoenixframework/phoenix_live_view/blob/05bcd95fd40afc10a6b39f1c7ce9986495b21d5d/test/phoenix_live_view/integrations/elements_test.exs#L396-L399

We might be able to pick up the phx-change attribute from the input element automatically (avoiding the need to set _target manually) if someone wanted to PR that

Post #2

byoungdale

Thank you. The solution was actually not adding the target. The issue was passing in a map instead of a key: map which is what my liveview event handler was expecting.

Here is what ended up working:

assert view
       |> element("#submit-item-form_url")
       |> render_change(item: %{url: "https://elixir-lang.org/learning.html"}) =~
             "value=\"Learning resources - The Elixir programming language\""

So, I had two problems. First, I was manually passing in the render_change event name when I did not need to, which caused the render_event pattern matching to fail in live_view_test.ex, and then without manually passing in the event name, I was not passing the value correctly for my handle_event function.

I only caught that because of the example you posted. Thank you for your help!

Post #3

— All posts loaded —