Test: send a click to a DOM element without `phx-click`, evaluate html?

Questions / Help
, , , , ,
1

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!

1 Like