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?

3 comments

/phoenix #mox #liveview #livecomponents #liveview-test

0 327 3

2024-02-02 14:12:28 UTC

First 3 of 3 Posts

mwhitworth

Perhaps GitHub - Serabe/live_isolated_component: Testing Live Components in isolation · GitHub might give you some more control for this Live Component test case?

Post #1

DanBunea

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.

Post #2

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.

Post #3

— All posts loaded —