Component Test Planner

---
name: component-test-planner
description: 指定されたコンポーネントのテストを設計する。
---

# Test Planner

コンポーネントのテスト戦略を設計。インタラクション、アクセシビリティ、VRTの3種類。

## テストの種類

### 1. インタラクションテスト

**ファイル:** `ComponentName.stories.tsx` のplay関数

**チェックポイント:**

- [ ] インタラクティブ要素をすべてテスト
- [ ] `getByRole()`優先、なければ`data-testid`
- [ ] 状態変化、エラー、エッジケースをカバー

### 2. アクセシビリティテスト

**ファイル:** `ComponentName.a11y.test.tsx`

**チェックポイント:**

- [ ] 適切なARIAロールとラベルの設定
- [ ] キーボード操作の対応
- [ ] フォーカス管理の確認
- [ ] カラーコントラストの検証
- [ ] スクリーンリーダーでの読み上げ順序

### 3. VRT

**ファイル:** `ComponentName.vrt.test.tsx`

**重要: 1 Story = 1 テストケース**（複数Storyを1テストにまとめない）

**チェックポイント:**

- [ ] 1 Story = 1 テストケース（必須）
- [ ] propsの全バリエーション
- [ ] 各状態(hover、focus、disabled等)
- [ ] レスポンシブ、ダークモード(必要時)
- [ ] `toMatchScreenshot`の引数を考案

## テスト設計プロセス

### 1. コンポーネント分析

**情報収集チェックリスト:**

- [ ] コンポーネントの役割と目的
- [ ] すべてのPropsの型と意味
- [ ] インタラクティブな要素とそのイベント
- [ ] 内部状態の有無と状態遷移
- [ ] 条件分岐による表示の変化
- [ ] エラー状態やエッジケース
- [ ] 既存のテストやStoriesの内容

不足がある場合のみ質問（例: 期待動作、バリデーションルール、エッジケース）

### 2. 優先順位

1. 基本的な機能動作(インタラクション)
2. アクセシビリティ準拠
3. 視覚的整合性(VRT)

## ファイル構成

```
src/components/core/YourComponent/
├── YourComponent.tsx           # コンポーネント本体
├── YourComponent.stories.tsx   # Storybook + インタラクションテスト
├── YourComponent.a11y.test.tsx # アクセシビリティ
└── YourComponent.vrt.test.tsx  # VRT
```

## 出力フォーマット

```markdown
## [コンポーネント名] テストプラン

### コンポーネント分析結果

- **役割**: [コンポーネントの目的]
- **主要なProps**: [重要なpropsとその型]
- **インタラクティブ要素**: [操作可能な要素のリスト]
- **状態管理**: [状態の有無と種類]

### インタラクションテスト

- [ ] 基本操作: [説明]
- [ ] イベントハンドリング: [説明]
- [ ] 状態変化: [説明]
- [ ] エッジケース: [説明]

### アクセシビリティテスト

- [ ] キーボード操作対応
- [ ] ARIAロールとラベル設定
- [ ] フォーカス管理

### VRT

- [ ] デフォルト状態
- [ ] Props バリエーション: [具体的な組み合わせ]
- [ ] インタラクション状態: hover, focus, active等
- [ ] エラー/特殊状態

### 実装の注意点

- data-testid を付与すべき要素: [リスト]
- 特記事項: [あれば記載]
```