I have an input for my custom multi-select element that displays a div after the user types in some letters. The component dynamically fetches user entries from the DB that contain those letters inside a field and displays them all.
I’ve been trying to test this by checking for the ID of the div after the user types in but it’s not appearing.
The component is too big to post here, but here are some key parts:
The input and container:
<div phx-click-away="input_blur" phx-target={@myself}>
<.input
id={@id}
name={@search_name}
value={@search_value}
phx-change="input_change"
phx-target={@myself}
phx-focus="input_focus"
type="text"
/>
<div class="relative" phx-target={@myself}>
<div
:if={@can_select and length(@filtered_options) > 0 and @focused}
id={option_container_id(@id)}
class="bg-white absolute mt-2 rounded-md border border-zinc-300 divide-y divide-zinc-200 overflow-y-scroll max-h-[200px] w-full max-w-[100%] shadow-md"
>
<%= for %{id: option_id, label: label} <- @filtered_options do %>
<button
type="button"
class={[
"px-2 py-1 flex items-center justify-between gap-1 w-full",
Enum.member?(@selected, option_id) && "bg-zinc-100"
]}
phx-click="select"
phx-target={@myself}
phx-value-option={option_id}
>
<span class="text-sm"><%= label %></span>
<div
:if={Enum.member?(@selected, option_id)}
class="h-4 w-4 text-sm flex items-center justify-center"
>
✅
</div>
</button>
<% end %>
</div>
</div>
</div>
The instance I’m testing
<.live_component
module={MultiSelectComponent}
id="user-select"
name="users"
label="Users"
options={@user_options}
length_threshold={2}
on_input_change_info={:update_select_filter}
/>
The test that isn’t working:
test "creates a collab with members", %{conn: conn, user: user} do
collab_name = unique_collab_name()
email = "asdfghjklñ@rand.com"
member_user = user_fixture(%{email: email})
first_letters_of_member_user_email = member_user |> then(& &1.email) |> String.slice(0..3)
{:ok, lv, _html} = live(conn, ~p"/my-collabs/new")
multi_select_name = GdCollabManagerWeb.MultiSelectComponent.search_input_name("user-select")
IO.inspect(multi_select_name)
assert lv
|> form("#new-collab-form", %{
multi_select_name => first_letters_of_member_user_email
})
|> render_submit() =~ email
end
Let me know if you want to see any other parts of the code or have any questions that can help with this.
