US-203: 搜尋與過濾訂單 - 手動測試指南
測試日期: ____________ 測試人員: ____________ 測試環境:
npm run dev(localhost:3000)
測試前準備
1. 啟動開發伺服器
npm run dev
2. 登入測試帳號
測試帳號(店員角色):
- 用戶名:
staff@florist.com - 密碼:
Password123!
3. 準備測試數據
系統 Mock API 已包含種子數據(至少 20 筆訂單),涵蓋:
- 不同狀態(待確認、已確認、設計中等)
- 不同客戶
- 不同配送日期
- 不同金額
頁面結構說明
┌────────────────────────────────────────────────────────────────┐
│ Header Bar (sticky) │
│ [📦 訂單管理] [搜尋框] [重設排序?] [+ 新訂單] │
├───────────────────────────────────────────────┬────────────────┤
│ │ │
│ DataTable │ FilterDrawer │
│ - # 列序號 │ - 訂單狀態 │
│ - 訂單編號(連結) │ - 配送日期 │
│ - 客戶 │ - 金額區間 │
│ - 金額 │ - 分配對象 │
│ - 配送日期 │ │
│ - 狀態(Badge) │ [清空過濾] │
│ - 操作 │ │
│ │ │
│ flex-1 │ shrink-0 │
│ │ hidden md:block│
└───────────────────────────────────────────────┴────────────────┘
│ 手機版:FilterFloatingButton(浮動篩選按鈕) │
└────────────────────────────────────────────────────────────────┘
測試場景
✅ Scenario 1: 導航至訂單列表頁與頁面結構驗證
目標: 驗證訂單列表頁面正常顯示
操作步驟
-
登入後,透過 Application Launcher 開啟「訂單管理」
-
或直接訪問
http://localhost:3000/orders -
✅ 驗證: 看到訂單列表頁面
-
驗證頂部工具列
- ✅ 驗證: 頂部工具列固定 (
sticky top-0 z-40 bg-base-100 border-b border-base-300) - ✅ 驗證: 左側顯示頁面標題(ShoppingBag 圖示 + 「訂單管理」)
- ✅ 驗證: 中間顯示搜尋框(SearchBar 組件)
- ✅ 驗證: 右側顯示「+ 新訂單」按鈕
- ✅ 驗證: 頂部工具列固定 (
-
驗證 DataTable 區域
- ✅ 驗證: DataTable 顯示以下欄位:
#(列序號)- 訂單編號(Link 連結至詳情頁)
- 客戶
- 金額(貨幣格式 NT$)
- 配送日期(yyyy-MM-dd 格式)
- 狀態(OrderStatusBadge)
- 操作(查看、更多選單)
- ✅ 驗證: 預設顯示所有訂單(第 1 頁,20 筆/頁)
- ✅ 驗證: 顯示分頁導航(底部)
- ✅ 驗證: DataTable 顯示以下欄位:
-
驗證右側 FilterDrawer(桌面版)
- ✅ 驗證: 右側顯示過濾抽屜(
hidden md:block,桌面版才顯示) - ✅ 驗證: 包含「Filter」標題與 SlidersHorizontal 圖示
- ✅ 驗證: 包含過濾條件(狀態、日期、金額、分配對象)
- ✅ 驗證: 右側顯示過濾抽屜(
預期結果
- ✅ 訂單列表正常顯示
- ✅ 所有 UI 組件就位
- ✅ 頁面佈局符合規格(DataTable + FilterDrawer)
✅ Scenario 2: 依訂單編號搜尋
目標: 驗證訂單編號搜尋功能
操作步驟
-
在訂單列表頁
-
查看現有訂單編號
- 記下其中一筆訂單編號(例如
ABC-20251104-0001)
- 記下其中一筆訂單編號(例如
-
輸入完整訂單編號
- 在搜尋框輸入
ABC-20251104-0001 - ✅ 驗證: 等待 500ms 後自動搜尋(防抖)
- ✅ 驗證: 列表更新,僅顯示該筆訂單
- 在搜尋框輸入
-
輸入部分訂單編號
- 清空搜尋框
- 輸入
20251104(日期部分) - ✅ 驗證: 顯示所有該日期的訂單
-
清空搜尋
- 點擊搜尋框右側的「清空」按鈕(X 圖示)
- ✅ 驗證: 搜尋框清空
- ✅ 驗證: 列表恢復顯示所有訂單
預期結果
- ✅ 訂單編號搜尋正常
- ✅ 部分匹配正常
- ✅ 清空功能正常
✅ Scenario 3: 依客戶姓名搜尋
目標: 驗證客戶姓名搜尋功能
操作步驟
-
查看現有訂單的客戶姓名
- 記下其中一位客戶姓名(例如「李大華」)
-
輸入完整姓名
- 在搜尋框輸入
李大華 - ✅ 驗證: 顯示該客戶的所有訂單
- 在搜尋框輸入
-
輸入部分姓名
- 清空搜尋框
- 輸入
李 - ✅ 驗證: 顯示所有姓「李」的客戶訂單
-
測試大小寫不敏感(如適用)
- 輸入
李大华(簡體)或LI(拼音) - ✅ 驗證: 搜尋邏輯(Mock API 可能不支援拼音,僅驗證中文)
- 輸入
預期結果
- ✅ 客戶姓名搜尋正常
- ✅ 部分匹配正常
✅ Scenario 4: 依客戶電話搜尋
目標: 驗證電話號碼搜尋功能
操作步驟
-
查看現有訂單的客戶電話
- 記下其中一個電話號碼(例如
0912-345-678)
- 記下其中一個電話號碼(例如
-
輸入完整電話
- 在搜尋框輸入
0912-345-678 - ✅ 驗證: 顯示該電話號碼的訂單
- 在搜尋框輸入
-
輸入無連字符的電話
- 清空搜尋框
- 輸入
0912345678(無連字符) - ✅ 驗證: 仍然找到該訂單(忽略連字符)
-
輸入部分電話號碼
- 清空搜尋框
- 輸入
0912 - ✅ 驗證: 顯示所有以
0912開頭的電話號碼訂單
預期結果
- ✅ 電話號碼搜尋正常
- ✅ 忽略連字符與空格
✅ Scenario 5: 依訂單狀態過濾
目標: 驗證狀態過濾功能
操作步驟
-
展開過濾面板
- 點擊「過濾條件」按鈕或區塊
- ✅ 驗證: 過濾面板展開,顯示所有過濾選項
-
選擇單一狀態
- 在「訂單狀態」下拉選單選擇「待確認」
- ✅ 驗證: 列表更新,僅顯示「待確認」狀態的訂單
- ✅ 驗證: 過濾條件下方顯示已套用標籤「狀態: 待確認」
-
選擇多個狀態(如支援)
- 再勾選「已確認」狀態
- ✅ 驗證: 列表顯示「待確認」和「已確認」兩種狀態的訂單
-
移除單一狀態
- 點擊已套用標籤「狀態: 待確認」右側的 X
- ✅ 驗證: 標籤消失
- ✅ 驗證: 列表更新,僅顯示「已確認」訂單
預期結果
- ✅ 狀態過濾正常
- ✅ 多選支援(如有)
- ✅ 已套用標籤顯示正確
✅ Scenario 6: 依配送日期範圍過濾
目標: 驗證日期範圍過濾功能
操作步驟
-
在過濾面板
-
設定日期範圍
- 「配送日期(起始)」: 選擇今天
- 「配送日期(結束)」: 選擇 7 天後
- ✅ 驗證: 列表更新,僅顯示配送日期在此範圍內的訂單
-
驗證已套用標籤
- ✅ 驗證: 顯示「配送日期: [起始] ~ [結束]」標籤
-
清除日期範圍
- 點擊已套用標籤的 X
- ✅ 驗證: 日期範圍清除,列表恢復顯示所有訂單
預期結果
- ✅ 日期範圍過濾正常
- ✅ 邊界值正確(閉區間)
✅ Scenario 7: 依金額區間過濾
目標: 驗證金額過濾功能
操作步驟
-
在過濾面板
-
設定金額區間
- 「最低金額」: 輸入
1000 - 「最高金額」: 輸入
3000 - ✅ 驗證: 列表更新,僅顯示金額在 NT$1,000 - NT$3,000 的訂單
- 「最低金額」: 輸入
-
驗證已套用標籤
- ✅ 驗證: 顯示「金額: NT$1,000 ~ NT$3,000」標籤
-
測試僅設定最低金額
- 清空「最高金額」
- 保留「最低金額」為
1000 - ✅ 驗證: 顯示所有金額 ≥ NT$1,000 的訂單
預期結果
- ✅ 金額區間過濾正常
- ✅ 僅設定最低或最高金額也能正常運作
✅ Scenario 8: 依分配對象過濾(設計師/送貨員)
目標: 驗證分配對象過濾功能
操作步驟
-
在過濾面板
-
選擇設計師
- 在「分配設計師」下拉選單選擇特定設計師
- ✅ 驗證: 列表更新,僅顯示分配給該設計師的訂單
-
選擇送貨員
- 在「分配送貨員」下拉選單選擇特定送貨員
- ✅ 驗證: 列表更新,僅顯示分配給該送貨員的訂單
-
驗證已套用標籤
- ✅ 驗證: 顯示「設計師: [姓名]」或「送貨員: [姓名]」標籤
預期結果
- ✅ 分配對象過濾正常
- ✅ 已套用標籤正確
✅ Scenario 9: 組合搜尋與過濾(AND 邏輯)
目標: 驗證多個條件組合使用
操作步驟
-
同時使用搜尋和過濾
- 搜尋框輸入
李 - 過濾狀態選擇「已確認」
- 過濾配送日期範圍(例如近 7 天)
- ✅ 驗證: 列表顯示同時符合「客戶姓名包含李」AND「狀態為已確認」AND「配送日期在範圍內」的訂單
- 搜尋框輸入
-
驗證已套用標籤
- ✅ 驗證: 顯示多個標籤(搜尋、狀態、日期)
-
逐一移除條件
- 點擊「狀態: 已確認」標籤的 X
- ✅ 驗證: 狀態過濾移除,但搜尋和日期過濾保留
- ✅ 驗證: 列表更新為符合剩餘條件的訂單
預期結果
- ✅ 組合過濾使用 AND 邏輯
- ✅ 可獨立移除各個條件
✅ Scenario 10: 分頁導航
目標: 驗證分頁功能
操作步驟
-
確保有足夠訂單(至少 30 筆)
-
驗證分頁導航顯示
- ✅ 驗證: 底部顯示分頁導航
- ✅ 驗證: 顯示當前頁碼、總頁數(例如「1 / 2」)
- ✅ 驗證: 顯示「上一頁」「下一頁」按鈕
-
點擊「下一頁」
- 點擊「下一頁」按鈕
- ✅ 驗證: 頁面導航至第 2 頁
- ✅ 驗證: 顯示第 21-40 筆訂單(假設每頁 20 筆)
- ✅ 驗證: URL 包含
?page=2參數
-
點擊頁碼快速跳轉
- 點擊頁碼「1」
- ✅ 驗證: 回到第 1 頁
-
驗證邊界情況
- 在第 1 頁時,「上一頁」按鈕應禁用或隱藏
- 在最後一頁時,「下一頁」按鈕應禁用或隱藏
預期結果
- ✅ 分頁導航正常
- ✅ URL 同步更新
- ✅ 邊界情況處理正確
✅ Scenario 11: 變更每頁筆數
目標: 驗證每頁筆數變更功能
操作步驟
-
在訂單列表頁
-
查看每頁筆數選項
- ✅ 驗證: 看到「每頁筆數」下拉選單(10, 20, 50, 100)
- ✅ 驗證: 預設為 20 筆
-
變更為 10 筆/頁
- 選擇「10」
- ✅ 驗證: 列表更新,僅顯示 10 筆訂單
- ✅ 驗證: 總頁數增加(例如從 2 頁變為 4 頁)
-
變更為 50 筆/頁
- 選擇「50」
- ✅ 驗證: 列表更新,顯示 50 筆訂單(如有)
- ✅ 驗證: 總頁數減少
預期結果
- ✅ 每頁筆數變更正常
- ✅ 總頁數自動重新計算
✅ Scenario 12: 清空所有過濾條件
目標: 驗證「清空過濾」功能
操作步驟
-
套用多個過濾條件
- 搜尋框輸入
李 - 過濾狀態選擇「已確認」
- 設定日期範圍
- 搜尋框輸入
-
驗證已套用標籤
- ✅ 驗證: 顯示 3 個已套用標籤
-
點擊「清空過濾」按鈕
- 點擊過濾面板的「清空過濾」或「重設」按鈕
- ✅ 驗證: 所有已套用標籤消失
- ✅ 驗證: 搜尋框清空
- ✅ 驗證: 所有過濾條件重設為預設值
- ✅ 驗證: 列表恢復顯示所有訂單
預期結果
- ✅ 清空過濾功能正常
- ✅ 列表恢復初始狀態
✅ Scenario 13: 空搜尋結果處理
目標: 驗證無結果時的 UI 顯示
操作步驟
-
輸入不存在的搜尋關鍵字
- 在搜尋框輸入
不存在的訂單編號XXX999 - ✅ 驗證: 列表為空
- ✅ 驗證: 顯示「找不到符合條件的訂單」訊息
- ✅ 驗證: 顯示建議(例如「請嘗試其他關鍵字」或「清空過濾條件」按鈕)
- 在搜尋框輸入
-
點擊「清空過濾」
- ✅ 驗證: 恢復顯示所有訂單
預期結果
- ✅ 空結果顯示友善訊息
- ✅ 提供清空過濾的快速操作
✅ Scenario 14: 響應式設計(手機版)
目標: 驗證手機版搜尋過濾功能
操作步驟
-
切換至手機視圖(開發者工具 → 裝置模擬)
-
訪問
http://localhost:3000/orders -
✅ 驗證: DataTable 改為適合手機的佈局
-
✅ 驗證: 搜尋框在頂部顯示
-
✅ 驗證: 右側 FilterDrawer 隱藏(
hidden md:block) -
✅ 驗證: 浮動篩選按鈕(FilterFloatingButton)出現在右下角
-
✅ 驗證: 分頁導航適合觸控操作
-
測試浮動篩選按鈕
- 點擊浮動篩選按鈕
- ✅ 驗證: 顯示浮動視窗過濾面板
- ✅ 驗證: 浮動視窗包含「Filter」標題和關閉按鈕
- ✅ 驗證: 過濾條件為單欄佈局(
singleColumn)
-
測試搜尋功能
- 輸入搜尋關鍵字
- ✅ 驗證: 搜尋功能正常
-
測試過濾功能
- 選擇過濾條件
- ✅ 驗證: 過濾功能正常
- 點擊關閉按鈕或空白區域關閉浮動視窗
預期結果
- ✅ 手機版佈局正確
- ✅ 浮動篩選按鈕正常運作
- ✅ 所有功能正常運作
✅ Scenario 15: DataTable 欄位排序功能
目標: 驗證 DataTable 多欄排序功能
操作步驟
-
在訂單列表頁
-
單欄排序
- 點擊「配送日期」欄位標題
- ✅ 驗證: 欄位標題顯示排序圖示(▲ 或 ▼)
- ✅ 驗證: 訂單列表按配送日期排序
- 再次點擊「配送日期」
- ✅ 驗證: 排序方向切換(升序 ↔ 降序)
-
多欄排序
- 按住 Shift 並點擊「金額」欄位標題
- ✅ 驗證: 「金額」欄位也顯示排序圖示
- ✅ 驗證: 訂單先按配送日期排序,再按金額排序
- ✅ 驗證: 頂部顯示「重設排序」按鈕並顯示排序欄位數量
-
重設排序
- 點擊「重設排序 (2)」按鈕
- ✅ 驗證: 排序恢復預設(按配送日期升序)
- ✅ 驗證: 「重設排序」按鈕消失
預期結果
- ✅ 單欄排序正常
- ✅ 多欄排序正常
- ✅ 重設排序功能正常
✅ Scenario 16: DataTable 欄位顯示/隱藏功能
目標: 驗證 DataTable 欄位顯示控制功能
操作步驟
-
在訂單列表頁
-
找到欄位顯示選單
- 在 DataTable 表頭找到欄位顯示選單按鈕(通常在右上角或表頭區域)
- 點擊打開選單
- ✅ 驗證: 顯示可切換的欄位列表
-
隱藏欄位
- 取消勾選「客戶」欄位
- ✅ 驗證: 「客戶」欄位從表格中消失
- 取消勾選「配送日期」欄位
- ✅ 驗證: 「配送日期」欄位也消失
-
驗證不可隱藏欄位
- ✅ 驗證: 「訂單編號」欄位無法取消勾選(
enableHiding: false) - ✅ 驗證: 「操作」欄位無法取消勾選
- ✅ 驗證: 「訂單編號」欄位無法取消勾選(
-
恢復欄位
- 重新勾選「客戶」和「配送日期」
- ✅ 驗證: 欄位重新顯示
預期結果
- ✅ 欄位顯示/隱藏功能正常
- ✅ 主要欄位(訂單編號、操作)不可隱藏
✅ Scenario 17: DataTable 欄位拖曳排序功能
目標: 驗證 DataTable 欄位順序調整功能
操作步驟
-
在訂單列表頁
-
拖曳欄位調整順序
- 將滑鼠移至「客戶」欄位標題
- 按住並拖曳至「金額」欄位之後
- ✅ 驗證: 欄位順序改變
- ✅ 驗證: 表格重新渲染,顯示新的欄位順序
-
驗證不可拖曳欄位
- 嘗試拖曳「操作」欄位
- ✅ 驗證: 「操作」欄位無法被拖曳(
enableColumnDragging: false)
-
刷新頁面測試持久化
- 刷新頁面(F5)
- ✅ 驗證: 欄位順序保持(Redux 狀態持久化)
預期結果
- ✅ 欄位拖曳排序正常
- ✅ 操作欄位固定不可移動
- ✅ 欄位順序跨頁面持久化
✅ Scenario 18: 操作欄位功能
目標: 驗證訂單操作功能(查看、編輯、複製、刪除)
操作步驟
-
在訂單列表頁
-
查看訂單
- 點擊某筆訂單的「查看」按鈕(Eye 圖示)
- ✅ 驗證: 導航至該訂單的詳情頁面
-
返回列表並測試更多選單
- 返回訂單列表頁
- 點擊「更多」按鈕(MoreVertical 圖示)
- ✅ 驗證: 顯示下拉選單包含:
- 編輯(Pencil 圖示)
- 複製(Copy 圖示)
- 刪除(Trash2 圖示,紅色)
-
測試編輯功能
- 點擊「編輯」
- ✅ 驗證: 導航至訂單詳情頁(可編輯模式)
-
測試複製功能
- 返回列表,點擊「更多」→「複製」
- ✅ 驗證: 導航至新訂單頁面,並帶有
copyFromId參數
-
測試刪除功能
- 返回列表,點擊「更多」→「刪除」
- ✅ 驗證: 顯示確認對話框「Delete order {orderNumber}?」
- 點擊「取消」
- ✅ 驗證: 對話框關閉,訂單未被刪除
預期結果
- ✅ 查看按鈕正常導航
- ✅ 下拉選單功能正常
- ✅ 刪除確認對話框正常
✅ Scenario 19: Redux 狀態持久化
目標: 驗證搜尋、過濾、排序、分頁狀態跨頁面持久化
操作步驟
-
在訂單列表頁
-
設定多個狀態
- 在搜尋框輸入
ABC - 選擇過濾狀態「已確認」
- 點擊「金額」欄位排序
- 切換至第 2 頁
- 在搜尋框輸入
-
離開並返回頁面
- 點擊其他頁面(例如「客戶管理」)
- 再次點擊「訂單管理」
- ✅ 驗證: 搜尋框仍顯示
ABC - ✅ 驗證: 過濾狀態仍為「已確認」
- ✅ 驗證: 排序仍為「金額」
- ✅ 驗證: 頁碼仍在第 2 頁
-
刷新頁面測試
- 刷新頁面(F5)
- ✅ 驗證: 所有狀態保持(若有啟用 redux-persist)
-
打開 Redux DevTools 驗證
- 打開瀏覽器 Redux DevTools
- ✅ 驗證:
state.sales.orderFinder包含:searchTerm: 'ABC'filters.status: ['CONFIRMED']sorting: [{id: 'total', desc: false}]currentPage: 2
預期結果
- ✅ 狀態跨頁面保持
- ✅ Redux Store 正確記錄狀態
✅ Scenario 20: 智能格式化顯示
目標: 驗證 DataTable 智能格式化功能
操作步驟
-
在訂單列表頁
-
驗證數字格式化
- 檢查「金額」欄位
- ✅ 驗證: 金額顯示為貨幣格式(例如
NT$1,500) - ✅ 驗證: 金額欄位靠右對齊
-
驗證日期格式化
- 檢查「配送日期」欄位
- ✅ 驗證: 日期顯示為
yyyy-MM-dd格式(例如2025-12-05)
-
驗證空值處理
- 如有訂單沒有配送日期
- ✅ 驗證: 顯示
-而非空白或null
-
驗證列序號
- ✅ 驗證: 第一欄顯示列序號(#)
- ✅ 驗證: 序號連續(1, 2, 3...)
預期結果
- ✅ 貨幣格式化正確(NT$ + 千分位)
- ✅ 日期格式化正確
- ✅ 空值顯示友善
- ✅ 列序號顯示正確
測試檢查清單
完成所有測試場景後,請勾選以下項目:
基本功能
- 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: 響應式設計(手機版)
- Scenario 15: DataTable 欄位排序功能
- Scenario 16: DataTable 欄位顯示/隱藏功能
- Scenario 17: DataTable 欄位拖曳排序功能
- Scenario 18: 操作欄位功能
- Scenario 19: Redux 狀態持久化
- Scenario 20: 智能格式化顯示
UI/UX
- 頂部工具列固定(sticky)顯示正確
- 搜尋框防抖功能(500ms)
- 清空搜尋按鈕顯示(X 圖示)
- 已套用標籤清晰顯示
- FilterDrawer 桌面版顯示正確
- FilterFloatingButton 手機版顯示正確
- 重設排序按鈕動態顯示
- 分頁導航清晰易用
- 空結果顯示友善訊息
- DaisyUI 語義色彩正確應用
DataTable 功能
- 欄位拖曳排序
- 欄位顯示/隱藏
- 多欄排序
- 智能格式化(貨幣、日期)
- 列序號顯示
- 不可隱藏欄位(訂單編號、操作)
- 不可拖曳欄位(操作)
響應式設計
- 桌面版 DataTable + FilterDrawer 佈局
- 手機版 FilterFloatingButton + 浮動視窗
- 過濾面板在手機版為單欄佈局
- 分頁導航適合觸控
Redux 狀態管理
- searchTerm 狀態持久化
- filters 狀態持久化
- sorting 狀態持久化
- columnOrder 狀態持久化
- columnVisibility 狀態持久化
- currentPage 狀態持久化
- pageSize 狀態持久化
API
- GET /api/v1/orders 正常運作
- Predicate 查詢條件正確(like, in, ge, le, eq)
- 排序參數正確(Spring Pageable 格式)
- 錯誤響應格式正確
已知問題
記錄測試過程中發現的問題:
測試結論
- 測試通過: ☐ 是 / ☐ 否
- 備註: ___________________________________________________________
- 測試人員簽名: ________________ 日期: ________________
最後更新: 2025-12-10