US-303: 客戶訂單歷史與統計 - 手動測試指南

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

測試前準備

1. 啟動開發伺服器

npm run dev

2. 測試帳號

訪問 http://localhost:3000/login

用戶名	密碼	角色	權限說明
`staff@florist.com`	`Password123!`	ROLE_STAFF	可查看客戶詳情、新增備註
`manager@florist.com`	`Password123!`	ROLE_MANAGER	完整權限

3. 種子數據

Mock API 預設包含以下測試資料：

客戶資料

客戶編號	姓名/公司名	類型	等級	累計消費	訂單數	狀態
ABC-CUST-000001	王小明	個人	VIP	NT$ 8,500	12 筆	啟用
ABC-CUST-000002	李美玲	個人	Regular	NT$ 2,000	3 筆	啟用
ABC-CUST-000003	XX 科技公司	企業	VVIP	NT$ 25,000	20 筆	啟用
ABC-CUST-000004	張三	個人	Regular	NT$ 0	0 筆	啟用

測試用訂單（王小明，cust-001）

訂單編號	日期	金額	狀態
ABC-20251031-0001	2025-10-31	NT$ 1,200	已完成
ABC-20251015-0005	2025-10-15	NT$ 800	已完成
ABC-20251001-0003	2025-10-01	NT$ 1,500	已完成
...	...	...	...
共 12 筆訂單

4. 頁面結構預覽

┌─────────────────────────────────────────────────────────────────┐
│ 客戶詳情     #ABC-CUST-000001           [編輯] [停用] [✕]       │
├─────────────────────────────────────────┬───────────────────────┤
│                                         │                       │
│ ┌─────────────────────────────────────┐ │ ┌───────────────────┐ │
│ │ 📋 基本資訊                    ▼    │ │ │ 📊 統計          │ │
│ │ 類型: 個人客戶  姓名: 王小明        │ │ │ 總消費: NT$8,500 │ │
│ │ 電話: 0912345678  狀態: [啟用]      │ │ │ 訂單數: 12      │ │
│ └─────────────────────────────────────┘ │ │ 最後消費: 10/31 │ │
│                                         │ └───────────────────┘ │
│ ┌─────────────────────────────────────┐ │                       │
│ │ 📊 消費統計                    ▼    │ │ ┌───────────────────┐ │
│ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐    │ │ │ ⚙️ 系統資訊       │ │
│ │ │訂單數│ │累計 │ │平均 │ │最後 │    │ │ │ 編號/建立/更新   │ │
│ │ │ 12  │ │8,500│ │ 708 │ │10/31│    │ │ └───────────────────┘ │
│ │ └─────┘ └─────┘ └─────┘ └─────┘    │ │                       │
│ │                                     │ │ ┌───────────────────┐ │
│ │ 📈 月度消費趨勢（近 12 個月）       │ │ │ 🏷️ 偏好          │ │
│ │ ╔════════════════════════════════╗  │ │ │ [粉色系] [婚禮]  │ │
│ │ ║ ▓▓▓▓▓▓▓  柱狀圖  ▓▓▓▓▓▓▓▓▓▓▓▓ ║  │ │ └───────────────────┘ │
│ │ ╚════════════════════════════════╝  │ │                       │
│ └─────────────────────────────────────┘ │                       │
│                                         │                       │
│ ┌─────────────────────────────────────┐ │                       │
│ │ 📦 訂單歷史              12 筆 ▼   │ │                       │
│ │ ┌───────────────────────────────┐   │ │                       │
│ │ │ ABC-20251031-0001             │   │ │                       │
│ │ │ NT$ 1,200  2025/10/31 [已完成]│   │ │                       │
│ │ └───────────────────────────────┘   │ │                       │
│ │ ┌───────────────────────────────┐   │ │                       │
│ │ │ ABC-20251015-0005             │   │ │                       │
│ │ │ NT$ 800  2025/10/15 [已完成]  │   │ │                       │
│ │ └───────────────────────────────┘   │ │                       │
│ │        [查看所有 12 筆訂單 →]       │ │                       │
│ └─────────────────────────────────────┘ │                       │
│                                         │                       │
│ ┌─────────────────────────────────────┐ │                       │
│ │ 🏆 最常購買商品              Top 3 │ │                       │
│ │ 1️⃣ 玫瑰花束（12朵） ████████ 5次 42%│ │                       │
│ │ 2️⃣ 百合花束（6朵）  █████   3次 25%│ │                       │
│ │ 3️⃣ 祝賀花籃        ████    2次 17%│ │                       │
│ └─────────────────────────────────────┘ │                       │
│                                         │                       │
│ ┌─────────────────────────────────────┐ │                       │
│ │ 📝 客戶備註                    2 則 │ │                       │
│ │ [+ 新增備註]                        │ │                       │
│ │                                     │ │                       │
│ │ ● 2025/11/04 王店員                 │ │                       │
│ │   「不要百合花」                    │ │                       │
│ │                                     │ │                       │
│ │ ● 2025/10/01 張店員                 │ │                       │
│ │   「喜歡粉色玫瑰」                  │ │                       │
│ └─────────────────────────────────────┘ │                       │
│                                         │                       │
└─────────────────────────────────────────┴───────────────────────┘

測試場景

✅ Scenario 1: 查看客戶詳情頁（基本資訊）

目標: 驗證客戶詳情頁正確顯示基本資訊

操作步驟

以 Staff 帳號登入
- 登入 staff@florist.com
導航至客戶列表
- 訪問 http://localhost:3000/customers
點擊客戶進入詳情頁
- 點擊「王小明」進入詳情頁
- ✅ 驗證: URL 為 /customers/{id}
- ✅ 驗證: 頁面標題顯示「客戶詳情」
驗證基本資訊區塊
- ✅ 驗證: 客戶編號顯示 ABC-CUST-000001
- ✅ 驗證: 姓名顯示「王小明」
- ✅ 驗證: 客戶類型顯示「個人客戶」
- ✅ 驗證: 電話顯示 0912345678
- ✅ 驗證: 狀態徽章顯示「啟用」（綠色）
- ✅ 驗證: 等級徽章顯示「VIP」（金色）

預期結果

✅ 客戶基本資訊正確顯示
✅ 狀態和等級徽章樣式正確

✅ Scenario 2: 查看訂單歷史列表（最近 10 筆）

目標: 驗證訂單歷史列表顯示最近 10 筆訂單

操作步驟

進入「王小明」的詳情頁
- 訪問 http://localhost:3000/customers/cust-001
找到「訂單歷史」區塊
- ✅ 驗證: 區塊標題顯示「訂單歷史」
- ✅ 驗證: 摘要顯示「12 筆訂單」
展開訂單歷史區塊
- 點擊區塊標題或展開圖示
- ✅ 驗證: 列表顯示最多 10 筆訂單
- ✅ 驗證: 訂單按日期降序排列（最新在前）
驗證訂單項目資訊
- ✅ 驗證: 每筆訂單顯示訂單編號（ABC-20251031-0001）
- ✅ 驗證: 每筆訂單顯示金額（NT$ 1,200）
- ✅ 驗證: 每筆訂單顯示日期（2025/10/31）
- ✅ 驗證: 每筆訂單顯示狀態徽章（已完成/進行中等）

預期結果

✅ 最近 10 筆訂單正確顯示
✅ 訂單按日期降序排列
✅ 訂單狀態徽章顏色正確

✅ Scenario 3: 點擊「查看所有訂單」

目標: 驗證「查看所有」連結導航正確

操作步驟

進入「王小明」的詳情頁
點擊「查看所有訂單」
- 在訂單歷史區塊底部找到「查看所有 12 筆訂單」連結
- 點擊連結
- ✅ 驗證: 導航至訂單列表頁
- ✅ 驗證: URL 包含客戶 ID 過濾參數
驗證訂單列表
- ✅ 驗證: 訂單列表僅顯示該客戶的訂單
- ✅ 驗證: 顯示全部 12 筆訂單

預期結果

✅ 導航至訂單列表頁
✅ 訂單已按客戶 ID 過濾

✅ Scenario 4: 點擊訂單進入詳情頁

目標: 驗證點擊訂單可進入訂單詳情頁

操作步驟

進入「王小明」的詳情頁
點擊任一訂單項目
- 在訂單歷史列表中點擊第一筆訂單
- ✅ 驗證: 導航至訂單詳情頁
- ✅ 驗證: URL 為 /orders/{orderId}
驗證訂單詳情
- ✅ 驗證: 訂單資訊正確
- ✅ 驗證: 客戶資訊區塊顯示「王小明」

預期結果

✅ 點擊訂單可導航至詳情頁
✅ 訂單詳情頁資訊正確

✅ Scenario 5: 查看消費統計指標

目標: 驗證消費統計卡片正確顯示 4 個指標

操作步驟

進入「王小明」的詳情頁
找到「消費統計」區塊
- ✅ 驗證: 區塊標題顯示「消費統計」
- ✅ 驗證: 摘要顯示累計消費金額
驗證 4 個統計指標
- ✅ 驗證: 「總訂單數」顯示 12
- ✅ 驗證: 「累計消費」顯示 NT$ 8,500
- ✅ 驗證: 「平均訂單金額」顯示 NT$ 708（$8,500 / 12）
- ✅ 驗證: 「最後消費日期」顯示 2025/10/31
驗證業務規則
- ✅ 驗證: 累計消費僅計算「已完成」訂單
- ✅ 驗證: 平均金額 = 累計消費 / 已完成訂單數

預期結果

✅ 4 個統計指標正確顯示
✅ 計算邏輯符合業務規則

✅ Scenario 6: 查看 Top 3 商品

目標: 驗證 Top 3 最常購買商品正確顯示

操作步驟

進入「王小明」的詳情頁
找到「最常購買商品」區塊
- ✅ 驗證: 區塊標題顯示「最常購買商品」
- ✅ 驗證: 摘要顯示「Top 3」
驗證 Top 3 商品列表
- ✅ 驗證: 第 1 名顯示「玫瑰花束（12 朵）」
- ✅ 驗證: 購買次數顯示 5 次
- ✅ 驗證: 佔比顯示 42%
- ✅ 驗證: 進度條長度對應佔比
驗證佔比計算
- 佔比 = 購買次數 / 總訂單數
- ✅ 驗證: 5 / 12 ≈ 42%
驗證排名標記
- ✅ 驗證: 第 1 名有 Primary 顏色圓形標記
- ✅ 驗證: 第 2 名有 Secondary 顏色圓形標記
- ✅ 驗證: 第 3 名有 Accent 顏色圓形標記

預期結果

✅ Top 3 商品正確顯示
✅ 購買次數和佔比計算正確
✅ 進度條視覺化正確

✅ Scenario 7: 查看消費趨勢圖表

目標: 驗證近 12 個月消費趨勢柱狀圖正確顯示

操作步驟

進入「王小明」的詳情頁
找到「消費統計」區塊內的趨勢圖表
- ✅ 驗證: 標題顯示「月度消費趨勢」
- ✅ 驗證: X 軸顯示 12 個月份
- ✅ 驗證: Y 軸顯示金額
驗證圖表資料
- ✅ 驗證: 柱狀圖顯示近 12 個月的消費金額
- ✅ 驗證: 無訂單月份顯示為 $0（柱高為 0）
測試互動
- 將滑鼠 Hover 到柱狀圖上
- ✅ 驗證: 顯示該月份的詳細金額（Tooltip）

預期結果

✅ 12 個月趨勢圖正確顯示
✅ 無訂單月份顯示 $0
✅ Hover 顯示詳細金額

✅ Scenario 8: 查看客戶備註列表

目標: 驗證客戶備註以時間線方式顯示

操作步驟

進入「王小明」的詳情頁
找到「客戶備註」區塊
- ✅ 驗證: 區塊標題顯示「客戶備註」
- ✅ 驗證: 摘要顯示備註數量
驗證備註列表
- ✅ 驗證: 備註以時間線方式顯示
- ✅ 驗證: 備註按時間降序排列（最新在前）
- ✅ 驗證: 每則備註顯示內容
- ✅ 驗證: 每則備註顯示記錄時間
- ✅ 驗證: 每則備註顯示記錄人姓名
驗證時間線樣式
- ✅ 驗證: 左側有時間線圓點
- ✅ 驗證: 圓點之間有連接線

預期結果

✅ 備註時間線正確顯示
✅ 備註內容、時間、記錄人完整

✅ Scenario 9: 新增客戶備註

目標: 驗證新增備註功能並自動記錄時間與人員

操作步驟

進入「王小明」的詳情頁
點擊「新增備註」按鈕
- ✅ 驗證: 出現備註輸入表單
- ✅ 驗證: 輸入框為多行文字區域
輸入備註內容
- 輸入：客戶生日是 5/15，記得送祝賀花束
提交備註
- 點擊「儲存」按鈕
- ✅ 驗證: 顯示 Toast 通知「備註已新增」
- ✅ 驗證: 輸入表單收合
驗證新增的備註
- ✅ 驗證: 備註列表顯示新備註
- ✅ 驗證: 新備註顯示在列表最上方
- ✅ 驗證: 記錄時間為當前時間
- ✅ 驗證: 記錄人顯示當前登入用戶
驗證備註不可刪除
- ✅ 驗證: 備註項目沒有刪除按鈕

預期結果

✅ 備註成功新增
✅ 時間與記錄人自動記錄
✅ 備註不可刪除

✅ Scenario 10: 查看企業客戶詳情

目標: 驗證企業客戶詳情頁顯示額外資訊

操作步驟

導航至企業客戶詳情頁
- 訪問「XX 科技公司」的詳情頁
驗證企業特有欄位
- ✅ 驗證: 顯示「公司名稱」而非「姓名」
- ✅ 驗證: 顯示「統一編號」
- ✅ 驗證: 顯示「產業類別」
- ✅ 驗證: 顯示「公司地址」
- ✅ 驗證: 顯示「月結帳期」（如 Net 30）
驗證聯絡人列表
- ✅ 驗證: 顯示聯絡人區塊
- ✅ 驗證: 顯示聯絡人姓名、職稱、電話、Email
- ✅ 驗證: 主要聯絡人有「主要」標籤
驗證消費統計
- ✅ 驗證: 統計指標與個人客戶一致
- ✅ 驗證: 等級顯示「VVIP」（>= $20,000）

預期結果

✅ 企業客戶特有欄位正確顯示
✅ 聯絡人列表正確
✅ 統計功能正常

✅ Scenario 11: 無訂單客戶空狀態

目標: 驗證新客戶（無訂單）的空狀態顯示

操作步驟

導航至無訂單客戶詳情頁
- 訪問「張三」的詳情頁（累計消費 $0）
驗證統計指標
- ✅ 驗證: 「總訂單數」顯示 0
- ✅ 驗證: 「累計消費」顯示 NT$ 0
- ✅ 驗證: 「平均訂單金額」顯示 NT$ 0 或 -
- ✅ 驗證: 「最後消費日期」顯示 -
驗證訂單歷史區塊
- ✅ 驗證: 顯示空狀態訊息「尚無訂單記錄」
- ✅ 驗證: 顯示訂單空狀態圖示
驗證 Top 3 商品區塊
- ✅ 驗證: 顯示空狀態訊息「暫無購買記錄」
驗證趨勢圖表
- ✅ 驗證: 顯示空狀態或所有月份為 $0

預期結果

✅ 空狀態訊息正確顯示
✅ 不會出現錯誤或異常

✅ Scenario 12: 響應式設計測試

目標: 驗證頁面在不同裝置上的顯示

操作步驟

測試桌面版（寬度 >= 1024px）
- ✅ 驗證: 採用三欄佈局（左側主內容 2 欄 + 右側欄 1 欄）
- ✅ 驗證: 統計卡片為 2x2 網格排列
測試平板版（768px - 1023px）
- 開啟瀏覽器開發者工具
- 調整視窗寬度至 900px
- ✅ 驗證: 主內容區佔滿寬度
- ✅ 驗證: 右側欄移至下方
測試手機版（< 768px）
- 調整視窗寬度至 375px
- ✅ 驗證: 單欄佈局
- ✅ 驗證: 卡片區塊可收合
- ✅ 驗證: 統計卡片變為 2x2 網格（較小）
- ✅ 驗證: 所有文字可讀、按鈕可點擊
測試觸控操作（可選）
- ✅ 驗證: 卡片區塊可點擊展開/收合
- ✅ 驗證: 備註輸入框可正常使用

預期結果

✅ 桌面版三欄佈局
✅ 平板/手機版響應式調整
✅ 所有功能在各裝置可用

測試檢查清單

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

基本顯示

Scenario 1: 查看客戶詳情頁（基本資訊）
Scenario 10: 查看企業客戶詳情
Scenario 11: 無訂單客戶空狀態

訂單歷史

Scenario 2: 查看訂單歷史列表（最近 10 筆）
Scenario 3: 點擊「查看所有訂單」
Scenario 4: 點擊訂單進入詳情頁

消費統計

Scenario 5: 查看消費統計指標
Scenario 6: 查看 Top 3 商品
Scenario 7: 查看消費趨勢圖表

客戶備註

Scenario 8: 查看客戶備註列表
Scenario 9: 新增客戶備註

UI/UX

Scenario 12: 響應式設計測試
卡片區塊展開/收合功能正常
載入中顯示 Skeleton 動畫
Toast 通知正確顯示

API 集成

GET /api/v1/customers/{id} 正常運作
GET /api/v1/customers/{id}/orders 正常運作
GET /api/v1/customers/{id}/stats 正常運作
GET /api/v1/customers/{id}/notes 正常運作
POST /api/v1/customers/{id}/notes 正常運作

錯誤處理

客戶不存在時顯示錯誤訊息
API 請求失敗時顯示錯誤訊息
備註內容為空時顯示驗證提示

安全性

多租戶隔離（只能看到自己租戶的客戶）
訂單歷史僅顯示當前租戶的訂單

已知問題

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

測試結論

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

最後更新: 2025-12-08

測試前準備​

1. 啟動開發伺服器​

2. 測試帳號​

3. 種子數據​

客戶資料​

測試用訂單（王小明，cust-001）​

4. 頁面結構預覽​

測試場景​

✅ Scenario 1: 查看客戶詳情頁（基本資訊）​

操作步驟​

預期結果​

✅ Scenario 2: 查看訂單歷史列表（最近 10 筆）​

操作步驟​

預期結果​

✅ Scenario 3: 點擊「查看所有訂單」​

操作步驟​

預期結果​

✅ Scenario 4: 點擊訂單進入詳情頁​

操作步驟​

預期結果​

✅ Scenario 5: 查看消費統計指標​

操作步驟​

預期結果​

✅ Scenario 6: 查看 Top 3 商品​

操作步驟​

預期結果​

✅ Scenario 7: 查看消費趨勢圖表​

操作步驟​

預期結果​

✅ Scenario 8: 查看客戶備註列表​

操作步驟​

預期結果​

✅ Scenario 9: 新增客戶備註​

操作步驟​

預期結果​

✅ Scenario 10: 查看企業客戶詳情​

操作步驟​

預期結果​

✅ Scenario 11: 無訂單客戶空狀態​

操作步驟​

預期結果​

✅ Scenario 12: 響應式設計測試​

操作步驟​

預期結果​

測試檢查清單​

基本顯示​

訂單歷史​

消費統計​

客戶備註​

UI/UX​

API 集成​

錯誤處理​

安全性​

已知問題​

測試結論​

測試前準備

1. 啟動開發伺服器

2. 測試帳號

3. 種子數據

客戶資料

測試用訂單（王小明，cust-001）

4. 頁面結構預覽

測試場景

✅ Scenario 1: 查看客戶詳情頁（基本資訊）

操作步驟

預期結果

✅ Scenario 2: 查看訂單歷史列表（最近 10 筆）

操作步驟

預期結果

✅ Scenario 3: 點擊「查看所有訂單」

操作步驟

預期結果

✅ Scenario 4: 點擊訂單進入詳情頁

操作步驟

預期結果

✅ Scenario 5: 查看消費統計指標

操作步驟

預期結果

✅ Scenario 6: 查看 Top 3 商品

操作步驟

預期結果

✅ Scenario 7: 查看消費趨勢圖表

操作步驟

預期結果

✅ Scenario 8: 查看客戶備註列表

操作步驟

預期結果

✅ Scenario 9: 新增客戶備註

操作步驟

預期結果

✅ Scenario 10: 查看企業客戶詳情

操作步驟

預期結果

✅ Scenario 11: 無訂單客戶空狀態

操作步驟

預期結果

✅ Scenario 12: 響應式設計測試

操作步驟

預期結果

測試檢查清單

基本顯示

訂單歷史

消費統計

客戶備註

UI/UX

API 集成

錯誤處理

安全性

已知問題

測試結論