跳至主要内容

US-201: 創建訂單 - 手動測試指南

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

測試前準備​

1. 啟動開發伺服器​

npm run dev

2. 登入測試帳號​

訪問 http://localhost:3000/login

測試帳號（店員角色）:

  • 用戶名: staff@florist.com
  • 密碼: Password123!

登入後應該看到主頁面（可透過 Application Launcher 進行導航）。

測試場景​

✅ Scenario 1: 為個人客戶創建標準訂單（正常流程）​

目標: 驗證完整的訂單創建流程

操作步驟​

  1. 導航至創建訂單頁面

    • 在瀏覽器直接訪問 http://localhost:3000/orders/new
    • ✅ 驗證: 看到頂部工具列（ShoppingBag 圖示 + 「創建訂單」標題）
    • ✅ 驗證: 看到右側說明側邊欄（「建立訂單說明」、「注意事項」等）

  2. 驗證頁面佈局

    • ✅ 驗證: 頁面為三欄 Grid 佈局（桌面版）
    • ✅ 驗證: 左側為訂單表單（lg:col-span-2）
    • ✅ 驗證: 右側為說明側邊欄（lg:col-span-1，card bg-base-200）

  3. 填寫客戶資訊

    • 點擊「客戶」下拉選單
    • 選擇「李大華 (0912-345-678)」
    • ✅ 驗證: 配送地址和聯絡電話自動填充

  4. 添加商品

    • 點擊「+ 添加商品」按鈕
    • ✅ 驗證: 出現新的商品輸入區塊
    • 在「商品」下拉選單選擇「玫瑰花束（12 朵） - NT$1200」
    • 將「數量」改為 2
    • ✅ 驗證: 價格即時計算並顯示

  5. 填寫配送資訊

    • 配送日期：選擇明天的日期
    • 配送時段：選擇「下午 (14:00-18:00)」

  6. 提交訂單

    • 點擊頂部工具列的「創建訂單」按鈕
    • ✅ 驗證: 按鈕顯示 loading 狀態
    • ✅ 驗證: 顯示 Toast 通知「訂單 XXX 創建成功！」
    • ✅ 驗證: 頁面導航至訂單詳情頁

預期結果​

  • ✅ 訂單創建成功
  • ✅ 訂單編號格式正確（{租戶代碼}-{YYYYMMDD}-{序號}）
  • ✅ 價格計算正確（小計 + 稅額 = 總計）
  • ✅ 所有必填欄位都已填寫

✅ Scenario 2: 驗證必填欄位（錯誤處理）​

目標: 驗證表單驗證機制

操作步驟​

  1. 訪問 http://localhost:3000/orders/new
  2. 不填寫任何欄位，直接點擊「創建訂單」按鈕
  3. ✅ 驗證: 看到以下錯誤訊息:
    • 「請選擇客戶」（客戶欄位下方紅色文字）
    • 「請至少添加一個商品」（商品區塊下方紅色文字）
  4. 選擇客戶「李大華」
  5. 點擊「+ 添加商品」
  6. 選擇商品「玫瑰花束」但不填寫數量
  7. 點擊「創建訂單」按鈕
  8. ✅ 驗證: 看到配送資訊相關錯誤:
    • 「請選擇配送日期」
    • 「請選擇配送時段」

預期結果​

  • ✅ 所有必填欄位都顯示錯誤訊息
  • ✅ 訂單未被創建
  • ✅ 表單資料保留（不會清空）

✅ Scenario 3: 配送日期早於今天（錯誤場景）​

目標: 驗證配送日期驗證邏輯

操作步驟​

  1. 訪問 http://localhost:3000/orders/new
  2. 填寫所有必填欄位（客戶、商品、配送資訊）
  3. 配送日期選擇過去的日期（例如昨天）
  4. 點擊「創建訂單」按鈕
  5. ✅ 驗證: 看到錯誤訊息「配送日期不能早於今天」

預期結果​

  • ✅ 顯示日期驗證錯誤訊息
  • ✅ 訂單未被創建

✅ Scenario 4: 配送日期為店休日（錯誤場景）​

目標: 驗證店休日檢查

操作步驟​

  1. 訪問 http://localhost:3000/orders/new
  2. 填寫所有必填欄位
  3. 配送日期選擇即將到來的星期日（系統會動態計算接下來的兩個星期日作為店休日）
  4. 點擊「創建訂單」按鈕
  5. ✅ 驗證: 看到錯誤訊息「所選日期為店休日，無法配送」
  6. 打開 Console
  7. ✅ 驗證: 看到 API 錯誤響應，closedDays 陣列包含接下來兩個星期日的日期

預期結果​

  • ✅ 顯示店休日錯誤訊息
  • ✅ 訂單未被創建

✅ Scenario 5: 商品數量為 0（錯誤場景）​

目標: 驗證商品數量驗證

操作步驟​

  1. 訪問 http://localhost:3000/orders/new
  2. 選擇客戶「李大華」
  3. 點擊「+ 添加商品」
  4. 選擇商品「玫瑰花束」
  5. 將數量改為 0
  6. 填寫配送資訊（日期、時段）
  7. 點擊「創建訂單」按鈕
  8. ✅ 驗證: 看到錯誤訊息「數量必須大於 0」

預期結果​

  • ✅ 顯示數量驗證錯誤訊息
  • ✅ 訂單未被創建

✅ Scenario 6: 添加多個商品項目​

目標: 驗證多商品項目功能

操作步驟​

  1. 訪問 http://localhost:3000/orders/new
  2. 選擇客戶「李大華」
  3. 添加第一個商品:
    • 點擊「+ 添加商品」
    • 選擇「玫瑰花束（12 朵） - NT$1200」
    • 數量設為 2
  4. 添加第二個商品:
    • 再次點擊「+ 添加商品」
    • 選擇「百合盆花 - NT$800」
    • 數量設為 1
  5. ✅ 驗證: 看到兩個商品項目，分別標示為「項目 1」和「項目 2」
  6. ✅ 驗證: 價格摘要顯示:
    • 小計: NT$ 3,200 (1200×2 + 800×1)
    • 稅額: NT$ 160 (3200 × 5%)
    • 總計: NT$ 3,360
  7. 填寫配送資訊
  8. 點擊「創建訂單」按鈕
  9. ✅ 驗證: 訂單創建成功

預期結果​

  • ✅ 可添加多個商品項目
  • ✅ 每個項目獨立管理
  • ✅ 價格計算正確（多項目總和）

✅ Scenario 7: 移除商品項目​

目標: 驗證移除商品功能

操作步驟​

  1. 訪問 http://localhost:3000/orders/new
  2. 選擇客戶「李大華」
  3. 添加兩個商品項目（如 Scenario 6）
  4. 點擊「項目 2」的「移除」按鈕
  5. ✅ 驗證: 項目 2 消失
  6. ✅ 驗證: 價格摘要更新為:
    • 小計: NT$ 2,400 (僅剩項目 1)
    • 稅額: NT$ 120
    • 總計: NT$ 2,520

預期結果​

  • ✅ 商品項目可正常移除
  • ✅ 價格自動重新計算

✅ Scenario 8: 客戶選擇自動填充​

目標: 驗證客戶資訊自動填充

操作步驟​

  1. 訪問 http://localhost:3000/orders/new
  2. 不要手動填寫配送地址和電話
  3. 在「客戶」下拉選單選擇「李大華」
  4. ✅ 驗證: 配送地址自動填充為「台北市信義區信義路五段 7 號」
  5. ✅ 驗證: 聯絡電話自動填充為「0912-345-678」
  6. 切換客戶到「XX 科技公司」
  7. ✅ 驗證: 配送地址和電話更新為該客戶的資訊

預期結果​

  • ✅ 選擇客戶時自動填充地址和電話
  • ✅ 切換客戶時資訊更新

✅ Scenario 9: 價格即時計算​

目標: 驗證價格即時更新

操作步驟​

  1. 訪問 http://localhost:3000/orders/new
  2. 選擇客戶「李大華」
  3. 添加商品「玫瑰花束（12 朵）」，數量 1
  4. ✅ 驗證: 價格摘要顯示:
    • 小計: NT$ 1,200
    • 稅額: NT$ 60
    • 總計: NT$ 1,260
  5. 將數量改為 3
  6. ✅ 驗證: 價格摘要即時更新為:
    • 小計: NT$ 3,600
    • 稅額: NT$ 180
    • 總計: NT$ 3,780
  7. 將單價從 1200 改為 1000
  8. ✅ 驗證: 價格摘要再次更新為:
    • 小計: NT$ 3,000
    • 稅額: NT$ 150
    • 總計: NT$ 3,150

預期結果​

  • ✅ 修改數量時價格即時更新
  • ✅ 修改單價時價格即時更新
  • ✅ 稅額始終為小計的 5%

✅ Scenario 10: 取消按鈕功能​

目標: 驗證取消操作

操作步驟​

  1. 訪問 http://localhost:3000/orders/new
  2. 填寫部分表單資料
  3. 點擊頂部工具列的「✕」按鈕（取消）
  4. ✅ 驗證: 頁面導航回上一頁
  5. ✅ 驗證: 訂單未被創建

預期結果​

  • ✅ 取消按鈕正常運作
  • ✅ 未創建訂單

✅ Scenario 11: 說明側邊欄顯示​

目標: 驗證右側說明側邊欄內容

操作步驟​

  1. 訪問 http://localhost:3000/orders/new
  2. ✅ 驗證: 右側顯示說明側邊欄（card bg-base-200）
  3. ✅ 驗證: 看到「建立訂單說明」區塊（5 個步驟）
  4. ✅ 驗證: 看到「注意事項」區塊
  5. ✅ 驗證: 看到「相關連結」區塊（客戶管理、商品目錄、訂單列表）
  6. ✅ 驗證: 看到「需要協助」區塊（support email）

預期結果​

  • ✅ 側邊欄內容完整
  • ✅ 連結可點擊
  • ✅ i18n 翻譯正確顯示

測試檢查清單​

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

基本功能​

  • Scenario 1: 創建標準訂單成功
  • Scenario 2: 必填欄位驗證正確
  • Scenario 3: 配送日期驗證（早於今天）
  • Scenario 4: 店休日驗證
  • Scenario 5: 商品數量驗證
  • Scenario 6: 多商品項目功能
  • Scenario 7: 移除商品項目功能
  • Scenario 8: 客戶資訊自動填充
  • Scenario 9: 價格即時計算
  • Scenario 10: 取消按鈕功能
  • Scenario 11: 說明側邊欄顯示

UI/UX​

  • 表單佈局清晰易懂
  • 錯誤訊息顯示在正確位置
  • 載入狀態顯示正確（按鈕顯示「創建中...」）
  • 響應式設計（桌面版可正常使用）
  • DaisyUI 語義色彩正確應用

API​

  • POST /api/v1/orders 正常運作
  • GET /api/v1/customers 正常運作
  • GET /api/v1/products 正常運作
  • 錯誤響應格式正確
  • Console 日誌記錄正確

已知問題​

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

測試結論​

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

最後更新: 2025-12-10