US-206: 配送員工作台 - 手動測試指南

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

測試前準備

1. 啟動開發伺服器

npm run dev

2. 登入測試帳號

測試帳號:

角色	用戶名	密碼
配送員	delivery@florist.com	Password123!
設計師	designer@florist.com	Password123!

3. 準備測試資料

需要以下狀態的訂單：

ready_for_delivery (待出貨) - 等待開始配送
out_for_delivery (配送中) - 等待確認簽收

可先使用設計師帳號完成一些訂單的設計。

工作台功能流程

┌─ 配送員工作台 (/delivery) ───────────────────────────┐
│                                                        │
│  ┌─ 待出貨 (Ready for Delivery) ─────────────────────┐│
│  │  訂單卡片                                          ││
│  │  客戶: 李大華                                      ││
│  │  地址: 台北市信義區信義路五段 7 號                 ││
│  │  時段: 14:00-18:00                                 ││
│  │  [查看詳情] [開始配送]                             ││
│  └────────────────────────────────────────────────────┘│
│                                                        │
│  ┌─ 配送中 (Out for Delivery) ───────────────────────┐│
│  │  訂單卡片                                          ││
│  │  客戶: 王小明                                      ││
│  │  地址: 台北市大安區忠孝東路四段 101 號             ││
│  │  時段: 09:00-12:00                                 ││
│  │  [查看詳情] [確認簽收*]                            ││
│  │  * 需上傳簽收照片                                  ││
│  └────────────────────────────────────────────────────┘│
│                                                        │
└────────────────────────────────────────────────────────┘

測試場景

Scenario 1: 進入配送員工作台

目標: 驗證配送員可以存取工作台並查看待處理訂單

操作步驟

使用配送員帳號登入
- 使用 delivery@florist.com 登入
- 驗證: 登入成功
開啟 Application Launcher
- 點擊 Header 右側的 Launcher 按鈕
- 驗證: Application Launcher 全螢幕顯示
- 驗證: 看到「Delivery Workbench」卡片
進入配送員工作台
- 點擊「Delivery Workbench」卡片
- 驗證: 導航至 /delivery
- 驗證: 看到 AppletShell 佈局
檢查訂單分組
- 驗證: 看到「待出貨」(Ready for Delivery) 分組
- 驗證: 看到「配送中」(Out for Delivery) 分組
- 驗證: 各分組顯示對應狀態的訂單
檢查訂單卡片（配送專用資訊）
- 驗證: 顯示訂單編號
- 驗證: 顯示客戶名稱
- 驗證: 顯示配送地址（完整地址）
- 驗證: 顯示配送時段（如 14:00-18:00）
- 驗證: 顯示客戶電話（方便聯繫）

預期結果

配送員可存取工作台
配送資訊（地址、時段）清晰顯示
兩個狀態分組正確顯示

Scenario 2: 開始配送

目標: 驗證配送員可以開始配送，狀態變更為「配送中」

操作步驟

在「待出貨」分組中
- 選擇一張訂單卡片
- 記住訂單編號和配送地址
點擊「開始配送」按鈕
- 驗證: 顯示確認對話框
- 驗證: 對話框訊息：「確定要開始配送嗎？」
- 驗證: 不需要上傳照片
確認操作
- 點擊「是」按鈕
- 驗證: 顯示載入狀態
驗證 API 請求
- 驗證: 發送 PATCH /api/v1/orders/{orderId}/status
- 驗證: Request Body: {"newStatus": "out_for_delivery"}
- 驗證: 沒有 photoUrls 欄位
- 驗證: Response 200 OK
驗證 UI 更新
- 驗證: Toast 通知「狀態更新成功」
- 驗證: 訂單從「待出貨」移至「配送中」分組
- 驗證: 按鈕從「開始配送」變為「確認簽收」

預期結果

開始配送不需要照片
狀態更新成功
訂單正確移動分組

Scenario 3: 確認簽收（含照片上傳）

目標: 驗證配送員確認簽收時必須上傳簽收照片

操作步驟

在「配送中」分組中
- 選擇一張訂單卡片
- 記住訂單編號
點擊「確認簽收」按鈕
- 驗證: 開啟 PhotoUploadDialog（不是確認對話框）
- 驗證: 對話框標題：「上傳簽收照片」
- 驗證: 說明文字：「請上傳至少一張簽收照片以確認收貨」
檢查按鈕狀態
- 驗證: 「確認簽收」按鈕為 禁用狀態（未上傳照片）
上傳簽收照片
- 點擊上傳區域或拖曳照片
- 選擇 1 張簽收照片（如：客戶簽收、商品交付）
- 驗證: 照片預覽正確顯示
- 驗證: 「確認簽收」按鈕變為 啟用狀態
確認簽收
- 點擊「確認簽收」按鈕
- 驗證: 顯示載入狀態
驗證 API 請求
- 驗證: 發送 PATCH /api/v1/orders/{orderId}/status
- 驗證: Request Body 包含:
```
{
  "newStatus": "delivered",
  "photoUrls": ["https://cdn.example.com/.../receipt-1.jpg"]
}
```
- 驗證: Response 200 OK，包含 photoCount
驗證 UI 更新
- 驗證: Toast 通知「狀態更新成功」
- 驗證: PhotoUploadDialog 自動關閉
- 驗證: 訂單從「配送中」分組消失（已完成配送）

預期結果

簽收必須上傳照片
照片正確上傳
狀態變更為 delivered

Scenario 4: 查看訂單詳情與製作照片

目標: 驗證配送員可查看設計師的作品照片

操作步驟

選擇一張訂單
- 點擊「查看詳情」按鈕
驗證抽屜內容
- 驗證: 顯示完整配送地址
- 驗證: 顯示配送時段
- 驗證: 顯示客戶電話（可點擊撥打）
- 驗證: 顯示訂單項目
查看製作照片（如有）
- 驗證: 顯示設計師上傳的作品照片
- 驗證: 照片可放大查看
- 這幫助配送員確認配送物品

預期結果

配送資訊完整
作品照片可查看

Scenario 5: 無照片簽收驗證

目標: 驗證沒有上傳照片時無法確認簽收

操作步驟

開啟 PhotoUploadDialog
- 點擊「配送中」訂單的「確認簽收」按鈕
不上傳照片
- 保持照片區域為空
檢查按鈕狀態
- 驗證: 「確認簽收」按鈕為禁用狀態
- 驗證: 無法點擊提交
取消操作
- 點擊「取消」或關閉對話框
- 驗證: 對話框關閉
- 驗證: 訂單狀態維持「配送中」

預期結果

無照片無法簽收
強制要求上傳證明

Scenario 6: 空狀態顯示

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

操作步驟

處理完所有訂單
- 開始配送並簽收所有訂單
檢查工作台顯示
- 驗證: 各分組顯示空狀態
- 驗證: 可能顯示：「目前沒有待配送的訂單」

預期結果

空狀態顯示友善
使用者知道目前沒有工作

Scenario 7: 權限控制

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

操作步驟

使用店員帳號登入
- 登出配送員帳號
- 使用 staff@florist.com 登入
嘗試存取配送員工作台
- 直接訪問 http://localhost:3000/delivery
- 驗證: 導向至首頁或顯示權限不足
檢查 Application Launcher
- 驗證: 不顯示「Delivery Workbench」卡片
使用設計師帳號測試
- 使用 designer@florist.com 登入
- 重複上述驗證

預期結果

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

Scenario 8: 響應式設計（行動裝置重要）

目標: 驗證手機版工作台功能（配送員常用手機）

操作步驟

切換至手機視圖
- 開發者工具 → 裝置模擬 → iPhone
驗證佈局
- 驗證: 工具列適應手機版
- 驗證: 地址顯示不截斷或可展開
- 驗證: 電話號碼可點擊撥打
測試核心流程
- 驗證: 「開始配送」按鈕可點擊
- 驗證: 「確認簽收」按鈕可點擊
測試照片上傳
- 點擊「確認簽收」
- 驗證: PhotoUploadDialog 在手機版正常顯示
- 驗證: 支援直接拍照（手機相機）
- 驗證: 照片預覽正常
測試地圖導航（如有）
- 驗證: 地址可連結至地圖 App

預期結果

手機版體驗流暢
支援拍照上傳
配送資訊易於存取

Scenario 9: 配送時段提醒

目標: 驗證超時訂單的視覺提示

操作步驟

找到即將到期或已超時的訂單
- 例如：當前時間已超過配送時段
檢查視覺提示
- 驗證: 卡片可能有警告樣式（如紅色邊框）
- 驗證: 時段顯示可能有不同顏色
驗證排序（如有）
- 驗證: 緊急訂單可能排在前面

預期結果

超時訂單有視覺提醒
配送員能快速識別優先順序

測試檢查清單

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

基本功能

Scenario 1: 進入配送員工作台
Scenario 2: 開始配送
Scenario 3: 確認簽收（含照片上傳）
Scenario 4: 查看訂單詳情與製作照片
Scenario 5: 無照片簽收驗證
Scenario 6: 空狀態顯示
Scenario 7: 權限控制
Scenario 8: 響應式設計
Scenario 9: 配送時段提醒

配送專用功能

照片上傳（簽收）

PhotoUploadDialog 正確開啟
對話框標題為「上傳簽收照片」
手機版支援拍照
至少一張照片驗證正確
無照片時按鈕禁用

UI/UX

權限與安全

只有 ROLE_DELIVERY 可存取
確認簽收需上傳照片
開始配送不需要照片

API

PATCH /api/v1/orders/:id/status 正常運作
開始配送: 不含 photoUrls
確認簽收: 包含 photoUrls
Response 包含 photoCount（簽收時）

已知問題

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

測試結論

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

最後更新: 2025-12-19

測試前準備​

1. 啟動開發伺服器​

2. 登入測試帳號​

3. 準備測試資料​

工作台功能流程​

測試場景​

Scenario 1: 進入配送員工作台​

操作步驟​

預期結果​

Scenario 2: 開始配送​

操作步驟​

預期結果​

Scenario 3: 確認簽收（含照片上傳）​

操作步驟​

預期結果​

Scenario 4: 查看訂單詳情與製作照片​

操作步驟​

預期結果​

Scenario 5: 無照片簽收驗證​

操作步驟​

預期結果​

Scenario 6: 空狀態顯示​

操作步驟​

預期結果​

Scenario 7: 權限控制​

操作步驟​

預期結果​

Scenario 8: 響應式設計（行動裝置重要）​

操作步驟​

預期結果​

Scenario 9: 配送時段提醒​

操作步驟​

預期結果​

測試檢查清單​

基本功能​

配送專用功能​

照片上傳（簽收）​

UI/UX​

權限與安全​

API​

已知問題​

測試結論​

測試前準備

1. 啟動開發伺服器

2. 登入測試帳號

3. 準備測試資料

工作台功能流程

測試場景

Scenario 1: 進入配送員工作台

操作步驟

預期結果

Scenario 2: 開始配送

操作步驟

預期結果

Scenario 3: 確認簽收（含照片上傳）

操作步驟

預期結果

Scenario 4: 查看訂單詳情與製作照片

操作步驟

預期結果

Scenario 5: 無照片簽收驗證

操作步驟

預期結果

Scenario 6: 空狀態顯示

操作步驟

預期結果

Scenario 7: 權限控制

操作步驟

預期結果

Scenario 8: 響應式設計（行動裝置重要）

操作步驟

預期結果

Scenario 9: 配送時段提醒

操作步驟

預期結果

測試檢查清單

基本功能

配送專用功能

照片上傳（簽收）

UI/UX

權限與安全

API

已知問題

測試結論