We are trying to properly test components in isolation, even when used in hierarchies. A component using a subcomponent is like a impure function using another function as a side effect, so we’d like to write tests for the subcomponent and for the parent component in isolation, mocking somehow the subcomponent, just checking the passage of the right parameters.
If the component is:
defmodule SelectEstablishmentIdComponent do
use Phoenix.LiveComponent
import Web.Gettext
@sub_component_module Application.compile_env(:raging_bull,:typeahead_select)
def sub_component_module(), do: @sub_component_module
def render(assigns) do
~H"""
<div>
<.live_component module={sub_component_module()} id="select_establishment_id" on_select= {:SELECT_ESTABLISHMENT_ID} ></.live_component>
</div>
"""
end
end
for it I want to write a test such as:
defmodule SelectEstablishmentIdComponentTest do
use ExUnit.Case, async: true
use Phoenix.Component
import Mox
import Phoenix.LiveViewTest
alias SelectEstablishmentIdComponent
alias Components.TypeaheadSelectMock
describe "SelectEstablishmentIdComponent should" do
test "render the label and the type ahead to select the establishment id" do
Components.TypeaheadSelectMock
|> expect(:render, fn actual_assigns ->
assert actual_assigns == ...
end)
{:ok, document} =
render_component(fn _assigns ->
assigns = %{}
~H"<SelectEstablishmentIdComponent.render {assigns}/>"
end)
|> Floki.parse_document()
#...checks in the document
end
end
end
Any clues how we could do it?
Thanks for the answer. The thing is that I want to separate the parent from the child, not test the parent in separation, including the child, which seems what happens with this library.
Eventually we made it , I am not very happy with the final result but this is what we have so far. We introduced an intermediary:
defmodule ComponentRendererBehaviour do
@callback render_component(atom() | map()) :: Phoenix.LiveView.Component.t()
end
defmodule ComponentRenderer do
@behaviour ComponentRendererBehaviour
alias Phoenix.LiveView.Helpers
@spec render_component(atom() | map()) :: Phoenix.LiveView.Component.t()
def render_component(assigns) when is_map(assigns) do
Helpers.live_component(assigns)
end
def render_component(component) when is_atom(component) do
Helpers.live_component(component)
end
end
which gets used:
def render_child(assigns) do
@renderer.render_component(assigns)
end
def render(assigns) do
~H"""
<div>
<label for="select_establishment_id_query" ><%= gettext("Establishment") %></label>
<.render_child
module={TypeaheadSelect}
id="select_establishment_id"
options= {[]}
selected= {[]}
on_select= {:SELECT_ESTABLISHMENT_ID} >
</.render_child>
</div>
"""
end
and the test looks like:
test "render the label and the type ahead to select the establishment id" do
SubComponentTestHelper.expect_sub_component(%{
module: TypeaheadSelect,
id: "select_establishment_id",
options: [],
selected: [],
on_select: :SELECT_ESTABLISHMENT_ID
})
{:ok, document} =
render_component(fn _assigns ->
assigns = %{}
~H"<SelectEstablishmentIdComponent.render {assigns}/>"
end)
|> Floki.parse_document()
# ...checks
document |> IO.inspect(label: 234)
end
end
and we have a helper:
def expect_sub_component(expected_assigns) do
RagingBullWeb.Components.ComponentRendererMock
|> expect(:render_component, fn used_assigns ->
actual_assigns = used_assigns
|> Map.drop([:__changed__, :inner_block])
assert actual_assigns == expected_assigns
%Phoenix.LiveView.Rendered{
static: ["<#{actual_assigns.module}/>"],
dynamic: fn _track_changes? -> [] end
}
end)
end
This is the very first attempt, so I expect to be able to improve it.
1 Like