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

出力フォーマット

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

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

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

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

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

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

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

### VRT

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

### 実装の注意点

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