DanBunea
Mocking subcomponents used y a parent component in a LiveView test
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?
Most Liked
DanBunea
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
Popular in Questions
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
Hi all,
I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage.
I’m trying to use Postgres...
New
I’m trying to make a websocket server in Phoenix or raw Elixir. I heard about gun, I think I could use cowboy, but since I’m not that sma...
New
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
What is the proper way to load a module from a file in to IEX?
In the python world, doing something like this pretty standard:
from ....
New
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
Hi!
Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New
Other popular topics
lets say i have a sample like
a = 20; b = 10;
if (a > b) do
{:ok, "a"}
end
if (a < b) do
{:ok, b}
end
if (a == b) do
{:ok, "equa...
New
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help.
Where are they similar?
Where do they differ the m...
New
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
Hey,
Just curious what are the main benefits of Elixir compared to Clojure?
When is Elixir more useful than Clojure and vice versa?
Th...
New
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
New
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something…
Haskell reminds me of Java, and e...
New
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
Hi!
Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance









