DanBunea

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

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.

Where Next?

Popular in Questions Top

qwerescape
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
lessless
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
johnnyicon
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
LegitStack
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
vonH
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
ashish173
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
nsuchy
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
Brian
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
jononomo
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
svb
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 Top

hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a &gt; b) do {:ok, "a"} end if (a &lt; b) do {:ok, b} end if (a == b) do {:ok, "equa...
New
AstonJ
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
Nvim
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help. Where are they similar? Where do they differ the m...
New
pmjoe
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
alice
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
sergio_101
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
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 54120 245
New
dogweather
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
jononomo
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
svb
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

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement