Pham-Tan-Thien
2045c856e9
- Add 10 core testing guides (setup, AAA principles, PHPUnit/Pest, mocking, anti-patterns, PHP 8.4+, debugging, data factories, advanced edge cases) - Add 13 component testing guides covering all Laravel layers - Add standard templates for PHPUnit 10/11 and Pest v2/v3 including ArchitectureTest - Add Docker smart test runner, dependency installer, and CI/CD templates (GitHub Actions, GitLab CI) - Add 4 Claude Code skills (laravel-test-setup, laravel-unit-test with --all mode, laravel-test-review, laravel-mock-helper) - Add single unified installer script (sg-install-unit-testing.sh) with global support, CLI runners, and 1-click updater (sg-test-update) - Add comprehensive documentation (README.md, USAGE-GUIDE.md) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
87 lines
2.6 KiB
Markdown
87 lines
2.6 KiB
Markdown
# Component Guide: Blade View Components
|
|
|
|
Blade View Components cho phép tái sử dụng giao diện UI kèm theo logic tính toán PHP đóng gói bên trong class component.
|
|
|
|
---
|
|
|
|
## 1. Bản Chất Kiểm Thử View Component
|
|
|
|
Laravel cung cấp helper `$this->component(MyComponent::class, $data)` để render component ra chuỗi HTML trực tiếp trong môi trường test mà không cần khởi động trình duyệt.
|
|
|
|
- **Cần test**:
|
|
- Class constructor gán đúng thuộc tính (Props).
|
|
- Thuộc tính mặc định khi không truyền vào.
|
|
- Các method helper của Component tính toán đúng CSS class hoặc style.
|
|
- HTML được render ra có chứa đúng nội dung, text, slot hoặc icon.
|
|
|
|
---
|
|
|
|
## 2. Mã Mẫu Chuẩn: View Component Test
|
|
|
|
### Component Nguồn: `App\View\Components\Alert`
|
|
```php
|
|
namespace App\View\Components;
|
|
|
|
use Illuminate\View\Component;
|
|
use Illuminate\View\View;
|
|
|
|
class Alert extends Component
|
|
{
|
|
public function __construct(
|
|
public readonly string $type = 'info',
|
|
public readonly ?string $title = null
|
|
) {}
|
|
|
|
public function alertClass(): string
|
|
{
|
|
return match ($this->type) {
|
|
'success' => 'bg-green-100 text-green-800 border-green-300',
|
|
'error' => 'bg-red-100 text-red-800 border-red-300',
|
|
default => 'bg-blue-100 text-blue-800 border-blue-300',
|
|
};
|
|
}
|
|
|
|
public function render(): View
|
|
{
|
|
return view('components.alert');
|
|
}
|
|
}
|
|
```
|
|
|
|
### Test Chuẩn: PHPUnit 10+
|
|
```php
|
|
namespace Tests\Unit\View\Components;
|
|
|
|
use Tests\TestCase;
|
|
use PHPUnit\Framework\Attributes\Test;
|
|
use App\View\Components\Alert;
|
|
|
|
class AlertTest extends TestCase
|
|
{
|
|
#[Test]
|
|
public function it_calculates_correct_css_class_based_on_type(): void
|
|
{
|
|
$infoAlert = new Alert(type: 'info');
|
|
$this->assertStringContainsString('bg-blue-100', $infoAlert->alertClass());
|
|
|
|
$successAlert = new Alert(type: 'success');
|
|
$this->assertStringContainsString('bg-green-100', $successAlert->alertClass());
|
|
|
|
$errorAlert = new Alert(type: 'error');
|
|
$this->assertStringContainsString('bg-red-100', $errorAlert->alertClass());
|
|
}
|
|
|
|
#[Test]
|
|
public function it_renders_component_with_slot_content(): void
|
|
{
|
|
$view = $this->blade(
|
|
'<x-alert type="success" title="Thành công!">Nội dung thông báo lưu thành công.</x-alert>'
|
|
);
|
|
|
|
$view->assertSee('Thành công!');
|
|
$view->assertSee('Nội dung thông báo lưu thành công.');
|
|
$view->assertSee('bg-green-100');
|
|
}
|
|
}
|
|
```
|