When should I use component-test-planner?

component-test-planner is useful in the following scenarios: • Designing interaction test cases for complex UI components using Storybook play functions to validate state changes, error handling, and edge cases. • Creating accessibility test plans to ensure components adhere to ARIA standards, support keyboard navigation, and maintain proper color contrast. • Establishing Visual Regression Testing (VRT) strategies to monitor UI consistency across different props, themes, and responsive breakpoints. • Standardizing testing documentation and file structures for frontend teams to improve code maintainability and streamline the QA workflow.

When & Why to Use This Skill

The Component Test Planner is a specialized Claude skill designed to architect comprehensive testing strategies for UI components. It streamlines the development process by generating detailed plans for interaction testing, accessibility (a11y) compliance, and Visual Regression Testing (VRT). By analyzing component roles, props, and states, it ensures high-quality frontend code and consistent user experiences across various web environments.

Use Cases

Designing interaction test cases for complex UI components using Storybook play functions to validate state changes, error handling, and edge cases.
Creating accessibility test plans to ensure components adhere to ARIA standards, support keyboard navigation, and maintain proper color contrast.
Establishing Visual Regression Testing (VRT) strategies to monitor UI consistency across different props, themes, and responsive breakpoints.
Standardizing testing documentation and file structures for frontend teams to improve code maintainability and streamline the QA workflow.

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