markmark206
Test: send a click to a DOM element without `phx-click`, evaluate html?
tl;dr: Can my test send a click to a DOM element that doesn’t have any phx-* bindings, and then evaluate the resulting HTML?
One of my Phoenix.LiveComponent components render()s HEEX that includes a UI element for the user to click on.
def render(assigns) do
~H"""
<div>
<button
id="flowbiteDropdownButtonID"
data-dropdown-toggle="flowbiteDropdownButton"
data-dropdown-placement="bottom"
class="..."
type="button"
>
My Settings
</button>
<!-- Dropdown menu -->
<div id="flowbiteDropdownButton" class="...">
<ul class="..." aria-labelledby="flowbiteDropdownButtonID">
<li class="m-3">
...
"""
end
As you might have deduced from this code fragment, the clickable UI element in question is a flowbite Dropdown component, and, while it lives inside of a Phoenix.LiveComponent living inside of a Phoenix.LiveView, it does not have any phx- bindings of its own. When the user clicks on the UI element, the flowbite component['s javascript] creates a dropdown menu, and everything works fine.
Now I am writing tests, and I want my test code to click on that flowbite Dropdown UI element, and to look at the resulting drop down menu.
The usual liveview render_click() approach does not work, of course, because the flowbite Dropdown element I am trying to click on is not a liveview component, and it does not have a phx-click binding:
{:ok, view, _html} =
conn
|> live(~p"/")
html =
view
|> element(~s{[id="flowbiteDropdownButtonID"]})
|> render_click() # lol nice try, mark
# html =
# view
# |> render_click_2(view, "flowbiteDropdownButtonID") # i can has?
# assert html =~ "dropdown menu option 1"
# assert html =~ "dropdown menu option 2"
Which brings me to my question: is there a way to send a click event to this flowbite component (which would execute a bit of [flowbite] javascript, which I think will alter the DOM), and examine the re-rendered html, without adding things like Wallaby to the mix?
I am pretty sure the answer is “no”, but I thought I’d double-check. ; )
Thank you!
Most Liked
jswanner
If you need JavaScript to run in your test then you need to use a browser to drive your tests, such as using Wallaby.
If the form exists in the DOM then you might be able to use Phoenix.LiveViewTest.form/3
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








