跳至主要内容

US-204: 店員工作台 - 手動測試指南

測試日期: ____________ 測試人員: ____________ 測試環境: npm run dev (localhost:3000)

測試前準備​

1. 啟動開發伺服器​

npm run dev

2. 登入測試帳號​

測試帳號:

角色用戶名密碼
店員staff@florist.comPassword123!

3. 準備測試資料​

確保 Mock API 中有多筆 pending_confirmation 狀態的訂單，或使用訂單管理 Applet 創建測試訂單。

工作台功能流程​

┌─ 店員工作台 (/sales) ─────────────────────────────┐
│                                                    │
│  ┌─ 待確認 (Pending Confirmation) ──────────────┐ │
│  │  訂單卡片                                     │ │
│  │  [查看詳情] [確認訂單]                        │ │
│  └───────────────────────────────────────────────┘ │
│                                                    │
│  + 新增訂單                                        │
│                                                    │
└────────────────────────────────────────────────────┘

測試場景​

Scenario 1: 進入店員工作台​

目標: 驗證店員可以存取工作台並查看待確認訂單

操作步驟​

  1. 使用店員帳號登入

    • 使用 staff@florist.com 登入
    • 驗證: 登入成功

  2. 開啟 Application Launcher

    • 點擊 Header 右側的 Launcher 按鈕 (網格圖示)
    • 驗證: Application Launcher 全螢幕顯示
    • 驗證: 看到「Sales Workbench」卡片

  3. 進入店員工作台

    • 點擊「Sales Workbench」卡片
    • 驗證: 導航至 /sales
    • 驗證: 看到 AppletShell 佈局（左側工具列 + 右側內容區）

  4. 檢查待確認訂單列表

    • 驗證: 看到「待確認」(Pending Confirmation) 分組標題
    • 驗證: 訂單卡片顯示以下資訊：
      • 訂單編號
      • 客戶名稱
      • 配送日期
      • 配送時段
      • 總金額
    • 驗證: 每張卡片有「查看詳情」和「確認訂單」按鈕

預期結果​

  • 店員可存取工作台
  • 待確認訂單正確顯示
  • 卡片資訊完整

Scenario 2: 查看訂單詳情​

目標: 驗證點擊「查看詳情」可開啟訂單詳情抽屜

操作步驟​

  1. 在待確認訂單列表中

    • 選擇一張訂單卡片
    • 點擊「查看詳情」按鈕

  2. 驗證抽屜開啟

    • 驗證: OrderDetailDrawer 從右側滑入
    • 驗證: 抽屜標題顯示訂單編號

  3. 檢查詳情內容

    • 驗證: 顯示客戶資訊
      • 客戶名稱
      • 電話
      • Email（如有）
    • 驗證: 顯示配送資訊
      • 配送地址
      • 配送日期
      • 配送時段
    • 驗證: 顯示訂單項目
      • 產品名稱
      • 數量
      • 單價
      • 小計
    • 驗證: 顯示訂單備註（如有）
    • 驗證: 顯示訂單總金額

  4. 關閉抽屜

    • 點擊抽屜外區域或關閉按鈕
    • 驗證: 抽屜關閉，回到列表畫面

預期結果​

  • 抽屜正確開啟
  • 訂單詳情完整顯示
  • 抽屜可正常關閉

Scenario 3: 確認訂單​

目標: 驗證店員可以確認訂單，狀態變更為「已確認」

操作步驟​

  1. 選擇待確認訂單

    • 在列表中找到一張待確認訂單
    • 記住訂單編號

  2. 點擊「確認訂單」按鈕

    • 驗證: 顯示確認對話框
    • 驗證: 對話框訊息：「確定要確認訂單嗎？」
    • 驗證: 有「是」和「否」按鈕

  3. 確認操作

    • 點擊「是」按鈕
    • 驗證: 顯示載入狀態（按鈕 loading）

  4. 驗證 API 請求（開發者工具 Network）

    • 驗證: 發送 PATCH /api/v1/orders/{orderId}/status
    • 驗證: Request Body 包含 {"newStatus": "confirmed"}
    • 驗證: Response 200 OK

  5. 驗證 UI 更新

    • 驗證: Toast 通知「狀態更新成功」
    • 驗證: 訂單從「待確認」分組消失
    • 驗證: 列表自動刷新

預期結果​

  • 確認對話框正確顯示
  • 狀態更新成功
  • 訂單從列表移除

Scenario 4: 快速新增訂單​

目標: 驗證從工作台可快速創建新訂單

操作步驟​

  1. 在工作台中

    • 點擊左側工具列的「+」按鈕（或「新增訂單」按鈕）

  2. 驗證導航

    • 驗證: 導航至訂單創建頁面 /orders/new
    • 或
    • 驗證: 開啟快速創建對話框

  3. 創建測試訂單（若有快速創建功能）

    • 填寫必要欄位
    • 提交訂單
    • 驗證: 訂單創建成功
    • 驗證: 新訂單出現在工作台列表中

預期結果​

  • 可從工作台快速進入訂單創建
  • 新創建的訂單正確顯示

Scenario 5: 空狀態顯示​

目標: 驗證沒有待確認訂單時的空狀態

操作步驟​

  1. 確保沒有待確認訂單

    • 確認所有待確認訂單

  2. 回到工作台

    • 驗證: 顯示空狀態提示
    • 驗證: 提示文字說明目前沒有待處理訂單
    • 驗證: 可能有「新增訂單」或「重新整理」按鈕

預期結果​

  • 空狀態提示友善清晰
  • 使用者知道下一步該做什麼

Scenario 6: 權限控制​

目標: 驗證非店員角色無法存取工作台

操作步驟​

  1. 使用設計師帳號登入

    • 登出店員帳號
    • 使用 designer@florist.com 登入

  2. 嘗試存取店員工作台

    • 直接訪問 http://localhost:3000/sales
    • 驗證: 導向至首頁或顯示權限不足訊息
    • 或
    • 驗證: Application Launcher 中不顯示「Sales Workbench」

  3. 使用配送員帳號測試

    • 使用 delivery@florist.com 登入
    • 重複上述驗證

預期結果​

  • 非 ROLE_SALES 角色無法存取
  • 權限控制正確

Scenario 7: 響應式設計​

目標: 驗證手機版工作台功能

操作步驟​

  1. 切換至手機視圖

    • 開發者工具 → 裝置模擬 → iPhone 或類似

  2. 驗證佈局

    • 驗證: 左側工具列可能變為底部或摺疊
    • 驗證: 訂單卡片適應手機寬度

  3. 測試操作

    • 驗證: 「查看詳情」按鈕可點擊
    • 驗證: 「確認訂單」按鈕可點擊
    • 驗證: 抽屜在手機版正常顯示

預期結果​

  • 手機版佈局正確
  • 操作功能正常

測試檢查清單​

完成所有測試場景後，請勾選以下項目：

基本功能​

  • Scenario 1: 進入店員工作台
  • Scenario 2: 查看訂單詳情
  • Scenario 3: 確認訂單
  • Scenario 4: 快速新增訂單
  • Scenario 5: 空狀態顯示
  • Scenario 6: 權限控制
  • Scenario 7: 響應式設計

UI/UX​

  • AppletShell 佈局正確（左側工具列 + 右側內容區）
  • TaskGroup 分組標題清晰
  • TaskCard 資訊完整易讀
  • OrderDetailDrawer 開關順暢
  • 確認對話框樣式正確
  • Toast 通知顯示正確
  • DaisyUI 語義色彩正確應用

權限與安全​

  • 只有 ROLE_SALES 可存取
  • 確認操作需要二次確認
  • API 呼叫帶有正確的權限標頭

API​

  • PATCH /api/v1/orders/:id/status 正常運作
  • 狀態更新響應正確
  • 錯誤響應格式正確

已知問題​

記錄測試過程中發現的問題：

測試結論​

  • 測試通過: [ ] 是 / [ ] 否
  • 備註: ___________________________________________________________
  • 測試人員簽名: ________________ 日期: ________________

最後更新: 2025-12-19