markmark206

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

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

Where Next?

Popular in Questions Top

Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
logicmason
Hi there, I'm working through my first release with elixir/phoenix. I've built a release with distillery and found that it crashes when I...
New
sacepums
Hey guys. I'm new to elixir and im really stocked about it. But I ran into a bit of problem - I need to convert a date sting, for examp...
New
script
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this "1000" What is the ...
New
mgjohns61585
Could someone help me? I'm making my first elixir program, number guessing game. I can't figure out how to convert the user's guess from ...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
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
beno
I will often find my self writing things similar to: case some_value do nil -&gt; something() "" -&gt; something() _ -&gt; someth...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New

Other popular topics Top

Tee
can someone please explain to me how Enum.reduce works with maps
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: https://hexdocs.pm/ecto/Ecto.Schema.html#module-...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 45766 226
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
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
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
AstonJ
We’ve put together this wiki for Phoenix LiveView - please feel free to add any info you feel is worth including. What is Phoenix LiveV...
New

We're in Beta

About us Mission Statement