跳至主要内容

SBE Scenario 2: 完成設計並上傳照片

場景描述​

設計師完成設計後，上傳作品照片並將訂單狀態變更為「待出貨」。

Given（前置條件）​

系統狀態​

  • 當前日期: 2025-12-01
  • 當前租戶: ABC (ABC 花店)
  • 已登入用戶: 王小花 (ROLE_FLORIST)

測試資料​

設計中訂單

{
  "orderId": "ABC-20251201-0001",
  "orderNumber": "ABC-20251201-0001",
  "tenantId": "ABC",
  "status": "in_production",
  "customer": {
    "name": "李大華"
  },
  "deliveryDate": "2025-12-02",
  "totalAmount": 2520,
  "createdAt": "2025-12-01T09:00:00Z",
  "statusHistory": [
    {
      "oldStatus": "confirmed",
      "newStatus": "in_production",
      "timestamp": "2025-12-01T14:00:00Z"
    }
  ]
}

When（執行操作）​

步驟 1: 點擊完成設計​

  • 設計師在訂單卡片上點擊「完成設計」按鈕
  • 系統顯示照片上傳對話框（而非確認對話框）

步驟 2: 上傳作品照片​

  • 對話框標題: 「上傳作品照片」
  • 說明文字: 「請上傳至少一張作品照片後標記為完成」
  • 設計師選擇 2 張照片上傳
  • 照片預覽顯示

步驟 3: 確認完成​

  • 「完成設計」按鈕啟用（照片數量 >= 1）
  • 設計師點擊「完成設計」按鈕

Then（預期結果）​

API 請求​

端點: PATCH /api/v1/orders/ABC-20251201-0001/status

Request Body

{
  "newStatus": "ready_for_delivery",
  "photoUrls": [
    "https://cdn.example.com/photos/ABC-20251201-0001/design-1.jpg",
    "https://cdn.example.com/photos/ABC-20251201-0001/design-2.jpg"
  ]
}

Response Body (200 OK)

{
  "orderId": "ABC-20251201-0001",
  "oldStatus": "in_production",
  "newStatus": "ready_for_delivery",
  "updatedAt": "2025-12-01T16:30:00Z",
  "updatedBy": {
    "userId": "user-002",
    "userName": "王小花",
    "role": "ROLE_FLORIST"
  },
  "message": "訂單狀態已更新為「待出貨」",
  "photoCount": 2
}

UI 反饋​

1. 成功訊息

  • Toast 通知: 「狀態更新成功」
  • 訊息類型: 成功（綠色）

2. 對話框關閉

  • 照片上傳對話框自動關閉
  • pendingAction 狀態清空

3. 列表更新

  • 訂單從「設計中」分組消失
  • 訂單不再顯示在設計師工作台（因狀態已變更為 ready_for_delivery）

資料庫變更​

1. 更新 orders 表

UPDATE orders
SET status = 'ready_for_delivery',
    updated_at = '2025-12-01T16:30:00Z'
WHERE order_id = 'ABC-20251201-0001';

2. 新增訂單照片記錄

{
  "orderId": "ABC-20251201-0001",
  "photoType": "production",
  "photos": [
    {
      "id": "photo-001",
      "url": "https://cdn.example.com/photos/ABC-20251201-0001/design-1.jpg",
      "uploadedAt": "2025-12-01T16:30:00Z",
      "uploadedBy": "user-002"
    },
    {
      "id": "photo-002",
      "url": "https://cdn.example.com/photos/ABC-20251201-0001/design-2.jpg",
      "uploadedAt": "2025-12-01T16:30:00Z",
      "uploadedBy": "user-002"
    }
  ]
}

3. 新增狀態歷史記錄

{
  "id": "history-003",
  "orderId": "ABC-20251201-0001",
  "tenantId": "ABC",
  "oldStatus": "in_production",
  "newStatus": "ready_for_delivery",
  "timestamp": "2025-12-01T16:30:00Z",
  "operatorId": "user-002",
  "operatorName": "王小花",
  "operatorRole": "ROLE_FLORIST",
  "description": "設計完成，上傳作品照片",
  "metadata": {
    "photoCount": 2,
    "photoType": "production"
  }
}

錯誤場景​

未上傳照片嘗試完成​

Given

  • 照片上傳對話框已開啟
  • 未選擇任何照片

When

  • 設計師查看「完成設計」按鈕

Then

  • 按鈕為禁用狀態（disabled）
  • 無法點擊
  • 需上傳至少一張照片才能繼續

驗證檢查清單​

照片上傳​

  • 照片上傳對話框正確顯示
  • 照片預覽功能正常
  • 至少一張照片驗證正確

狀態流轉​

  • 訂單狀態從 in_production 變更為 ready_for_delivery
  • 照片 URL 正確傳遞至 API
  • 狀態歷史記錄包含照片資訊

UI 更新​

  • 對話框正確關閉
  • 訂單從列表消失
  • 成功通知顯示

最後更新: 2025-12-19