Next.js 對抗性 QA 與邊界案例注入

Next.js 對抗性 QA 與邊界案例注入 (nextjs-adversarial-qa)

專門的工作流程，透過將程式碼審查和邊界案例測試委派給獨立的對抗性審計子代理，來消除作者的確認偏誤。

[!TIP] 參考文件：

• 常見陷阱與反模式：references/pitfalls.md

---

架構規則與標準

1. 無偏見審計原則

• 撰寫元件的原始代理不得自行驗證邊界案例。
• 您必須使用 invoke_subagent 啟動一個獨立的子代理來審計程式碼並注入對抗性斷言。

2. 對抗性邊界案例範圍 ([ComponentName].edge.test.tsx)

子代理必須撰寫 [ComponentName].edge.test.tsx，針對開發者經常忽略的場景：

• 邊界值： 空字串、null/undefined 輸入、極長字串、Unicode 與波斯語 RTL 字形（"سلام دنیا"）。
• 屬性排列組合： 未處理的選用標誌組合。
• 網路與錯誤狀態： 非同步拒絕、格式錯誤的 payload、慢速串流。
• 深度無障礙性與動畫： 鍵盤導航（Enter、Space、Tab、Escape）、aria-expanded、aria-busy、aria-live、焦點陷阱，以及 prefers-reduced-motion。
• 壓力與生命週期： 快速重新渲染、卸載清理、計時器清理。

3. 不可變的對抗性測試原則

• 嚴格禁止修改或弱化測試： 開發者不得刪除或弱化 [ComponentName].edge.test.tsx 中的斷言。
• 修正程式碼，而非測試： 如果對抗性測試失敗，請修改元件（[ComponentName].tsx）或故事（[ComponentName].stories.tsx）以正確處理邊界案例。

---

工作流程步驟

• 步驟 1：啟動對抗性審計子代理

  • 使用下列參數呼叫 invoke_subagent：
    • TypeName："self"
    • Role："Adversarial Code & QA Auditor"
    • Model："inherit"
    • Prompt：指示審計員檢查 [ComponentName].tsx、[ComponentName]Skeleton.tsx、[ComponentName].test.tsx 和 [ComponentName].stories.tsx，然後在元件目錄中產生 [ComponentName].edge.test.tsx。

• 步驟 2：審計員注入 [ComponentName].edge.test.tsx

  • 審計員撰寫邊界案例斷言並完成審查。

• 步驟 3：執行對抗性測試與自動修復

  • 執行邊界案例測試套件：

    pnpm test -- <target_component_dir>/[ComponentName].edge.test.tsx
    

  • 如果任何測試失敗，請修補元件實作，直到所有邊界測試以 0 錯誤通過。