View Source LiveIsolatedComponent (live_isolated_component v0.8.0)

Functions for testing LiveView stateful components in isolation easily.

Summary

Functions

Asserts that a given handle event has been received.

Asserts the return value of a handle_event

Asserts that a given handle_info event has been received.

Updates the assigns of the component.

Updates the key in assigns of the component.

Renders the given component in isolation and live so you can tested like you would test any LiveView.

Refutes that a given handle event has been received.

Asserts that a given handle_info event has not been received.

Macro to define slots. Accepts a map or keywords and a block. The block needs to return a template (use a sigil_H).

Functions

Link to this macro

assert_handle_event(view, event \\ nil, params \\ nil, timeout \\ 500)

View Source (macro)

Asserts that a given handle event has been received.

Depending on the number of parameters, different parts are checked:

  • With no parameters, just that a handle_event message has been received.
  • With one parameter, just the event name is checked.
  • With two parameters, both event name and the parameters are checked.
  • The optional last argument is the timeout, defaults to 500 milliseconds

If you just want to check the parameters without checking the event name, pass nil as the event name.

Link to this macro

assert_handle_event_return(view, return_value)

View Source (macro)

Asserts the return value of a handle_event

Link to this macro

assert_handle_info(view, event \\ nil, timeout \\ 500)

View Source (macro)

Asserts that a given handle_info event has been received.

If only the view is passed, only that a handle_info is received is checked. With an optional event name, we check that too. The third argument is an optional timeout, defaults to 500 milliseconds.

Link to this function

live_assign(view, keyword_or_map)

View Source

Updates the assigns of the component.

{:ok, view, _html} = live_isolated_component(SomeComponent, assigns: %{description: "blue"})

live_assign(view, %{description: "red"})
Link to this function

live_assign(view, key, value)

View Source

Updates the key in assigns of the component.

{:ok, view, _html} = live_isolated_component(SomeComponent, assigns: %{description: "blue"})

live_assign(view, :description, "red")
Link to this macro

live_isolated_component(component, opts \\ quote do %{} end)

View Source (macro)

Renders the given component in isolation and live so you can tested like you would test any LiveView.

It accepts the following options:

  • :assigns accepts a map of assigns for the component.
  • :handle_event accepts a handler for the handle_event callback in the LiveView.
  • :handle_info accepts a handler for the handle_info callback in the LiveView.
  • :on_mount accepts a list of either modules or tuples {Module, parameter}. See Phoenix.LiveView.on_mount/1 for more info on the parameters.
  • :slots accepts different slot descriptors.

More about slots

For defining slots, you need to use the slot/2 macro. If you just pass a slot to :slots, it will be taken as a default sot (@inner_block inside the component).

You can also pass a map or keywords to :slots. In this case, the key is considered to be the slot name and the value, the different slots. Remember that the default slot's name is inner_block.

For passing multiple slots for the same name, you have two options:any()

  1. You can give an array of slots as the value in the map or the keywords.
  2. You can pass the same name multiple times with different slots. This option is only available if you are using keywords, as this data structure preserves all values.
Link to this macro

refute_handle_event(view, event \\ nil, params \\ nil, timeout \\ 500)

View Source (macro)

Refutes that a given handle event has been received.

Depending on the number of parameters, different parts are checked:

  • With no parameters, just that a handle_event message has not been received.
  • With one parameter, just the event name is checked.
  • With two parameters, both event name and the parameters are checked.
  • The optional last argument is the timeout, defaults to 500 milliseconds

If you just want to check the parameters without checking the event name, pass nil as the event name.

Link to this macro

refute_handle_info(view, event \\ nil, timeout \\ 500)

View Source (macro)

Asserts that a given handle_info event has not been received.

If only the view is passed, only that a handle_info is not received is checked. With an optional event name, we check that too. The third argument is an optional timeout, defaults to 500 milliseconds.

Link to this macro

slot(args \\ quote do %{} end, list)

View Source (macro)

Macro to define slots. Accepts a map or keywords and a block. The block needs to return a template (use a sigil_H).

The arguments can be anything and they will be passed to the slot as attributes. There is only one special attribute that will not be passed though:

  1. let behaves like in components, letting the component pass some value into the slot.

Example

> slot(let: {key, value}) do
    ~H[
    <div>
      <h2>Title coming from assigns: <%= @title %></h2>
      <span>Key coming from let <%= key %></span>
      <span>Value coming from let<%= value %></span>
    </div>
    ]
  end

Conversion

In case you are wondering how to convert a slot in HEEX to the slot macro, let's do a simple conversion from a named slot with attributes:any()

<:slot_name attr_1={5} attr_2="hola" let={value}>
  <span>Received value from parent component is <%= value %></span>
</:slot_name>

For converting this, we notice three different parts:

  1. The slot name. In this case, :slot_name.
  2. The slot attributes. In this case, attr_1={5} attr_2="hola" let={value}.
  3. The slot content (or inner_block). In this case, the span.

Thus, we just need to pass to the slots options the following value (just showing the keyword options to live_isolated_component):

[
  slots: [
    slot_name: slot(attr_1: 5, attr_2: "hola", let: value) do
      ~H[<span>Received value from parent component is <%= value %></span>]
    end
  ]
]