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

jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
nobody
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
New
jaysoifer
Is there a way to rollback a specific migration and only that one (“skipping” all the other ones)? Would mix ecto.rollback -v 200809061...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
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
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New

Other popular topics Top

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
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
AstonJ
Please see the new poll here: Which code editor or IDE do you use? (Poll) (2022 Edition) It’s been a while since we first asked this, I...
208 31142 143
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New

We're in Beta

About us Mission Statement