michaelschiemer/LIVECOMPONENTS_TEST.md

# 🧪 LiveComponents Test Guide

## Quick Test

1. **Start Server**:
   ```bash
   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:
```javascript
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?
```javascript
// Check if LiveComponents loaded
console.log(window.liveComponents);

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

### ❌ Actions not working?
```javascript
// Manual action call
window.liveComponents.callAction(
  'App\\Application\\Components\\CounterComponent:demo',
  'increment',
  {}
);
```

### ❌ Polling not working?
```javascript
// Check polling interval
document.querySelector('[data-poll-interval]').dataset.pollInterval;

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

## Next: Add Your Own Component

```php
// 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`