From zenbu-powers
當在 React IT Gherkin 測試中驗證操作成功或失敗的 UI 回饋時,「只能」使用此指令。 驗證 toast 通知、alert 訊息、disabled 狀態、error 訊息等。
npx claudepluginhub zenbuapps/zenbu-powers --plugin zenbu-powersThis skill uses the workspace's default tool permissions.
Then 語句描述**操作的成功或失敗結果**。
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.
Then 語句描述操作的成功或失敗結果。
識別規則:
通用判斷:如果 Then 只關注操作是否成功或失敗(不關注回傳資料內容),就使用此 Handler。
從 UI 上尋找成功/失敗的視覺回饋 → Assert 其存在或內容。
| success-failure | aggregate-then | readmodel-then | |
|---|---|---|---|
| 驗證對象 | UI 回饋(toast / alert / error message) | MSW request payload | rendered content |
| 資料來源 | DOM 元素 | 攔截的 HTTP request | DOM 元素 |
| 前提操作 | Command | Command | Query |
| 驗證深度 | 只看成敗 | 看發送的資料 | 看顯示的資料 |
waitFor 等待成功指標出現screen.getByText(/成功|完成/i)screen.getByRole('alert') with success contentwaitFor 等待失敗指標出現screen.getByText(/失敗|錯誤/i)screen.getByRole('alert') with error contentscreen.getByText(errorMessage)Then 操作成功
import { screen, waitFor } from '@testing-library/react';
await waitFor(() => {
// 方式 1:Toast 通知
expect(screen.getByText(/成功|已更新|已建立/i)).toBeInTheDocument();
// 方式 2:Alert role
// const alert = screen.getByRole('alert');
// expect(alert).toHaveTextContent(/成功/i);
// 方式 3:Success status
// expect(screen.getByRole('status')).toHaveTextContent(/成功/i);
});
Then 操作失敗
await waitFor(() => {
expect(screen.getByRole('alert')).toBeInTheDocument();
// 或
// expect(screen.getByText(/失敗|錯誤|無法/i)).toBeInTheDocument();
});
Then 操作失敗
And 錯誤訊息應為 "進度不可倒退"
await waitFor(() => {
expect(screen.getByRole('alert')).toBeInTheDocument();
});
expect(screen.getByText('進度不可倒退')).toBeInTheDocument();
Then 顯示驗證錯誤 "名稱不可為空"
await waitFor(() => {
expect(screen.getByText('名稱不可為空')).toBeInTheDocument();
});
// 確認表單仍可編輯
expect(screen.getByRole('button', { name: /送出/i })).toBeEnabled();
成功/失敗的 UI 回饋通常取決於 API 回傳的 status code。需要在 aggregate-given 或 test 內設定對應的 MSW handler:
import { overrideMswError } from '@/test/helpers/msw-utils';
// 設定 API 回傳失敗
overrideMswError('post', '/api/v1/lessons/:lessonId/progress', {
message: '進度不可倒退',
}, 400);
getByText(exactString) 不用 regexgetByRole('alert')