phasegate 0.15.0 → 0.31.0

package/skills/scenario-test-logic-designer/SKILL.md

@@ -41,33 +41,26 @@ TDD実装フェーズ
 
 ---
 
-## ⚠️ 上位レイヤー存在チェック
+## 上位レイヤー存在チェック
 
 **このスキルはテストケース設計完了後、TDD実装前に実行します。**
 
-### 依存する上位設計文書
-
 | ファイル | 必須 | チェック方法 |
 |---------|------|------------|
-| `docs/inception/{unit}/{story_id}/scenario_test_design.md` | ✅ 必須 | シナリオテストケース設計の存在を確認 |
-| `docs/inception/{unit}/{story_id}/logical_design.md` | ✅ 必須 | 論理設計の存在を確認 |
-| `docs/product/construction/{unit}/coverage_report.md` | 📋 推奨 | カバレッジ検証済みか確認 |
-
-### 上位設計が存在しない場合のアクション
+| `docs/inception/{unit}/{story_id}/scenario_test_design.md` | 必須 | シナリオテストケース設計の存在を確認 |
+| `docs/inception/{unit}/{story_id}/logical_design.md` | 必須 | 論理設計の存在を確認 |
+| `docs/product/construction/{unit}/coverage_report.md` | 推奨 | カバレッジ検証済みか確認 |
 
 上位設計文書が存在しない場合、**ロジック設計を開始せず**、以下を行う：
 
 1. **状況報告** — ユーザーに不足している設計文書を明示
-2. **選択肢提示** — 以下の選択肢を提示
-   - 上位設計（scenario-test-designer）を先に実行する
-   - 上位設計をスキップして進める（非推奨）
+2. **選択肢提示** — 上位設計（scenario-test-designer）を先に実行する / スキップして進める（非推奨）
 3. **ユーザー指示待ち** — 独自判断でロジック設計を開始しない
 
 ---
 
-## ⚠️ 3フェーズ実行ルール
+## 3フェーズ実行ルール
 
-**このスキルは3フェーズで実行する。**
 - **Phase 1（計画）**: Opus がスコープ・方針・不明点を整理し、人間の承認を得る
 - **Phase 2（実行）**: Sonnet 4.6 に委任して成果物を生成する（`scripts/delegate-sonnet.sh` 経由）
 - **Phase 3（レビュー）**: Opus が成果物を検証し、問題があれば直接修正する
@@ -100,7 +93,7 @@ TDD実装フェーズ
 | `{story_id}-{feature}.spec.ts` | {シナリオ名} | X |
 
 ## 3. セレクタ戦略
-- data-testid命名規約
+- data-testid命名規約（uiux-designerスキル準拠）
 - 既存コンポーネントの再利用
 
 ## 4. シードデータ設計
@@ -161,305 +154,29 @@ TDD実装フェーズ
 
 ### 出力ファイル
 
-| 種別 | 配置先 |
-|------|--------|
-| 成果物 | `docs/inception/{unit}/{story_id}/scenario_test_logic.md` |
+`docs/inception/{unit}/{story_id}/scenario_test_logic.md`
 
 ### scenario_test_logic.md の構成
 
-```markdown
-# シナリオテストロジック設計: {ストーリーID}
-
-## 1. テストファイル構成
-
-| ファイルパス | シナリオ | ケース数 |
-|------------|---------|---------|
-| `e2e/tests/{context}/{story_id}-{feature}.spec.ts` | {シナリオ名} | X |
-
-## 2. ヘルパー・シードデータ
-
-### ヘルパーのインポート
-
-```typescript
-import { test, expect } from '@playwright/test';
-import { loginAsUser } from '../../helpers/auth-helper';
-import { TEST_USERS } from '../../helpers/test-users';
-import { cleanup{Entity} } from '../../helpers/{context}-helper';
-```
-
-### シードデータ設計
-
-```typescript
-// e2e/seeds/{context}/{seed-name}.ts
-
-export const {SEED_NAME}_SEED = {
-  // シナリオ実行前に必要なデータ
-  {entity}: {
-    id: '{entity}-001',
-    // ...
-  },
-};
-
-export async function seed{SeedName}(): Promise<void> {
-  // Supabase CLIまたはAPIでデータ投入
-}
-
-export async function cleanup{SeedName}(): Promise<void> {
-  // クリーンアップ処理
-}
-```
-
-## 3. シナリオテスト詳細ロジック
-
-### SC-001: {シナリオ名}
-
-#### ファイル: `{story_id}-{feature}.spec.ts`
-
-```typescript
-import { test, expect } from '@playwright/test';
-import { loginAsUser } from '../../helpers/auth-helper';
-import { TEST_USERS } from '../../helpers/test-users';
-import { cleanup{Entity} } from '../../helpers/{context}-helper';
-
-/**
- * {ストーリーID}: {シナリオ概要}
- * {業務フローの説明}
- */
-
-test.describe('{ストーリーID}: {シナリオ名}', () => {
-  let entityId: string | undefined;
-
-  test.beforeEach(async ({ page }) => {
-    // 認証済みユーザーでログイン
-    await loginAsUser(page, TEST_USERS.{role}.email, TEST_USERS.{role}.password);
-  });
-
-  test.afterEach(async ({ page }) => {
-    // クリーンアップ
-    if (entityId) {
-      await cleanup{Entity}(page, entityId);
-    }
-  });
-
-  test('{テストケース名}', async ({ page }) => {
-    try {
-      // Step 1: {画面遷移または操作}
-      await page.goto('/{path}');
-      await page.waitForLoadState('networkidle');
-
-      // Step 2: {操作}
-      await page.click('[data-testid="{element-name}"]');
-      await page.waitForURL('**/{expected-path}', { timeout: 10000 });
-
-      // Step 3: {入力}
-      await page.fill('[data-testid="{input-name}"]', '{入力値}');
-      await page.click('[data-testid="{submit-button}"]');
-
-      // Step 4: {結果確認}
-      await expect(page.getByTestId('{result-element}')).toBeVisible();
-      await expect(page.getByTestId('{result-element}')).toHaveText('{期待テキスト}');
-
-      // URLからIDを取得（クリーンアップ用）
-      const url = page.url();
-      entityId = url.split('/').pop();
-
-      // Step 5: {追加検証}
-      await expect(page.getByTestId('{status}')).toHaveText('{期待ステータス}');
-
-    } finally {
-      // エラー時もクリーンアップ実行
-      if (entityId) {
-        await cleanup{Entity}(page, entityId);
-        entityId = undefined;
-      }
-    }
-  });
-
-  test('{異常系テストケース名}', async ({ page }) => {
-    // Step 1: {異常系操作}
-    await page.goto('/{path}');
-
-    // Step 2: {不正な入力}
-    await page.fill('[data-testid="{input-name}"]', '{不正な値}');
-    await page.click('[data-testid="{submit-button}"]');
-
-    // Step 3: {エラー表示確認}
-    await expect(page.getByTestId('{error-message}')).toBeVisible();
-    await expect(page.getByTestId('{error-message}')).toContainText('{期待エラーメッセージ}');
-  });
-});
-```
-
-### SC-002: {別シナリオ名}
-
-（同様の構造で記述）
-
-## 4. セレクタ戦略
-
-### data-testid命名規約
-
-| 要素タイプ | 命名パターン | 例 |
-|----------|------------|---|
-| ページコンテナ | `{page}-container` | `client-list-container` |
-| テーブル行 | `{entity}-row-{id}` | `client-row-001` |
-| ボタン | `{action}-{target}-button` | `submit-create-process-button` |
-| 入力フィールド | `{field}-input` | `process-label-input` |
-| ステータス表示 | `{entity}-{property}` | `process-status` |
-| エラーメッセージ | `{field}-error` | `amount-error` |
-
-### ロケーター優先順位
-
-1. `data-testid` — 最優先（テスト専用属性）
-2. `role` — セマンティックなロケーター
-3. `text` — 表示テキスト
-4. `css/xpath` — 最終手段（避ける）
-
-```typescript
-// 推奨
-await page.getByTestId('submit-button').click();
-await page.getByRole('button', { name: '保存' }).click();
-
-// 非推奨
-await page.click('button.primary'); // CSSセレクタ
-```
-
-## 5. 待機戦略
-
-### ページ遷移待機
+成果物は以下のセクションで構成する。各セクションのコードテンプレート・パターン詳細は `references/` を参照。
 
-```typescript
-// URLパターンで待機
-await page.waitForURL('**/processes/**', { timeout: 10000 });
-
-// ネットワーク安定待機
-await page.waitForLoadState('networkidle');
-```
-
-### 要素表示待機
-
-```typescript
-// 要素の可視化待機
-await expect(page.getByTestId('result')).toBeVisible({ timeout: 5000 });
-
-// テキスト変化待機
-await expect(page.getByTestId('status')).toHaveText('完了', { timeout: 10000 });
-```
-
-### API応答待機
-
-```typescript
-// 特定APIの応答を待機
-const responsePromise = page.waitForResponse('**/api/process');
-await page.click('[data-testid="submit-button"]');
-const response = await responsePromise;
-expect(response.ok()).toBe(true);
-```
-
-## 6. MSWモック設計（必要な場合）
-
-```typescript
-// e2e/mocks/{context}/handlers.ts
-import { http, HttpResponse } from 'msw';
-
-export const {context}Handlers = [
-  // 正常系モック
-  http.get('/api/{endpoint}', () => {
-    return HttpResponse.json({
-      data: { /* モックデータ */ },
-    });
-  }),
-
-  // エラー系モック
-  http.post('/api/{endpoint}', () => {
-    return HttpResponse.json(
-      { error: { code: 'VALIDATION_ERROR', message: '...' } },
-      { status: 400 }
-    );
-  }),
-];
-```
-
-## 7. ヘルパー関数設計
-
-```typescript
-// e2e/helpers/{context}-helper.ts
-
-/**
- * テスト用{Entity}のクリーンアップ
- */
-export async function cleanup{Entity}(page: Page, entityId: string): Promise<void> {
-  // 管理画面経由でデータ削除
-  // または直接APIコール
-}
-
-/**
- * テスト用{Entity}の作成
- */
-export async function create{Entity}(page: Page, data: {Entity}Data): Promise<string> {
-  // UI操作またはAPIでエンティティ作成
-  // 作成されたIDを返す
-}
-```
-
-## 8. テスト実行コマンド
-
-```bash
-# 全シナリオテスト実行
-pnpm --filter e2e test
-
-# 特定ファイルのみ
-pnpm --filter e2e test -- {story_id}-{feature}.spec.ts
-
-# デバッグモード（ブラウザ表示）
-pnpm --filter e2e test -- --headed
-
-# UI モード
-pnpm --filter e2e test -- --ui
-```
-```
+1. **テストファイル構成** — ファイルパス・シナリオ・ケース数の一覧表
+2. **ヘルパー・シードデータ** — インポート定義とシードデータ設計（テンプレート: `references/playwright-patterns.md` セクション6, 7）
+3. **シナリオテスト詳細ロジック** — 各シナリオの疑似コード（テンプレート: `references/playwright-patterns.md` セクション5）
+4. **セレクタ戦略** — data-testid の命名規則は `uiux-designer` スキルを参照。ロケーター優先順位は `references/playwright-patterns.md` セクション1
+5. **待機戦略** — ページ遷移・要素表示・API応答（詳細: `references/playwright-patterns.md` セクション2）
+6. **MSWモック設計**（必要な場合） — 詳細: `references/msw-patterns.md`
+7. **ヘルパー関数設計** — テンプレート: `references/playwright-patterns.md` セクション7
+8. **テスト実行コマンド** — 実行方法一覧（`references/playwright-patterns.md` セクション8）
 
 ---
 
 ## 設計原則
 
-### 1. ステップコメントの徹底
-```typescript
-// Step 1: ダッシュボードからクライアント一覧へ遷移
-await page.goto('/dashboard');
-
-// Step 2: クライアントを選択
-await page.click('[data-testid="client-row-001"]');
-
-// Step 3: 結果を確認
-await expect(page.getByTestId('client-name')).toHaveText('テストクライアント');
-```
-
-### 2. try/finallyパターン
-```typescript
-test('テスト', async ({ page }) => {
-  let createdId: string | undefined;
-  try {
-    // テスト実行
-    createdId = await createEntity(page);
-    // ...
-  } finally {
-    // 必ずクリーンアップ
-    if (createdId) await cleanupEntity(page, createdId);
-  }
-});
-```
-
-### 3. 既存パターンの踏襲
-- `loginAsUser()` でログイン処理を共通化
-- `TEST_USERS` で認証情報を管理
-- ヘルパー関数でクリーンアップを共通化
-
-### 4. 疑似コードの粒度
-- 実装エージェントが迷わないレベルの詳細さ
-- 具体的なセレクタ・URL・待機時間を記載
-- エッジケースのテストパターンを明示
-
----
+1. **ステップコメントの徹底** — 各テストステップに `// Step N: 操作内容` を付与（例: `references/playwright-patterns.md` セクション3）
+2. **try/finallyパターン** — クリーンアップを確実に実行（例: `references/playwright-patterns.md` セクション4）
+3. **既存パターンの踏襲** — `loginAsUser()` でログイン共通化、`TEST_USERS` で認証情報管理、ヘルパー関数でクリーンアップ共通化
+4. **疑似コードの粒度** — 実装エージェントが迷わないレベルの詳細さ。具体的なセレクタ・URL・待機時間を記載。エッジケースのテストパターンを明示
 
 ---
 

package/skills/scenario-test-logic-designer/references/msw-patterns.md

@@ -0,0 +1,36 @@
+# MSW モックパターン集
+
+scenario-test-logic-designer スキルで使用する MSW (Mock Service Worker) パターンのリファレンス。
+
+---
+
+## ハンドラー テンプレート
+
+```typescript
+// e2e/mocks/{context}/handlers.ts
+import { http, HttpResponse } from 'msw';
+
+export const {context}Handlers = [
+  // 正常系モック
+  http.get('/api/{endpoint}', () => {
+    return HttpResponse.json({
+      data: { /* モックデータ */ },
+    });
+  }),
+
+  // エラー系モック
+  http.post('/api/{endpoint}', () => {
+    return HttpResponse.json(
+      { error: { code: 'VALIDATION_ERROR', message: '...' } },
+      { status: 400 }
+    );
+  }),
+];
+```
+
+## 設計時の考慮事項
+
+- 正常系・異常系の両方のハンドラーを設計する
+- レスポンス形態は実際のAPI仕様に合わせる
+- テストシナリオごとに必要なモックを明示する
+- モックデータはシードデータと整合性を保つ

package/skills/scenario-test-logic-designer/references/playwright-patterns.md

@@ -0,0 +1,237 @@
+# Playwright テストパターン集
+
+scenario-test-logic-designer スキルで使用する Playwright テストパターンの詳細リファレンス。
+
+---
+
+## 1. セレクタ戦略
+
+### ロケーター優先順位
+
+1. `data-testid` — 最優先（テスト専用属性）
+2. `role` — セマンティックなロケーター
+3. `text` — 表示テキスト
+4. `css/xpath` — 最終手段（避ける）
+
+```typescript
+// 推奨
+await page.getByTestId('submit-button').click();
+await page.getByRole('button', { name: '保存' }).click();
+
+// 非推奨
+await page.click('button.primary'); // CSSセレクタ
+```
+
+> **data-testid の命名規則は `uiux-designer` スキルを参照。**
+
+---
+
+## 2. 待機戦略
+
+### ページ遷移待機
+
+```typescript
+// URLパターンで待機
+await page.waitForURL('**/processes/**', { timeout: 10000 });
+
+// ネットワーク安定待機
+await page.waitForLoadState('networkidle');
+```
+
+### 要素表示待機
+
+```typescript
+// 要素の可視化待機
+await expect(page.getByTestId('result')).toBeVisible({ timeout: 5000 });
+
+// テキスト変化待機
+await expect(page.getByTestId('status')).toHaveText('完了', { timeout: 10000 });
+```
+
+### API応答待機
+
+```typescript
+// 特定APIの応答を待機
+const responsePromise = page.waitForResponse('**/api/process');
+await page.click('[data-testid="submit-button"]');
+const response = await responsePromise;
+expect(response.ok()).toBe(true);
+```
+
+---
+
+## 3. ステップコメントパターン
+
+```typescript
+// Step 1: ダッシュボードからクライアント一覧へ遷移
+await page.goto('/dashboard');
+
+// Step 2: クライアントを選択
+await page.click('[data-testid="client-row-001"]');
+
+// Step 3: 結果を確認
+await expect(page.getByTestId('client-name')).toHaveText('テストクライアント');
+```
+
+---
+
+## 4. try/finally クリーンアップパターン
+
+```typescript
+test('テスト', async ({ page }) => {
+  let createdId: string | undefined;
+  try {
+    // テスト実行
+    createdId = await createEntity(page);
+    // ...
+  } finally {
+    // 必ずクリーンアップ
+    if (createdId) await cleanupEntity(page, createdId);
+  }
+});
+```
+
+---
+
+## 5. テストファイル テンプレート
+
+```typescript
+import { test, expect } from '@playwright/test';
+import { loginAsUser } from '../../helpers/auth-helper';
+import { TEST_USERS } from '../../helpers/test-users';
+import { cleanup{Entity} } from '../../helpers/{context}-helper';
+
+/**
+ * {ストーリーID}: {シナリオ概要}
+ * {業務フローの説明}
+ */
+
+test.describe('{ストーリーID}: {シナリオ名}', () => {
+  let entityId: string | undefined;
+
+  test.beforeEach(async ({ page }) => {
+    // 認証済みユーザーでログイン
+    await loginAsUser(page, TEST_USERS.{role}.email, TEST_USERS.{role}.password);
+  });
+
+  test.afterEach(async ({ page }) => {
+    // クリーンアップ
+    if (entityId) {
+      await cleanup{Entity}(page, entityId);
+    }
+  });
+
+  test('{テストケース名}', async ({ page }) => {
+    try {
+      // Step 1: {画面遷移または操作}
+      await page.goto('/{path}');
+      await page.waitForLoadState('networkidle');
+
+      // Step 2: {操作}
+      await page.click('[data-testid="{element-name}"]');
+      await page.waitForURL('**/{expected-path}', { timeout: 10000 });
+
+      // Step 3: {入力}
+      await page.fill('[data-testid="{input-name}"]', '{入力値}');
+      await page.click('[data-testid="{submit-button}"]');
+
+      // Step 4: {結果確認}
+      await expect(page.getByTestId('{result-element}')).toBeVisible();
+      await expect(page.getByTestId('{result-element}')).toHaveText('{期待テキスト}');
+
+      // URLからIDを取得（クリーンアップ用）
+      const url = page.url();
+      entityId = url.split('/').pop();
+
+      // Step 5: {追加検証}
+      await expect(page.getByTestId('{status}')).toHaveText('{期待ステータス}');
+
+    } finally {
+      // エラー時もクリーンアップ実行
+      if (entityId) {
+        await cleanup{Entity}(page, entityId);
+        entityId = undefined;
+      }
+    }
+  });
+
+  test('{異常系テストケース名}', async ({ page }) => {
+    // Step 1: {異常系操作}
+    await page.goto('/{path}');
+
+    // Step 2: {不正な入力}
+    await page.fill('[data-testid="{input-name}"]', '{不正な値}');
+    await page.click('[data-testid="{submit-button}"]');
+
+    // Step 3: {エラー表示確認}
+    await expect(page.getByTestId('{error-message}')).toBeVisible();
+    await expect(page.getByTestId('{error-message}')).toContainText('{期待エラーメッセージ}');
+  });
+});
+```
+
+---
+
+## 6. シードデータ テンプレート
+
+```typescript
+// e2e/seeds/{context}/{seed-name}.ts
+
+export const {SEED_NAME}_SEED = {
+  // シナリオ実行前に必要なデータ
+  {entity}: {
+    id: '{entity}-001',
+    // ...
+  },
+};
+
+export async function seed{SeedName}(): Promise<void> {
+  // Supabase CLIまたはAPIでデータ投入
+}
+
+export async function cleanup{SeedName}(): Promise<void> {
+  // クリーンアップ処理
+}
+```
+
+---
+
+## 7. ヘルパー関数 テンプレート
+
+```typescript
+// e2e/helpers/{context}-helper.ts
+
+/**
+ * テスト用{Entity}のクリーンアップ
+ */
+export async function cleanup{Entity}(page: Page, entityId: string): Promise<void> {
+  // 管理画面経由でデータ削除
+  // または直接APIコール
+}
+
+/**
+ * テスト用{Entity}の作成
+ */
+export async function create{Entity}(page: Page, data: {Entity}Data): Promise<string> {
+  // UI操作またはAPIでエンティティ作成
+  // 作成されたIDを返す
+}
+```
+
+---
+
+## 8. テスト実行コマンド
+
+```bash
+# 全シナリオテスト実行
+pnpm --filter e2e test
+
+# 特定ファイルのみ
+pnpm --filter e2e test -- {story_id}-{feature}.spec.ts
+
+# デバッグモード（ブラウザ表示）
+pnpm --filter e2e test -- --headed
+
+# UI モード
+pnpm --filter e2e test -- --ui
+```