sodapopcan

sodapopcan

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!

Marked As Solved

trisolaran

trisolaran

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.

Also Liked

sodapopcan

sodapopcan

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.

sodapopcan

sodapopcan

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!

sodapopcan

sodapopcan

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.

Where Next?

Popular in Questions Top

chrisalley
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
myronmarston
The Elixir Typespec docs show the following syntax for keyword lists in typespecs: # ... | [key: type] # keyword lists...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: The documentation above suggests that while ...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
lucidguppy
I have a super simple question about elixir - how would I take a file like this foo bar baz and output a new file that enumerates th...
New
vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New

Other popular topics Top

senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
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
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 43757 214
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
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
vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
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

We're in Beta

About us Mission Statement