LiveSvelte.Test (LiveSvelte v0.18.0)

Copy Markdown View Source

Helpers for testing LiveSvelte components and views.

Use get_svelte/1 or get_svelte/2 to introspect rendered Svelte component roots (name, id, props, handlers, slots, ssr) from a LiveView or HTML string. Requires the lazy_html dependency in test (add {:lazy_html, ">= 0.1.0", only: :test} to mix.exs).

Examples

# From a LiveView, get first Svelte component
{:ok, view, _html} = live(conn, "/")
svelte = LiveSvelte.Test.get_svelte(view)

# Get by component name
svelte = LiveSvelte.Test.get_svelte(view, name: "MyComponent")

# Get by DOM id
svelte = LiveSvelte.Test.get_svelte(view, id: "MyComponent-1")

# From HTML string
svelte = LiveSvelte.Test.get_svelte(html, name: "Counter")

Summary

Functions

get_svelte(html_or_view, opts \\ [])

Extracts Svelte component information from a LiveView or HTML string.

Functions

get_svelte(html_or_view, opts \\ [])

Extracts Svelte component information from a LiveView or HTML string.

When multiple Svelte components are present, use the second argument with :name or :id to select one.

Returns a map with:

  • :name - Component name (from data-name)
  • :id - DOM id of the root element
  • :props - Decoded props (from data-props JSON)
  • :handlers - Event handlers (from data-handlers if present; currently %{} in LiveSvelte)
  • :slots - Map of slot name -> decoded HTML string (from data-slots base64 values)
  • :ssr - Whether SSR was used (from data-ssr)

Options

  • :name - Find component by name (data-name)
  • :id - Find component by id attribute

Examples

get_svelte(view)
get_svelte(view, name: "Counter")
get_svelte(html, id: "Counter-1")