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!
