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. 優先順位
- 基本的な機能動作(インタラクション)
- アクセシビリティ準拠
- 視覚的整合性(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 を付与すべき要素: [リスト]
- 特記事項: [あれば記載]