Testing LiveView with JS Commands

I’m having trouble figuring out how to test LiveViews that contain JS commands. Is this even possible? My mental model is a bit lacking here in terms of how browserless LiveView tests work. There doesn’t seem to be any mention of testing JS commands in the docs though would be happy to add them if I can figure this out.

My scenario:

def some_button(assigns) do
  ~H"""
  <a href="#"
    data-test-id="button"
    phx-click={Phoenix.LiveView.JS.add_class("some-class", to: "body")}>click me</a>
  """
end

…the test:

test "click it", %{conn: conn} do
  {:ok, view, _html} = live(conn, "/")

assert view
       |> element("[data-test-id=button]")
       |> render_click() =~ "resulting html"  # Right side of the assertion isn't important since it never makes it here
end

I get the following error: (ArgumentError) no push command found within JS commands

Any insight would be much appreciated!

1 Like

I just want to give this a bump I still can’t figure it out and it’s driving me a little nuts. Can anyone at least answer if writing LiveViewTests for LiveViews with JS commands in them is even possible? I can always use Wallaby but I’m trying to hold off on that until I get into heavier system tests.

TIA!

1 Like

My understanding is that, using the functions in Phoenix.LiveViewTest, you can only test the server-side part of the LiveView, i.e. the LiveView process. As far as I know, no JS client is started during the test, and this precludes testing of JS commands.

Awesome, thanks for your response! It’s what I figured I just couldn’t find anywhere that explicitly stated they wouldn’t work. I’ll see if I can update the docs in some way that makes sense.

1 Like

Hello, @sodapopcan! I am also facing the same issue.
I am using JS commands to hide and show my modal but not sure how to write the test for the same.
Can you please let me know if there is a way to test JS commands?

Thank You.

If you want to test actual JS interactions with an actual JS engine running, you have to use Wallaby.

You can, however, still test the functionality of whatever is in modals with LiveViewTest, just not whether they open or close. For example, if you have a modal with a form in it that is hidden by JS, it’s still in the DOM so you can still have a LiveViewTest fill it out and submit it (LiveViewTest doesn’t care if something is truly “visible” to the user or not). Then you can have a few Wallaby tests (which are much heavier to run) to ensure JS stuff is working.

2 Likes