michaelschiemer/docs/planning/LIVECOMPONENTS_TEST.md

🧪 LiveComponents Test Guide

Quick Test

1. Start Server:

   make up
   npm run dev
   

2. Open Test Page:

   https://localhost/test/livecomponents
   

3. Test Counter Component:

   • ✅ Click + Increment → Count increases
   • ✅ Click - Decrement → Count decreases
   • ✅ Click Reset → Count resets to 0
   • ✅ Enter 5 and click Add Amount → Count +5
   • ✅ Wait 10 seconds → Auto-update (polling)

What's Being Tested

✅ Core Features

• Action Handling - Button clicks execute component methods
• Form Submission - Forms with parameters work
• State Management - Component data persists and updates
• Polling - Auto-updates every 10 seconds
• DOM Updates - HTML re-renders on state change

✅ Framework Patterns

• Trait + Interface - No abstract classes
• Readonly Classes - Immutable components
• Value Objects - Type-safe data handling
• Dependency Injection - TemplateRenderer injection

✅ JavaScript

• Zero Dependencies - Pure Vanilla JS
• Auto-initialization - Finds components on page load
• Event Handling - Buttons, forms, polling
• Progress Tracking - Upload progress (ready for file uploads)

Test Files

src/
├── Application/
│   ├── Controllers/Test/
│   │   ├── LiveComponentTestController.php  ← Test Route
│   │   └── README.md                        ← Test Documentation
│   └── Components/
│       └── CounterComponent.php             ← Test Component
├── Framework/LiveComponents/
│   └── Templates/
│       └── counter.view.php                 ← Component Template
└── resources/views/test/
    └── livecomponents.view.php             ← Test Page

Browser Console Output

Expected console output:

LiveComponents Test Suite Loaded
Available: {
  liveComponents: LiveComponentManager,
  sseManager: SSEManager
}

Network Requests

Watch for:

POST /live-component/App\Application\Components\CounterComponent:demo

Request:
{
  "component_id": "App\\Application\\Components\\CounterComponent:demo",
  "method": "increment",
  "params": {},
  "state": { "count": 0 }
}

Response:
{
  "html": "<div>...</div>",
  "events": [],
  "state": "{\"id\":\"...\",\"component\":\"...\",\"data\":{\"count\":1}}"
}

Debugging

❌ Component not initializing?

// Check if LiveComponents loaded
console.log(window.liveComponents);

// Check component registered
console.log(window.liveComponents.components);

❌ Actions not working?

// Manual action call
window.liveComponents.callAction(
  'App\\Application\\Components\\CounterComponent:demo',
  'increment',
  {}
);

❌ Polling not working?

// Check polling interval
document.querySelector('[data-poll-interval]').dataset.pollInterval;

// Force poll
window.liveComponents.callAction('CounterComponent:demo', 'poll', {});

Next: Add Your Own Component

// 1. Create Component
final readonly class MyComponent implements LiveComponentContract
{
    use LiveComponentTrait;

    public function __construct(string $id, array $initialData = [], ?TemplateRenderer $templateRenderer = null) {
        $this->id = $id;
        $this->initialData = $initialData;
        $this->templateRenderer = $templateRenderer;
    }

    public function render(): string {
        return $this->template('Framework/LiveComponents/Templates/my-component', []);
    }

    public function myAction(): array {
        return ['updated' => true];
    }
}

// 2. Add to LiveComponentTestController
$myComponent = new MyComponent(
    id: ComponentRegistry::makeId(MyComponent::class, 'test')
);

// 3. Render in view
{!! myComponent.toHtml() !!}

Documentation

• 📚 Full docs: /docs/claude/livecomponents-system.md
• 📦 Module README: /src/Framework/LiveComponents/README.md
• 🧪 Test README: /src/Application/Controllers/Test/README.md