US-302: 客戶列表與搜尋 - 手動測試指南

測試日期: ____________ 測試人員: ____________ 測試環境: 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	王小明	個人	0912-345-678	VIP	NT$ 8,500	啟用
ABC-CUST-000002	李美玲	個人	0923-456-789	Regular	NT$ 2,300	啟用
ABC-CUST-000003	XX 科技公司	企業	02-1234-5678	VVIP	NT$ 45,000	啟用
ABC-CUST-000004	張三	個人	0934-567-890	Regular	NT$ 0	停用
ABC-CUST-000005	陳大華	個人	0945-678-901	VIP	NT$ 12,000	啟用
ABC-CUST-000006	YY 貿易公司	企業	02-8765-4321	VIP	NT$ 15,000	啟用

4. 頁面結構預覽

┌──────────────────────────────────────────────────────────────────┐
│ 客戶管理                                         [+ 新增客戶]    │
├──────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ 🔍 搜尋客戶...                               [🔽 篩選]       │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ [個人] [VIP] [2025-10-01 ~ 2025-10-31]              [清除全部]│ │
│ └──────────────────────────────────────────────────────────────┘ │
├──────────────────────────────────────────────────────────────────┤
│ │ 客戶編號 │ 姓名/公司 │ 類型 │ 等級 │ 電話 │ 累計消費 │ 狀態 │ │
│ ├──────────┼───────────┼──────┼──────┼──────┼──────────┼──────┤ │
│ │ ABC-001  │ 王小明    │ 個人 │ VIP  │ 0912 │ NT$8,500 │ 啟用 │ │
│ │ ABC-002  │ 李美玲    │ 個人 │ 普通 │ 0923 │ NT$2,300 │ 啟用 │ │
│ └──────────────────────────────────────────────────────────────┘ │
├──────────────────────────────────────────────────────────────────┤
│ 顯示 1-20 / 共 50 筆    [◀] 1 2 3 ... 10 [▶]   每頁 [20▼] 筆    │
└──────────────────────────────────────────────────────────────────┘

測試場景

✅ Scenario 1: 客戶列表預設載入

目標: 驗證客戶列表頁面初始載入狀態

操作步驟

登入並導航至客戶列表
- 登入 staff@florist.com
- 訪問 http://localhost:3000/customers
驗證頁面佈局
- ✅ 驗證: 頁面標題為「客戶管理」
- ✅ 驗證: 右上角有「+ 新增客戶」按鈕
- ✅ 驗證: 有搜尋框和篩選按鈕
驗證列表內容
- ✅ 驗證: 預設顯示 20 筆/頁
- ✅ 驗證: 按註冊日期降序排列（最新在上）
- ✅ 驗證: 每筆客戶顯示：客戶編號、姓名/公司、類型、等級、電話、累計消費、最後消費日期、狀態
驗證預設過濾
- ✅ 驗證: 停用客戶預設不顯示
驗證載入狀態
- ✅ 驗證: 載入時顯示 Skeleton 動畫

預期結果

✅ 頁面正常載入
✅ 預設 20 筆/頁，按註冊日期降序
✅ 停用客戶預設隱藏
✅ 欄位資訊完整顯示

✅ Scenario 2: 搜尋客戶（姓名）

目標: 驗證姓名模糊搜尋功能

操作步驟

導航至客戶列表
- 訪問 http://localhost:3000/customers
輸入搜尋關鍵字
- 在搜尋框輸入「王」
- ✅ 驗證: 輸入後等待約 500ms（防抖）
- ✅ 驗證: 搜尋框右側顯示 Spinner
檢查搜尋結果
- ✅ 驗證: 列表僅顯示姓名包含「王」的客戶
- ✅ 驗證: 「王小明」出現在結果中
- ✅ 驗證: 結果數量更新（如「顯示 1-1 / 共 1 筆」）
測試模糊搜尋
- 清空搜尋框，輸入「小明」
- ✅ 驗證: 「王小明」仍出現在結果中
測試不區分大小寫
- 輸入「xx」（小寫）
- ✅ 驗證: 「XX 科技公司」出現在結果中

預期結果

✅ 搜尋功能正常
✅ 支援模糊搜尋
✅ 不區分大小寫
✅ 防抖 500ms 生效

✅ Scenario 3: 搜尋客戶（電話）

目標: 驗證電話號碼搜尋功能

操作步驟

導航至客戶列表
- 訪問 http://localhost:3000/customers
輸入完整電話
- 搜尋框輸入「0912-345-678」
- ✅ 驗證: 「王小明」出現在結果中
輸入部分電話
- 清空搜尋框，輸入「0912」
- ✅ 驗證: 電話以「0912」開頭的客戶出現
輸入中間數字
- 清空搜尋框，輸入「345」
- ✅ 驗證: 電話包含「345」的客戶出現

預期結果

✅ 完整電話搜尋正常
✅ 部分電話搜尋正常
✅ 支援電話中間數字匹配

✅ Scenario 4: 搜尋客戶（公司名稱）

目標: 驗證企業客戶公司名稱搜尋

操作步驟

導航至客戶列表
- 訪問 http://localhost:3000/customers
搜尋公司名稱
- 搜尋框輸入「科技」
- ✅ 驗證: 「XX 科技公司」出現在結果中
- ✅ 驗證: 類型欄位顯示「企業」
搜尋完整公司名
- 清空搜尋框，輸入「YY 貿易公司」
- ✅ 驗證: 「YY 貿易公司」出現在結果中

預期結果

✅ 公司名稱搜尋正常
✅ 支援部分名稱匹配

✅ Scenario 5: 清空搜尋

目標: 驗證清空搜尋後恢復完整列表

操作步驟

先執行搜尋
- 搜尋「王」，看到過濾後結果
清空搜尋框
- 點擊搜尋框右側的「✕」清空按鈕
- ✅ 驗證: 搜尋框清空
- ✅ 驗證: 列表恢復顯示所有客戶
- ✅ 驗證: 結果數量恢復（如「顯示 1-20 / 共 50 筆」）
按鍵盤 Escape 清空
- 輸入「測試」
- 按下 Escape 鍵
- ✅ 驗證: 搜尋框清空，列表恢復

預期結果

✅ 清空按鈕正常
✅ Escape 鍵清空正常
✅ 列表恢復完整

✅ Scenario 6: 依客戶類型過濾

目標: 驗證個人/企業客戶類型過濾

操作步驟

導航至客戶列表
- 訪問 http://localhost:3000/customers
開啟篩選面板
- 點擊「篩選」按鈕
- ✅ 驗證: 篩選面板展開
選擇「個人客戶」
- 點擊客戶類型「個人」
- ✅ 驗證: 列表僅顯示個人客戶
- ✅ 驗證: 出現過濾標籤「個人」
切換到「企業客戶」
- 點擊客戶類型「企業」
- ✅ 驗證: 列表僅顯示企業客戶
- ✅ 驗證: 出現過濾標籤「企業」
- ✅ 驗證: 「XX 科技公司」、「YY 貿易公司」出現
清除類型過濾
- 點擊「個人」或「企業」標籤的「✕」
- ✅ 驗證: 類型過濾清除，列表恢復

預期結果

✅ 個人客戶過濾正常
✅ 企業客戶過濾正常
✅ 過濾標籤顯示正確
✅ 可清除單個過濾條件

✅ Scenario 7: 依客戶等級過濾（多選）

目標: 驗證客戶等級多選過濾

操作步驟

開啟篩選面板
- 點擊「篩選」按鈕
選擇 VIP
- 點擊等級「VIP」
- ✅ 驗證: 列表僅顯示 VIP 客戶
- ✅ 驗證: 「王小明」、「陳大華」、「YY 貿易公司」出現
同時選擇 VVIP
- 再點擊等級「VVIP」
- ✅ 驗證: 列表顯示 VIP 和 VVIP 客戶
- ✅ 驗證: 「XX 科技公司」也出現
- ✅ 驗證: 出現兩個過濾標籤「VIP」「VVIP」
取消 VIP
- 點擊「VIP」標籤的「✕」
- ✅ 驗證: 僅顯示 VVIP 客戶

預期結果

✅ 等級多選過濾正常
✅ 可同時選擇多個等級
✅ 可單獨移除等級過濾

✅ Scenario 8: 組合搜尋與過濾

目標: 驗證搜尋與過濾的組合使用

操作步驟

設定過濾條件
- 開啟篩選面板
- 選擇類型「企業」
- 選擇等級「VIP」
執行搜尋
- 搜尋框輸入「科技」
- ✅ 驗證: 無結果（XX 科技是 VVIP，不是 VIP）
調整過濾
- 將等級改為「VVIP」
- ✅ 驗證: 「XX 科技公司」出現
清除搜尋保留過濾
- 清空搜尋框
- ✅ 驗證: 過濾條件保留（企業 + VVIP）
- ✅ 驗證: 列表顯示所有符合過濾的客戶
測試日期範圍過濾
- 設定註冊日期範圍：2025-10-01 ~ 2025-10-31
- ✅ 驗證: 僅顯示該範圍內註冊的客戶

預期結果

✅ 搜尋與過濾可組合使用
✅ 條件互相疊加（AND 邏輯）
✅ 日期範圍過濾正常

✅ Scenario 9: 清空過濾條件

目標: 驗證清空所有過濾條件

操作步驟

設定多個過濾條件
- 類型：「個人」
- 等級：「VIP」、「VVIP」
- 搜尋：「王」
檢查過濾標籤
- ✅ 驗證: 顯示所有過濾標籤
點擊「清除全部」
- ✅ 驗證: 所有過濾標籤消失
- ✅ 驗證: 搜尋框清空
- ✅ 驗證: 列表恢復顯示所有客戶
驗證 URL 參數
- ✅ 驗證: URL 查詢參數已清除

預期結果

✅ 清除全部功能正常
✅ 所有條件一次清除
✅ URL 同步更新

✅ Scenario 10: 切換每頁筆數

目標: 驗證分頁筆數切換

操作步驟

導航至客戶列表
- 訪問 http://localhost:3000/customers
- ✅ 驗證: 預設顯示 20 筆/頁
切換到 10 筆/頁
- 點擊「每頁 20 筆」下拉選單
- 選擇「10」
- ✅ 驗證: 列表顯示最多 10 筆
- ✅ 驗證: 分頁資訊更新（如「顯示 1-10 / 共 50 筆」）
切換到 50 筆/頁
- 選擇「50」
- ✅ 驗證: 列表顯示最多 50 筆
切換到 100 筆/頁
- 選擇「100」
- ✅ 驗證: 列表顯示最多 100 筆

預期結果

✅ 支援 10/20/50/100 筆/頁
✅ 分頁資訊正確更新
✅ 列表內容正確刷新

✅ Scenario 11: 分頁導航

目標: 驗證分頁導航功能

操作步驟

確認有多頁資料
- 將每頁筆數設為 10
- ✅ 驗證: 總頁數 > 1
點擊下一頁
- 點擊「▶」按鈕
- ✅ 驗證: 顯示第 2 頁資料
- ✅ 驗證: 分頁資訊更新（如「顯示 11-20 / 共 50 筆」）
點擊頁碼
- 點擊頁碼「3」
- ✅ 驗證: 直接跳轉到第 3 頁
點擊上一頁
- 點擊「◀」按鈕
- ✅ 驗證: 返回第 2 頁
在第一頁測試上一頁
- 回到第 1 頁
- ✅ 驗證: 「◀」按鈕禁用
在最後一頁測試下一頁
- 跳轉到最後一頁
- ✅ 驗證: 「▶」按鈕禁用
搜尋後分頁重置
- 跳轉到第 3 頁
- 執行搜尋
- ✅ 驗證: 自動重置到第 1 頁

預期結果

✅ 上一頁/下一頁正常
✅ 頁碼快速跳轉正常
✅ 邊界頁按鈕正確禁用
✅ 搜尋/過濾時自動重置分頁

✅ Scenario 12: 排序切換

目標: 驗證列表排序功能

操作步驟

驗證預設排序
- ✅ 驗證: 預設按註冊日期降序
- ✅ 驗證: 最新註冊的客戶在最上方
按累計消費排序
- 點擊「累計消費」欄位標題
- ✅ 驗證: 列表按累計消費降序排列
- ✅ 驗證: 「XX 科技公司」（NT$ 45,000）在最上方
- ✅ 驗證: 欄位標題顯示排序箭頭「↓」
切換為升序
- 再次點擊「累計消費」欄位標題
- ✅ 驗證: 列表按累計消費升序排列
- ✅ 驗證: 消費最少的客戶在最上方
- ✅ 驗證: 欄位標題顯示排序箭頭「↑」
按姓名排序
- 點擊「姓名/公司」欄位標題
- ✅ 驗證: 按名稱筆劃/字母排序

預期結果

✅ 支援多欄位排序
✅ 升序/降序切換正常
✅ 排序箭頭顯示正確

✅ Scenario 13: 點擊進入詳情頁

目標: 驗證點擊客戶導航至詳情頁

操作步驟

點擊客戶編號
- 點擊「ABC-CUST-000001」
- ✅ 驗證: 頁面導航至 /customers/ABC-CUST-000001
- ✅ 驗證: 顯示「王小明」的詳情資料
返回列表
- 點擊「返回」或瀏覽器上一頁
- ✅ 驗證: 返回客戶列表
- ✅ 驗證: 之前的搜尋/過濾條件保留
點擊客戶姓名
- 點擊「李美玲」姓名
- ✅ 驗證: 同樣導航至詳情頁

預期結果

✅ 點擊客戶編號或姓名可進入詳情
✅ 返回時保留搜尋/過濾狀態

✅ Scenario 14: 響應式設計（手機版）

目標: 驗證手機版卡片模式顯示

操作步驟

開啟開發者工具
- 按 F12 開啟 DevTools
- 切換到手機模式（如 iPhone 14）
驗證佈局變化
- ✅ 驗證: 列表從表格變為卡片模式
- ✅ 驗證: 每張卡片顯示客戶關鍵資訊
- ✅ 驗證: 搜尋框寬度適應螢幕
驗證篩選面板
- 點擊「篩選」按鈕
- ✅ 驗證: 篩選面板以 Drawer 或摺疊方式顯示
- ✅ 驗證: 可正常選擇過濾條件
驗證分頁
- ✅ 驗證: 分頁控制仍可使用
- ✅ 驗證: 觸控操作順暢
驗證卡片點擊
- 點擊任意客戶卡片
- ✅ 驗證: 導航至詳情頁

預期結果

✅ 手機版使用卡片模式
✅ 篩選面板響應式調整
✅ 觸控操作正常

測試檢查清單

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

頁面載入

Scenario 1: 客戶列表預設載入

搜尋功能

Scenario 2: 搜尋客戶（姓名）
Scenario 3: 搜尋客戶（電話）
Scenario 4: 搜尋客戶（公司名稱）
Scenario 5: 清空搜尋

過濾功能

Scenario 6: 依客戶類型過濾
Scenario 7: 依客戶等級過濾（多選）
Scenario 8: 組合搜尋與過濾
Scenario 9: 清空過濾條件

分頁與排序

Scenario 10: 切換每頁筆數
Scenario 11: 分頁導航
Scenario 12: 排序切換

互動與響應式

Scenario 13: 點擊進入詳情頁
Scenario 14: 響應式設計（手機版）

UI/UX

API

狀態與錯誤處理

空搜尋結果顯示「查無符合條件的客戶」
API 錯誤顯示 Toast 通知
停用客戶預設不顯示

安全性

多租戶隔離（只能看到自己租戶的客戶）

已知問題

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

測試結論

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

最後更新: 2025-12-08

測試前準備​

1. 啟動開發伺服器​

2. 測試帳號​

3. 種子數據​

4. 頁面結構預覽​

測試場景​

✅ Scenario 1: 客戶列表預設載入​

操作步驟​

預期結果​

✅ Scenario 2: 搜尋客戶（姓名）​

操作步驟​

預期結果​

✅ Scenario 3: 搜尋客戶（電話）​

操作步驟​

預期結果​

✅ Scenario 4: 搜尋客戶（公司名稱）​

操作步驟​

預期結果​

✅ Scenario 5: 清空搜尋​

操作步驟​

預期結果​

✅ Scenario 6: 依客戶類型過濾​

操作步驟​

預期結果​

✅ Scenario 7: 依客戶等級過濾（多選）​

操作步驟​

預期結果​

✅ Scenario 8: 組合搜尋與過濾​

操作步驟​

預期結果​

✅ Scenario 9: 清空過濾條件​

操作步驟​

預期結果​

✅ Scenario 10: 切換每頁筆數​

操作步驟​

預期結果​

✅ Scenario 11: 分頁導航​

操作步驟​

預期結果​

✅ Scenario 12: 排序切換​

操作步驟​

預期結果​

✅ Scenario 13: 點擊進入詳情頁​

操作步驟​

預期結果​

✅ Scenario 14: 響應式設計（手機版）​

操作步驟​

預期結果​

測試檢查清單​

頁面載入​

搜尋功能​

過濾功能​

分頁與排序​

互動與響應式​

UI/UX​

API​

狀態與錯誤處理​

安全性​

已知問題​

測試結論​

測試前準備

1. 啟動開發伺服器

2. 測試帳號

3. 種子數據

4. 頁面結構預覽

測試場景

✅ Scenario 1: 客戶列表預設載入

操作步驟

預期結果

✅ Scenario 2: 搜尋客戶（姓名）

操作步驟

預期結果

✅ Scenario 3: 搜尋客戶（電話）

操作步驟

預期結果

✅ Scenario 4: 搜尋客戶（公司名稱）

操作步驟

預期結果

✅ Scenario 5: 清空搜尋

操作步驟

預期結果

✅ Scenario 6: 依客戶類型過濾

操作步驟

預期結果

✅ Scenario 7: 依客戶等級過濾（多選）

操作步驟

預期結果

✅ Scenario 8: 組合搜尋與過濾

操作步驟

預期結果

✅ Scenario 9: 清空過濾條件

操作步驟

預期結果

✅ Scenario 10: 切換每頁筆數

操作步驟

預期結果

✅ Scenario 11: 分頁導航

操作步驟

預期結果

✅ Scenario 12: 排序切換

操作步驟

預期結果

✅ Scenario 13: 點擊進入詳情頁

操作步驟

預期結果

✅ Scenario 14: 響應式設計（手機版）

操作步驟

預期結果

測試檢查清單

頁面載入

搜尋功能

過濾功能

分頁與排序

互動與響應式

UI/UX

API

狀態與錯誤處理

安全性

已知問題

測試結論