amaterasu
I need to test that I can create a post having one category (chosen from an async loaded list) on my admin site.
I have a LiveComponent for a select which uses Tom Select JS with a phx-hook like this:
~H"""
<.field_wrapper errors={@errors} name={@name} class={@wrapper_class}>
<div
id={"#{@id}"}
phx-hook="ComboBox"
>
<div id={"#{@id}_wrapper"} phx-update="ignore">
<.field_label required={@required} for={@id} class={@label_class}>
<%= @label %>
</.field_label>
<div class="combo-box-wrapper">
<select
class={["combo-box", @class]}
multiple={@multiple}
name={@name}
required={@required}
{@rest}
>
<option :for={{value, label} <- @value} selected value={value}><%= label %></option>
</select>
</div>
</div>
</div>
</.field_wrapper>
Here’s the JS Hook:
Hooks.ComboBox = {
mounted() {
this.init(this.el)
},
init: async function (el) {
const settings = {
preload: 'focus',
load: (query, callback) => {
const params = {query: query}
this.pushEventTo(el, 'fetch_association', params, (data) => callback(data.results))
}
}
new TomSelect(el.querySelector('select.combo-box'), settings)
},
}
The <option>s for the <select> are loaded when the input is focused.
Before focusing, the select only has the options which are already associated to the post (which are empty in tests).
My test:
@create_attrs %{
category_id: "123",
title: "some title"
}
...
test "saves new post", %{conn: conn} do
{:ok, view, _html} = live(conn, ~p"/posts/new")
assert view
|> form("#post-form", post: @create_attrs)
|> render_submit()
assert_patch(view, ~p"/posts")
end
I’m getting this error:
value for select "post[category_id]" must be one of [], got: "123"
I’m guessing that this is because the <option> list is empty and Phoenix checks for a list of possible values?
How can I test this since the <option>s are filled by the JS hook? I see that render_hook exists, but of course it doesn’t run the JS part.
I guess I can also avoid testing the JS hook itself by injecting a list of <option>s for this test’s purpose, but I’m not sure how.
Thank you!
Trending in Questions
Other Trending Topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming










Most Liked- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
trisolaran
That’s right.
form/3mimics what the user is supposed to be able to do on the form, so you can’t select an option that doesn’t exist yet.However, you can easily sidestep this limitation by passing some values in
render_submit/2directly.arcanemachine
I believe you would need to use something like Playwright to test the JS. But your code shouldn’t be getting that error IMO. The Elixir side of the code should be picking up your
category_idsince it doesn’t really care about the JS implementation.It looks like the error is suggesting that the
category_idfield expects a list[], which is strange. Did you create thecategory_idfield as an:arrayin your migration? I believe that a foreign key should be represented like this in your migration:add :category_id, references(:categories, on_delete: :delete_all), null: falseIf you don’t have this, you could create a new migration, or just edit the existing migration and run
mix ecto.reset(which will completely reset the database for the project, be ye warned).sodapopcan
Ah sorry, your initial error confused me as I read it as you were getting a type-mismatch. I did some tests but not with an empty
<select>because I thought it was getting some default values, even though you clearly said it was the JS that populates it. D’oh.I knew you could pass form data to it but never knew that’s why. TIL!