View Source LiveIsolatedComponent (live_isolated_component v0.9.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
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.
Asserts the return value of a handle_event
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.
Updates the assigns of the component.
{:ok, view, _html} = live_isolated_component(SomeComponent, assigns: %{description: "blue"})
live_assign(view, %{description: "red"})
Updates the key in assigns of the component.
{:ok, view, _html} = live_isolated_component(SomeComponent, assigns: %{description: "blue"})
live_assign(view, :description, "red")
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 thehandle_event
callback in the LiveView.:handle_info
accepts a handler for thehandle_info
callback in the LiveView.:on_mount
accepts a list of either modules or tuples{Module, parameter}
. SeePhoenix.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()
- You can give an array of slots as the value in the map or the keywords.
- 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.
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.
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.
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:
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:
- The slot name. In this case,
:slot_name
. - The slot attributes. In this case,
attr_1={5} attr_2="hola" let={value}
. - 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
]
]