Use LiveViewTest to test if Phoenix generated checkbox is checked

Phoenix Forum Questions / Help
, , ,
1

I am experiencing an incredibly strange behavior while trying to use LiveViewTest module. The html capture doesn’t seem to capture the checked checkbox attribute and I can’t check whether the checkbox is checked or not.

I have a piece of code in my html.leex file which looks like this

<%= for {category, _color} <- @state.categories do %>
    <div class="form-check form-switch">
        <%= checkbox(:category, category, value: (if List.keymember?(@state.active_image.categories, category, 0), do: "true", else: "false"), class: "form-check-input", disabled: false) %>
        <%= label(:category, category, category, class: "form-check-label") %>
    </div>
<% end %>

When the code is rendered in browser, the checkboxes are checked as expected and the code looks like this:

<div class="form-check form-switch">
    <input name="category[scratch]" type="hidden" value="false">
    <input class="form-check-input" id="category_scratch" name="category[scratch]" type="checkbox" value="true" checked>
    <label class="form-check-label" for="category_scratch">scratch</label>
</div>

<div class="form-check form-switch">
    <input name="category[bump]" type="hidden" value="false">
    <input class="form-check-input" id="category_bump" name="category[bump]" type="checkbox" value="true">
    <label class="form-check-label" for="category_bump">bump</label>
</div>

Notice the checked value in the second input of the first div. That is the what actually controls the checkbox state, while the value attribute always seems to have value="true". This is confusing but seems to work in terms of rendering and interaction (correct stuff is sent to backend on click).

However, here comes the problem.
When I do

{:ok, _view, html} = live(conn, "/")

from LiveViewTest, the html doesn’t actually capture the checked attribute and I have no way of asserting that correct things are checked.

Has anyone come across something similar or has an idea how to do this properly?

2

What happens if you try something like this?

Use the view returned from live/2

assert view
       |> element("#category_scratch")
       |> render() =~ "checked"
3

This seems to work, thank you!
Would you mind explaining this a bit further, why is it not possible to do it over html it seems like it should have been possible?

In general what would be good practice in this case?

EDIT: It seems I have made a mistake and it wasn’t running correctly and was therefore passing.

It fails now and shows the same behaviour as html

 Assertion with =~ failed
     code:  assert view |> element("#category_scratch") |> render() =~ "checked"
     left:  "<input class=\"form-check-input\" id=\"category_scratch\" name=\"category[scratch]\" type=\"checkbox\" value=\"true\"/>"
     right: "checked"
4

This smells like a bug to me, can someone confirm this?