# `LiveVue.Test`
[🔗](https://github.com/Valian/live_vue/blob/v1.0.1/lib/live_vue/test.ex#L1)

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.

```elixir
# 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.

# `get_vue`

Extracts Vue component information from a LiveView or HTML string.

When multiple Vue components are present, you can specify which one to extract using
either the `:name` or `:id` option.

Returns a map containing the component's configuration:
  * `:component` - The Vue component name (from `v-component` attribute)
  * `:id` - The unique component identifier (auto-generated or explicitly set)
  * `:props` - The decoded props passed to the component
  * `:handlers` - Map of event handlers (`v-on:*`) and their operations
  * `:slots` - Base64 encoded slot content
  * `:ssr` - Boolean indicating if server-side rendering was performed
  * `:class` - CSS classes applied to the component root element
  * `:props_diff` - List of prop diffs
  * `:streams_diff` - List of stream diffs
  * `:doc` - Parsed HTML element of the component (as tree structure)

## Options
  * `:name` - Find component by name (from `v-component` attribute)
  * `:id` - Find component by ID

## Examples

    # From a LiveView, get first Vue component
    {:ok, view, _html} = live(conn, "/")
    vue = LiveVue.Test.get_vue(view)

    # Get specific component by name
    vue = LiveVue.Test.get_vue(view, name: "MyComponent")

    # Get specific component by ID
    vue = LiveVue.Test.get_vue(view, id: "my-component-1")

---

*Consult [api-reference.md](api-reference.md) for complete listing*