# How do I write tests for dropdowns?

**URL:** <https://forum.elixirforum.com/t/how-do-i-write-tests-for-dropdowns/35153>\
**Category:** Questions\
**Tags:** phoenix, testing, liveview\
**Created:** [October 27, 2020, 6:37am UTC](https://forum.elixirforum.com/t/how-do-i-write-tests-for-dropdowns/35153 "2020-10-27T06:37:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nittin](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/nittin/32/24342_2.png) [@nittin](https://forum.elixirforum.com/u/nittin)\
**Post date:** [October 27, 2020, 6:37am UTC](https://forum.elixirforum.com/t/how-do-i-write-tests-for-dropdowns/35153/1 "2020-10-27T06:37:50Z")

</div>

I have a use case scenario where I need to update my user after a click event from option tag like below!

 ![Screenshot 2020-10-27 at 12.03.08 PM](https://forum.elixirforum.com/uploads/default/original/3X/4/a/4a5172f13a6978fda8cc83eab92dcbf876979d0f.png)

What I’m doing is that I have a click event in each of the options and when there is a click, the user’a role is updated. While it’s easy to code something like this, how do I write live view tests for this?

---

<div class="post-metadata">

**Author:** ![dfalling](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/d/e5b9ba/32.png) [@dfalling](https://forum.elixirforum.com/u/dfalling)\
**Post date:** [February 18, 2023, 12:44pm UTC](https://forum.elixirforum.com/t/how-do-i-write-tests-for-dropdowns/35153/2 "2023-02-18T12:44:53Z")

</div>

Hi, super late response here but I was looking for the same thing and this was the first post that came up. In my case it wasn’t even Javascript- I just wanted to test contents inside a `<details>` tag.

So this kind of thing can’t be tested in Phoenix (see [Testing LiveView with JS Commands - #2 by sodapopcan](https://forum.elixirforum.com/t/testing-liveview-with-js-commands/44892/2)). All of the helpers (eg `render_click`) are triggering server-side changes in Liveview. If your change requires some client-side handling, it can’t be tested.

---

<div class="post-metadata">

**Author:** ![codeanpeace](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/codeanpeace/32/10278_2.png) [@codeanpeace](https://forum.elixirforum.com/u/codeanpeace)\
**Post date:** [February 18, 2023, 9:40pm UTC](https://forum.elixirforum.com/t/how-do-i-write-tests-for-dropdowns/35153/3 "2023-02-18T21:40:10Z")

</div>

Just a caveat, while this kind of thing can’t be tested directly with `Phoenix.LiveViewTest`, you can still test client side interactions in Phoenix with integration testing and browser automation libraries such as [Wallaby](https://github.com/elixir-wallaby/wallaby) and [Hound](https://github.com/HashNuke/hound).

---

<div class="post-metadata">

**Author:** ![nittin](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/nittin/32/24342_2.png) [@nittin](https://forum.elixirforum.com/u/nittin)\
**Post date:** [March 17, 2023, 3:53am UTC](https://forum.elixirforum.com/t/how-do-i-write-tests-for-dropdowns/35153/4 "2023-03-17T03:53:14Z")

</div>

Thank you so much for the responses @codeanpeace and @dfalling

---

<div class="post-metadata">

**Author:** ![trisolaran](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/trisolaran/32/23748_2.png) [@trisolaran](https://forum.elixirforum.com/u/trisolaran)\
**Post date:** [March 17, 2023, 8:16am UTC](https://forum.elixirforum.com/t/how-do-i-write-tests-for-dropdowns/35153/5 "2023-03-17T08:16:58Z")

</div>

Some time ago I discovered that some support for JS commands has been around for a while now. You can test push events in your JS commands. So this kind of tests works:

_heex:_

```html
<div :if={@clicked}>Clicked!</div>
<button id="clickez-moi" phx-click={JS.push("clicked")} class="btn">Test</button>

```

_live view:_

```elixir
def handle_event(
        "clicked",
        _,
        socket
      ) do
    {:noreply, assign(socket, clicked: true)}
end

```

_test:_

```elixir
test "test js command", %{view: view} do
      element(view, "#clickez-moi")
      |> render_click()

      assert has_element?(view, "div", "Clicked!")
end

```

You can’t test other commands that purely operate on the DOM on the client side this way (such as `add_class`) but you can test events sent to the server. This is very nice!