跳至主要内容

US-205: 設計師工作台 - 手動測試指南

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

測試前準備​

1. 啟動開發伺服器​

npm run dev

2. 登入測試帳號​

測試帳號:

角色用戶名密碼
設計師designer@florist.comPassword123!
店員staff@florist.comPassword123!

3. 準備測試資料​

需要以下狀態的訂單：

  • confirmed (已確認) - 等待開始設計
  • in_production (設計中) - 等待完成設計

可先使用店員帳號確認一些訂單。

工作台功能流程​

┌─ 設計師工作台 (/design) ────────────────────────────┐
│                                                      │
│  ┌─ 等待開始設計 (Confirmed) ────────────────────┐  │
│  │  訂單卡片                                      │  │
│  │  [查看詳情] [開始設計]                         │  │
│  └────────────────────────────────────────────────┘  │
│                                                      │
│  ┌─ 設計中 (In Production) ──────────────────────┐  │
│  │  訂單卡片                                      │  │
│  │  [查看詳情] [完成設計*]                        │  │
│  │  * 需上傳照片                                  │  │
│  └────────────────────────────────────────────────┘  │
│                                                      │
└──────────────────────────────────────────────────────┘

測試場景​

Scenario 1: 進入設計師工作台​

目標: 驗證設計師可以存取工作台並查看待處理訂單

操作步驟​

  1. 使用設計師帳號登入

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

  2. 開啟 Application Launcher

    • 點擊 Header 右側的 Launcher 按鈕
    • 驗證: Application Launcher 全螢幕顯示
    • 驗證: 看到「Design Workbench」卡片

  3. 進入設計師工作台

    • 點擊「Design Workbench」卡片
    • 驗證: 導航至 /design
    • 驗證: 看到 AppletShell 佈局

  4. 檢查訂單分組

    • 驗證: 看到「等待開始設計」(Confirmed) 分組
    • 驗證: 看到「設計中」(In Production) 分組
    • 驗證: 各分組顯示對應狀態的訂單

  5. 檢查訂單卡片

    • 驗證: 顯示訂單編號、客戶名稱
    • 驗證: 顯示配送日期、配送時段
    • 驗證: 顯示訂單備註/特殊需求（如有）

預期結果​

  • 設計師可存取工作台
  • 兩個狀態分組正確顯示
  • 卡片資訊完整

Scenario 2: 開始設計​

目標: 驗證設計師可以開始設計訂單，狀態變更為「設計中」

操作步驟​

  1. 在「等待開始設計」分組中

    • 選擇一張訂單卡片
    • 記住訂單編號

  2. 點擊「開始設計」按鈕

    • 驗證: 顯示確認對話框
    • 驗證: 對話框訊息：「確定要開始設計嗎？」

  3. 確認操作

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

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

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

  5. 驗證 UI 更新

    • 驗證: Toast 通知「狀態更新成功」
    • 驗證: 訂單從「等待開始設計」移至「設計中」分組
    • 驗證: 按鈕從「開始設計」變為「完成設計」

預期結果​

  • 狀態更新成功
  • 訂單正確移動分組
  • 按鈕動態變更

Scenario 3: 完成設計（含照片上傳）​

目標: 驗證設計師完成設計時必須上傳作品照片

操作步驟​

  1. 在「設計中」分組中

    • 選擇一張訂單卡片
    • 記住訂單編號

  2. 點擊「完成設計」按鈕

    • 驗證: 開啟 PhotoUploadDialog（不是確認對話框）
    • 驗證: 對話框標題：「上傳作品照片」
    • 驗證: 說明文字：「請上傳至少一張作品照片後標記為完成」

  3. 檢查按鈕狀態

    • 驗證: 「完成設計」按鈕為 禁用狀態（未上傳照片）
    • 驗證: 按鈕提示需要上傳照片

  4. 上傳作品照片

    • 點擊上傳區域或拖曳照片
    • 選擇 1-3 張測試圖片
    • 驗證: 照片預覽正確顯示
    • 驗證: 可刪除已選照片
    • 驗證: 「完成設計」按鈕變為 啟用狀態

  5. 確認完成

    • 點擊「完成設計」按鈕
    • 驗證: 顯示載入狀態

  6. 驗證 API 請求

    • 驗證: 發送 PATCH /api/v1/orders/{orderId}/status
    • 驗證: Request Body 包含: 
      {
        "newStatus": "ready_for_delivery",
        "photoUrls": ["https://..."]
      }
    • 驗證: Response 200 OK，包含 photoCount

  7. 驗證 UI 更新

    • 驗證: Toast 通知「狀態更新成功」
    • 驗證: PhotoUploadDialog 自動關閉
    • 驗證: 訂單從「設計中」分組消失（進入配送流程）

預期結果​

  • 照片上傳流程正確
  • 無照片時無法完成
  • 狀態更新成功

Scenario 4: 照片上傳驗證​

目標: 驗證照片上傳的各種限制

操作步驟​

  1. 開啟 PhotoUploadDialog

    • 點擊「設計中」訂單的「完成設計」按鈕

  2. 測試檔案類型限制

    • 嘗試上傳非圖片檔案（如 .pdf, .txt）
    • 驗證: 顯示錯誤訊息「僅支援圖片格式」
    • 驗證: 檔案不被接受

  3. 測試檔案大小限制（如有）

    • 嘗試上傳超大圖片（如 > 10MB）
    • 驗證: 顯示錯誤訊息（如有大小限制）

  4. 測試照片數量

    • 上傳 1 張照片
    • 驗證: 按鈕啟用
    • 上傳多張照片
    • 驗證: 所有照片都顯示預覽

  5. 測試刪除照片

    • 點擊照片預覽上的刪除按鈕
    • 驗證: 照片被移除
    • 刪除所有照片
    • 驗證: 按鈕變回禁用狀態

  6. 取消操作

    • 上傳一些照片
    • 點擊「取消」或關閉對話框
    • 驗證: 對話框關閉
    • 驗證: 訂單狀態未改變

預期結果​

  • 檔案類型限制正確
  • 至少一張照片驗證正確
  • 取消操作不影響訂單

Scenario 5: 查看訂單詳情與備註​

目標: 驗證設計師可查看訂單特殊需求

操作步驟​

  1. 選擇有特殊需求的訂單

    • 如：「請多加一些滿天星」

  2. 查看卡片資訊

    • 驗證: 卡片上顯示特殊需求摘要

  3. 點擊「查看詳情」

    • 驗證: OrderDetailDrawer 開啟
    • 驗證: 完整顯示特殊需求/備註
    • 驗證: 顯示訂單項目（產品、數量）

  4. 檢查訂單項目

    • 驗證: 顯示各產品名稱
    • 驗證: 顯示數量
    • 驗證: 顯示單價與小計

預期結果​

  • 特殊需求清晰可見
  • 訂單項目完整顯示

Scenario 6: 空狀態顯示​

目標: 驗證沒有待處理訂單時的顯示

操作步驟​

  1. 確認或完成所有訂單

    • 處理完所有「等待開始設計」和「設計中」訂單

  2. 檢查工作台顯示

    • 驗證: 各分組顯示空狀態
    • 驗證: 空狀態提示友善
    • 可能顯示：「目前沒有等待設計的訂單」

預期結果​

  • 空狀態顯示正確
  • 使用者知道目前沒有工作

Scenario 7: 權限控制​

目標: 驗證非設計師角色無法存取工作台

操作步驟​

  1. 使用店員帳號登入

    • 登出設計師帳號
    • 使用 staff@florist.com 登入

  2. 嘗試存取設計師工作台

    • 直接訪問 http://localhost:3000/design
    • 驗證: 導向至首頁或顯示權限不足

  3. 檢查 Application Launcher

    • 驗證: 不顯示「Design Workbench」卡片

  4. 使用配送員帳號測試

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

預期結果​

  • 非 ROLE_FLORIST 角色無法存取
  • Application Launcher 正確過濾

Scenario 8: 響應式設計​

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

操作步驟​

  1. 切換至手機視圖

    • 開發者工具 → 裝置模擬

  2. 驗證佈局

    • 驗證: 工具列適應手機版
    • 驗證: 分組和卡片正確顯示

  3. 測試照片上傳

    • 點擊「完成設計」
    • 驗證: PhotoUploadDialog 在手機版正常顯示
    • 驗證: 可選擇照片（支援相機拍攝）
    • 驗證: 照片預覽正常

預期結果​

  • 手機版佈局正確
  • 照片上傳功能正常

測試檢查清單​

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

基本功能​

  • Scenario 1: 進入設計師工作台
  • Scenario 2: 開始設計
  • Scenario 3: 完成設計（含照片上傳）
  • Scenario 4: 照片上傳驗證
  • Scenario 5: 查看訂單詳情與備註
  • Scenario 6: 空狀態顯示
  • Scenario 7: 權限控制
  • Scenario 8: 響應式設計

照片上傳​

  • PhotoUploadDialog 正確開啟
  • 對話框標題為「上傳作品照片」
  • 照片預覽功能正常
  • 至少一張照片驗證正確
  • 無照片時按鈕禁用
  • 可刪除已選照片
  • 取消操作不影響訂單

UI/UX​

  • AppletShell 佈局正確
  • 兩個狀態分組清晰區分
  • TaskCard 顯示特殊需求
  • OrderDetailDrawer 資訊完整
  • Toast 通知顯示正確
  • 載入狀態顯示正確

權限與安全​

  • 只有 ROLE_FLORIST 可存取
  • 完成設計需上傳照片

API​

  • PATCH /api/v1/orders/:id/status 正常運作
  • photoUrls 正確傳遞
  • Response 包含 photoCount

已知問題​

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

測試結論​

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

最後更新: 2025-12-19