Helpers for testing LiveVue components and views.

Overview

LiveVue testing differs from traditional Phoenix LiveView testing in how components are rendered and inspected:

• In Phoenix LiveView testing, you use Phoenix.LiveViewTest.render_component/2 to get the final rendered HTML
• In LiveVue testing, render_component/2 returns an unrendered LiveVue root element containing the Vue component's configuration

This module provides helpers to extract and inspect Vue component data from the LiveVue root element, including:

• Component name and ID
• Props passed to the component
• Event handlers and their operations
• Server-side rendering (SSR) status
• Slot content
• CSS classes

Examples

# Render a LiveVue component and inspect its properties
{:ok, view, _html} = live(conn, "/")
vue = LiveVue.Test.get_vue(view)

# Basic component info
assert vue.component == "MyComponent"
assert vue.props["title"] == "Hello"

# Event handlers
assert vue.handlers["click"] == JS.push("click")

# SSR status and styling
assert vue.ssr == true
assert vue.class == "my-custom-class"

Configuration

enable_props_diff

When set to false in your config, LiveVue will always send full props and not send diffs. This is useful for testing scenarios where you need to inspect the complete props state rather than just the changes.

# config/test.exs
config :live_vue,
  enable_props_diff: false

When disabled, the props field returned by get_vue/2 will always contain the complete props state, making it easier to write comprehensive tests that verify the full component state rather than just the incremental changes.