Testing JS.show

Phoenix Forum Questions / Help
,
1

I have a button like this in my Liveview, and a corresponding modal defined with the CoreComponents.modal function:

<.button type="button" phx-click={show_modal("my_modal")}>
  Do it
</.button>

and I want to test that clicking the button actually shows the modal, and I want to be able to test interacting with stuff inside the modal as well. Perhaps I’m missing something, but it doesn’t seem possible at the moment?

Here’s what I’ve tried:

{:ok, lv, html} =
  lv 
  |> element("button", "Do it") 
  |> render_click()

But I get this error when I run my test:

** (ArgumentError) no push or navigation command found within JS commands: [["show",{"to":"#my_modal"}],["show",{"to":"#confirm_auto_assign_types-bg","transition":[["transition-all","transform","ease-out","duration-300"],["opacity-0"],["opacity-100"]]}],["show",{"to":"#my_modal-container","transition":[["transition-all","transform","ease-out","duration-300"],["opacity-0","translate-y-4","sm:translate-y-0","sm:scale-95"],["opacity-100","translate-y-0","sm:scale-100"]]}],["add_class",{"names":["overflow-hidden"],"to":"body"}],["focus_first",{"to":"#my_modal-content"}]]

Any ideas how I can go about testing my modal?

2

LiveViewTest can’t test JavaScript since it’s not interacting with an actual browser, or even a browser driver for that matter. When it comes to JS commands, JS.push and JS.navigate work (I’ve never actually looked into the trickery there but that’s what your error is about) but otherwise JS commands are running via raw JavaScript. To test them properly you need to use Wallaby for true end-to-end tests. It’s much heavier than LiveViewTest, of course.

However, assuming that for the closed state of your modal it’s rendered in the DOM and just hidden, you can still test the interactivity with LiveViewTest since it knows nothing about CSS and therefore doesn’t care that its hidden. So if you’re ok just testing the presence of an open button you can get away with just using LiveViewTest.

Sorry if I’m not super clear here, I’m crazy tired today and procrastinating on Elixir Forums a little too much :slight_smile:

2 Likes