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 を付与すべき要素: [リスト]
- 特記事項: [あれば記載]