# LiveComponents Test Suite

## Quick Start

1. **Stelle sicher, dass die Server laufen**:
   ```bash
   make up
   npm run dev
   ```

2. **Öffne die Test-Seite**:
   ```
   https://localhost/test/livecomponents
   ```

3. **Teste die Features**:
   - ✅ Click Actions (Increment/Decrement/Reset)
   - ✅ Form Submission (Add Amount)
   - ✅ Polling (Watch for auto-updates every 10s)
   - ✅ State Management (Count + Last Update)

## Test Component: CounterComponent

### Location
- **Controller**: `src/Application/Controllers/Test/LiveComponentTestController.php`
- **Component**: `src/Application/Components/CounterComponent.php`
- **Template**: `src/Framework/LiveComponents/Templates/counter.view.php`
- **View**: `resources/views/test/livecomponents.view.php`

### Features Tested

1. **Basic Actions**:
   - `increment()` - Increment counter by 1
   - `decrement()` - Decrement counter by 1 (min: 0)
   - `reset()` - Reset counter to 0

2. **Parameter Actions**:
   - `addAmount(int $amount)` - Add custom amount

3. **Polling**:
   - Auto-updates every 10 seconds
   - Updates timestamp on each poll

4. **State Management**:
   - `count` - Current counter value
   - `last_update` - Last update timestamp
   - `server_time` - Server timestamp (polling only)

### Code Example

```php
// In Controller
$counter = new CounterComponent(
    id: ComponentRegistry::makeId(CounterComponent::class, 'demo'),
    initialData: ['count' => 0]
);

return new ViewResult('test/livecomponents', [
    'counter' => $counter
]);
```

```html
<!-- In Template -->
{!! counter.toHtml() !!}
```

## Debugging

### Browser Console

Open Developer Console (F12) to see:
- Component initialization
- Action execution
- Polling activity
- State updates

### Network Tab

Monitor these requests:
- `POST /live-component/App\Application\Components\CounterComponent:demo`
  - Request Body: `{ component_id, method, params, state }`
  - Response: `{ html, events, state }`

### JavaScript API

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

// Stop polling
window.liveComponents.stopPolling('App\\Application\\Components\\CounterComponent:demo');

// Start polling
window.liveComponents.startPolling('App\\Application\\Components\\CounterComponent:demo', 10000);
```

## Adding More Test Components

1. **Create Component Class**:
   ```php
   namespace App\Application\Components;

   final readonly class MyTestComponent 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-test', [
               'data' => $this->initialData
           ]);
       }

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

2. **Create Template**:
   ```html
   <!-- src/Framework/LiveComponents/Templates/my-test.view.php -->
   <div>
       <button data-live-action="myAction">Test Action</button>
   </div>
   ```

3. **Add to Test Controller**:
   ```php
   $myTest = new MyTestComponent(
       id: ComponentRegistry::makeId(MyTestComponent::class, 'test'),
       initialData: []
   );
   ```

4. **Render in View**:
   ```html
   {!! myTest.toHtml() !!}
   ```

## Troubleshooting

### Component not initializing
- ✅ Check JavaScript is loaded: `/js/live-components.js`
- ✅ Check browser console for errors
- ✅ Verify `data-live-component` attribute exists

### Actions not working
- ✅ Check method exists in component class
- ✅ Check `data-live-action` attribute
- ✅ Monitor Network tab for failed requests

### Polling not working
- ✅ Component must implement `Pollable` interface
- ✅ Check `data-poll-interval` attribute
- ✅ Verify `getPollInterval()` returns milliseconds

### Template not rendering
- ✅ Verify template path in `render()` method
- ✅ Check template exists in `src/Framework/LiveComponents/Templates/`
- ✅ Ensure TemplateRenderer is injected

## Next Steps

1. **Test File Upload**:
   - Create `FileUploadTestComponent implements Uploadable`
   - Test upload progress tracking
   - Validate file size/type with `Byte` VO

2. **Test SSE Integration**:
   - Create SSE endpoint for component stream
   - Connect via `window.sseManager.connect()`
   - Test real-time updates

3. **Test Nested Components**:
   - Create parent-child component structure
   - Test inter-component communication
   - Event dispatching between components
