From zenbu-powers
React IT Stage 3:紅燈實作執行器。對單一 .feature 執行完整紅燈流程: Schema Analysis(環境就緒)→ Step Template(骨架生成)→ Red Implementation(載入 Handler 實作測試)。 當 /aibdd.auto.ts.it.control-flow 呼叫紅燈階段,或使用者說「紅燈」「red」時觸發。
npx claudepluginhub zenbuapps/zenbu-powers --plugin zenbu-powersThis skill uses the workspace's default tool permissions.
寫出測試程式,確認有 Failing Test(Value Difference,非環境問題)。
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Guides code writing, review, and refactoring with Karpathy-inspired rules to avoid overcomplication, ensure simplicity, surgical changes, and verifiable success criteria.
Share bugs, ideas, or general feedback.
寫出測試程式,確認有 Failing Test(Value Difference,非環境問題)。
screen.getByText/getByRole 找不到預期內容環境的 Difference ≠ 紅燈。Value 的 Difference = 紅燈。兩者都符合,才算正式進入 Red。
Step 1: Schema Analysis → 呼叫 /zenbu-powers:aibdd.auto.ts.it.schema-analysis
Step 2: Step Template → 呼叫 /zenbu-powers:aibdd.auto.ts.it.step-template
Step 3: Red Implementation → 對每個 TODO step:
→ 讀 TODO 取得 handler type
→ 讀 /zenbu-powers:aibdd.auto.ts.it.handlers.{type}/SKILL.md
→ 實作測試程式碼
→ 驗證紅燈(條件 b)
呼叫 /zenbu-powers:aibdd.auto.ts.it.schema-analysis。
核心任務:
/zenbu-powers:aibdd-auto-frontend-msw-api-layer 補齊呼叫 /zenbu-powers:aibdd.auto.ts.it.step-template。
核心任務:
describe/it 測試檔骨架,每個 step 含 TODO 標註對每個 it() 內的 TODO 註解:
/zenbu-powers:aibdd.auto.ts.it.handlers.{type}/SKILL.md(若尚未載入)expect.fail('TODO: ...') 替換為完整測試程式碼同時產出基礎建設(若不存在):
src/app/ 或 src/components/,非 test 目錄)src/test/factories/)Command handler 只執行 user-event 互動,不做 assertion。驗證交給 Then handler。
Request/Response 欄位名以 api.yml schemas 為唯一真相來源。Zod schemas 從 api.yml 推導。
使用 let 宣告在 describe scope,例如 let aliceId: string;。
基礎建設放在 src/app/ 或 src/components/(production code),非 src/__tests__/。
Red 階段只定義介面。Component 只回傳 <div>TODO</div> 等最小 stub。
這是 TDD 紅燈階段的本質。失敗原因必須是 Value Difference(screen.getByText 找不到預期元素)。
Vitest 的 jsdom environment + MSW setupServer,無需 Docker、Playwright、真實 API server。
Feature 的 Data Table 欄位與 api.yml / Zod schema 欄位 1:1 對應。
HTTP 路徑從 api.yml paths 讀取,MSW handler URL 與之一致。
# 執行特定測試檔
npx vitest run src/__tests__/{feature-slug}.integration.test.tsx
# 執行特定 scenario
npx vitest run src/__tests__/{feature-slug}.integration.test.tsx -t "scenario name"
# 執行所有整合測試
npx vitest run
Red 執行前確認:
package.json 含 vitest, @testing-library/react, mswvitest.config.ts 存在src/test/setup.ts 存在且正確 import MSW servernpx vitest run --passWithNoTests 通過若前置條件不滿足 → 委派 /zenbu-powers:aibdd.auto.ts.it.starter 補齊。
TestingLibraryElementError: Unable to find an element with the text: /成功/i
非環境錯誤(非 Cannot find module、ReferenceError、MSW unhandled request)it() 已從 expect.fail('TODO') 替換為完整測試程式碼