跳至主要内容

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: 導航至訂單列表頁與頁面結構驗證

目標: 驗證訂單列表頁面正常顯示

操作步驟

  1. 登入後,透過 Application Launcher 開啟「訂單管理」

  2. 或直接訪問 http://localhost:3000/orders

  3. ✅ 驗證: 看到訂單列表頁面

  4. 驗證頂部工具列

    • ✅ 驗證: 頂部工具列固定 (sticky top-0 z-40 bg-base-100 border-b border-base-300)
    • ✅ 驗證: 左側顯示頁面標題(ShoppingBag 圖示 + 「訂單管理」)
    • ✅ 驗證: 中間顯示搜尋框(SearchBar 組件)
    • ✅ 驗證: 右側顯示「+ 新訂單」按鈕
  5. 驗證 DataTable 區域

    • ✅ 驗證: DataTable 顯示以下欄位:
      • #(列序號)
      • 訂單編號(Link 連結至詳情頁)
      • 客戶
      • 金額(貨幣格式 NT$)
      • 配送日期(yyyy-MM-dd 格式)
      • 狀態(OrderStatusBadge)
      • 操作(查看、更多選單)
    • ✅ 驗證: 預設顯示所有訂單(第 1 頁,20 筆/頁)
    • ✅ 驗證: 顯示分頁導航(底部)
  6. 驗證右側 FilterDrawer(桌面版)

    • ✅ 驗證: 右側顯示過濾抽屜(hidden md:block,桌面版才顯示)
    • ✅ 驗證: 包含「Filter」標題與 SlidersHorizontal 圖示
    • ✅ 驗證: 包含過濾條件(狀態、日期、金額、分配對象)

預期結果

  • ✅ 訂單列表正常顯示
  • ✅ 所有 UI 組件就位
  • ✅ 頁面佈局符合規格(DataTable + FilterDrawer)

✅ Scenario 2: 依訂單編號搜尋

目標: 驗證訂單編號搜尋功能

操作步驟

  1. 在訂單列表頁

  2. 查看現有訂單編號

    • 記下其中一筆訂單編號(例如 ABC-20251104-0001
  3. 輸入完整訂單編號

    • 在搜尋框輸入 ABC-20251104-0001
    • ✅ 驗證: 等待 500ms 後自動搜尋(防抖)
    • ✅ 驗證: 列表更新,僅顯示該筆訂單
  4. 輸入部分訂單編號

    • 清空搜尋框
    • 輸入 20251104(日期部分)
    • ✅ 驗證: 顯示所有該日期的訂單
  5. 清空搜尋

    • 點擊搜尋框右側的「清空」按鈕(X 圖示)
    • ✅ 驗證: 搜尋框清空
    • ✅ 驗證: 列表恢復顯示所有訂單

預期結果

  • ✅ 訂單編號搜尋正常
  • ✅ 部分匹配正常
  • ✅ 清空功能正常

✅ Scenario 3: 依客戶姓名搜尋

目標: 驗證客戶姓名搜尋功能

操作步驟

  1. 查看現有訂單的客戶姓名

    • 記下其中一位客戶姓名(例如「李大華」)
  2. 輸入完整姓名

    • 在搜尋框輸入 李大華
    • ✅ 驗證: 顯示該客戶的所有訂單
  3. 輸入部分姓名

    • 清空搜尋框
    • 輸入
    • ✅ 驗證: 顯示所有姓「李」的客戶訂單
  4. 測試大小寫不敏感(如適用)

    • 輸入 李大华(簡體)或 LI(拼音)
    • ✅ 驗證: 搜尋邏輯(Mock API 可能不支援拼音,僅驗證中文)

預期結果

  • ✅ 客戶姓名搜尋正常
  • ✅ 部分匹配正常

✅ Scenario 4: 依客戶電話搜尋

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

操作步驟

  1. 查看現有訂單的客戶電話

    • 記下其中一個電話號碼(例如 0912-345-678
  2. 輸入完整電話

    • 在搜尋框輸入 0912-345-678
    • ✅ 驗證: 顯示該電話號碼的訂單
  3. 輸入無連字符的電話

    • 清空搜尋框
    • 輸入 0912345678(無連字符)
    • ✅ 驗證: 仍然找到該訂單(忽略連字符)
  4. 輸入部分電話號碼

    • 清空搜尋框
    • 輸入 0912
    • ✅ 驗證: 顯示所有以 0912 開頭的電話號碼訂單

預期結果

  • ✅ 電話號碼搜尋正常
  • ✅ 忽略連字符與空格

✅ Scenario 5: 依訂單狀態過濾

目標: 驗證狀態過濾功能

操作步驟

  1. 展開過濾面板

    • 點擊「過濾條件」按鈕或區塊
    • ✅ 驗證: 過濾面板展開,顯示所有過濾選項
  2. 選擇單一狀態

    • 在「訂單狀態」下拉選單選擇「待確認」
    • ✅ 驗證: 列表更新,僅顯示「待確認」狀態的訂單
    • ✅ 驗證: 過濾條件下方顯示已套用標籤「狀態: 待確認」
  3. 選擇多個狀態(如支援)

    • 再勾選「已確認」狀態
    • ✅ 驗證: 列表顯示「待確認」和「已確認」兩種狀態的訂單
  4. 移除單一狀態

    • 點擊已套用標籤「狀態: 待確認」右側的 X
    • ✅ 驗證: 標籤消失
    • ✅ 驗證: 列表更新,僅顯示「已確認」訂單

預期結果

  • ✅ 狀態過濾正常
  • ✅ 多選支援(如有)
  • ✅ 已套用標籤顯示正確

✅ Scenario 6: 依配送日期範圍過濾

目標: 驗證日期範圍過濾功能

操作步驟

  1. 在過濾面板

  2. 設定日期範圍

    • 「配送日期(起始)」: 選擇今天
    • 「配送日期(結束)」: 選擇 7 天後
    • ✅ 驗證: 列表更新,僅顯示配送日期在此範圍內的訂單
  3. 驗證已套用標籤

    • ✅ 驗證: 顯示「配送日期: [起始] ~ [結束]」標籤
  4. 清除日期範圍

    • 點擊已套用標籤的 X
    • ✅ 驗證: 日期範圍清除,列表恢復顯示所有訂單

預期結果

  • ✅ 日期範圍過濾正常
  • ✅ 邊界值正確(閉區間)

✅ Scenario 7: 依金額區間過濾

目標: 驗證金額過濾功能

操作步驟

  1. 在過濾面板

  2. 設定金額區間

    • 「最低金額」: 輸入 1000
    • 「最高金額」: 輸入 3000
    • ✅ 驗證: 列表更新,僅顯示金額在 NT$1,000 - NT$3,000 的訂單
  3. 驗證已套用標籤

    • ✅ 驗證: 顯示「金額: NT$1,000 ~ NT$3,000」標籤
  4. 測試僅設定最低金額

    • 清空「最高金額」
    • 保留「最低金額」為 1000
    • ✅ 驗證: 顯示所有金額 ≥ NT$1,000 的訂單

預期結果

  • ✅ 金額區間過濾正常
  • ✅ 僅設定最低或最高金額也能正常運作

✅ Scenario 8: 依分配對象過濾(設計師/送貨員)

目標: 驗證分配對象過濾功能

操作步驟

  1. 在過濾面板

  2. 選擇設計師

    • 在「分配設計師」下拉選單選擇特定設計師
    • ✅ 驗證: 列表更新,僅顯示分配給該設計師的訂單
  3. 選擇送貨員

    • 在「分配送貨員」下拉選單選擇特定送貨員
    • ✅ 驗證: 列表更新,僅顯示分配給該送貨員的訂單
  4. 驗證已套用標籤

    • ✅ 驗證: 顯示「設計師: [姓名]」或「送貨員: [姓名]」標籤

預期結果

  • ✅ 分配對象過濾正常
  • ✅ 已套用標籤正確

✅ Scenario 9: 組合搜尋與過濾(AND 邏輯)

目標: 驗證多個條件組合使用

操作步驟

  1. 同時使用搜尋和過濾

    • 搜尋框輸入
    • 過濾狀態選擇「已確認」
    • 過濾配送日期範圍(例如近 7 天)
    • ✅ 驗證: 列表顯示同時符合「客戶姓名包含李」AND「狀態為已確認」AND「配送日期在範圍內」的訂單
  2. 驗證已套用標籤

    • ✅ 驗證: 顯示多個標籤(搜尋、狀態、日期)
  3. 逐一移除條件

    • 點擊「狀態: 已確認」標籤的 X
    • ✅ 驗證: 狀態過濾移除,但搜尋和日期過濾保留
    • ✅ 驗證: 列表更新為符合剩餘條件的訂單

預期結果

  • ✅ 組合過濾使用 AND 邏輯
  • ✅ 可獨立移除各個條件

✅ Scenario 10: 分頁導航

目標: 驗證分頁功能

操作步驟

  1. 確保有足夠訂單(至少 30 筆)

  2. 驗證分頁導航顯示

    • ✅ 驗證: 底部顯示分頁導航
    • ✅ 驗證: 顯示當前頁碼、總頁數(例如「1 / 2」)
    • ✅ 驗證: 顯示「上一頁」「下一頁」按鈕
  3. 點擊「下一頁」

    • 點擊「下一頁」按鈕
    • ✅ 驗證: 頁面導航至第 2 頁
    • ✅ 驗證: 顯示第 21-40 筆訂單(假設每頁 20 筆)
    • ✅ 驗證: URL 包含 ?page=2 參數
  4. 點擊頁碼快速跳轉

    • 點擊頁碼「1」
    • ✅ 驗證: 回到第 1 頁
  5. 驗證邊界情況

    • 在第 1 頁時,「上一頁」按鈕應禁用或隱藏
    • 在最後一頁時,「下一頁」按鈕應禁用或隱藏

預期結果

  • ✅ 分頁導航正常
  • ✅ URL 同步更新
  • ✅ 邊界情況處理正確

✅ Scenario 11: 變更每頁筆數

目標: 驗證每頁筆數變更功能

操作步驟

  1. 在訂單列表頁

  2. 查看每頁筆數選項

    • ✅ 驗證: 看到「每頁筆數」下拉選單(10, 20, 50, 100)
    • ✅ 驗證: 預設為 20 筆
  3. 變更為 10 筆/頁

    • 選擇「10」
    • ✅ 驗證: 列表更新,僅顯示 10 筆訂單
    • ✅ 驗證: 總頁數增加(例如從 2 頁變為 4 頁)
  4. 變更為 50 筆/頁

    • 選擇「50」
    • ✅ 驗證: 列表更新,顯示 50 筆訂單(如有)
    • ✅ 驗證: 總頁數減少

預期結果

  • ✅ 每頁筆數變更正常
  • ✅ 總頁數自動重新計算

✅ Scenario 12: 清空所有過濾條件

目標: 驗證「清空過濾」功能

操作步驟

  1. 套用多個過濾條件

    • 搜尋框輸入
    • 過濾狀態選擇「已確認」
    • 設定日期範圍
  2. 驗證已套用標籤

    • ✅ 驗證: 顯示 3 個已套用標籤
  3. 點擊「清空過濾」按鈕

    • 點擊過濾面板的「清空過濾」或「重設」按鈕
    • ✅ 驗證: 所有已套用標籤消失
    • ✅ 驗證: 搜尋框清空
    • ✅ 驗證: 所有過濾條件重設為預設值
    • ✅ 驗證: 列表恢復顯示所有訂單

預期結果

  • ✅ 清空過濾功能正常
  • ✅ 列表恢復初始狀態

✅ Scenario 13: 空搜尋結果處理

目標: 驗證無結果時的 UI 顯示

操作步驟

  1. 輸入不存在的搜尋關鍵字

    • 在搜尋框輸入 不存在的訂單編號XXX999
    • ✅ 驗證: 列表為空
    • ✅ 驗證: 顯示「找不到符合條件的訂單」訊息
    • ✅ 驗證: 顯示建議(例如「請嘗試其他關鍵字」或「清空過濾條件」按鈕)
  2. 點擊「清空過濾」

    • ✅ 驗證: 恢復顯示所有訂單

預期結果

  • ✅ 空結果顯示友善訊息
  • ✅ 提供清空過濾的快速操作

✅ Scenario 14: 響應式設計(手機版)

目標: 驗證手機版搜尋過濾功能

操作步驟

  1. 切換至手機視圖(開發者工具 → 裝置模擬)

  2. 訪問 http://localhost:3000/orders

  3. ✅ 驗證: DataTable 改為適合手機的佈局

  4. ✅ 驗證: 搜尋框在頂部顯示

  5. ✅ 驗證: 右側 FilterDrawer 隱藏(hidden md:block

  6. ✅ 驗證: 浮動篩選按鈕(FilterFloatingButton)出現在右下角

  7. ✅ 驗證: 分頁導航適合觸控操作

  8. 測試浮動篩選按鈕

    • 點擊浮動篩選按鈕
    • ✅ 驗證: 顯示浮動視窗過濾面板
    • ✅ 驗證: 浮動視窗包含「Filter」標題和關閉按鈕
    • ✅ 驗證: 過濾條件為單欄佈局(singleColumn
  9. 測試搜尋功能

    • 輸入搜尋關鍵字
    • ✅ 驗證: 搜尋功能正常
  10. 測試過濾功能

    • 選擇過濾條件
    • ✅ 驗證: 過濾功能正常
    • 點擊關閉按鈕或空白區域關閉浮動視窗

預期結果

  • ✅ 手機版佈局正確
  • ✅ 浮動篩選按鈕正常運作
  • ✅ 所有功能正常運作

✅ Scenario 15: DataTable 欄位排序功能

目標: 驗證 DataTable 多欄排序功能

操作步驟

  1. 在訂單列表頁

  2. 單欄排序

    • 點擊「配送日期」欄位標題
    • ✅ 驗證: 欄位標題顯示排序圖示(▲ 或 ▼)
    • ✅ 驗證: 訂單列表按配送日期排序
    • 再次點擊「配送日期」
    • ✅ 驗證: 排序方向切換(升序 ↔ 降序)
  3. 多欄排序

    • 按住 Shift 並點擊「金額」欄位標題
    • ✅ 驗證: 「金額」欄位也顯示排序圖示
    • ✅ 驗證: 訂單先按配送日期排序,再按金額排序
    • ✅ 驗證: 頂部顯示「重設排序」按鈕並顯示排序欄位數量
  4. 重設排序

    • 點擊「重設排序 (2)」按鈕
    • ✅ 驗證: 排序恢復預設(按配送日期升序)
    • ✅ 驗證: 「重設排序」按鈕消失

預期結果

  • ✅ 單欄排序正常
  • ✅ 多欄排序正常
  • ✅ 重設排序功能正常

✅ Scenario 16: DataTable 欄位顯示/隱藏功能

目標: 驗證 DataTable 欄位顯示控制功能

操作步驟

  1. 在訂單列表頁

  2. 找到欄位顯示選單

    • 在 DataTable 表頭找到欄位顯示選單按鈕(通常在右上角或表頭區域)
    • 點擊打開選單
    • ✅ 驗證: 顯示可切換的欄位列表
  3. 隱藏欄位

    • 取消勾選「客戶」欄位
    • ✅ 驗證: 「客戶」欄位從表格中消失
    • 取消勾選「配送日期」欄位
    • ✅ 驗證: 「配送日期」欄位也消失
  4. 驗證不可隱藏欄位

    • ✅ 驗證: 「訂單編號」欄位無法取消勾選(enableHiding: false
    • ✅ 驗證: 「操作」欄位無法取消勾選
  5. 恢復欄位

    • 重新勾選「客戶」和「配送日期」
    • ✅ 驗證: 欄位重新顯示

預期結果

  • ✅ 欄位顯示/隱藏功能正常
  • ✅ 主要欄位(訂單編號、操作)不可隱藏

✅ Scenario 17: DataTable 欄位拖曳排序功能

目標: 驗證 DataTable 欄位順序調整功能

操作步驟

  1. 在訂單列表頁

  2. 拖曳欄位調整順序

    • 將滑鼠移至「客戶」欄位標題
    • 按住並拖曳至「金額」欄位之後
    • ✅ 驗證: 欄位順序改變
    • ✅ 驗證: 表格重新渲染,顯示新的欄位順序
  3. 驗證不可拖曳欄位

    • 嘗試拖曳「操作」欄位
    • ✅ 驗證: 「操作」欄位無法被拖曳(enableColumnDragging: false
  4. 刷新頁面測試持久化

    • 刷新頁面(F5)
    • ✅ 驗證: 欄位順序保持(Redux 狀態持久化)

預期結果

  • ✅ 欄位拖曳排序正常
  • ✅ 操作欄位固定不可移動
  • ✅ 欄位順序跨頁面持久化

✅ Scenario 18: 操作欄位功能

目標: 驗證訂單操作功能(查看、編輯、複製、刪除)

操作步驟

  1. 在訂單列表頁

  2. 查看訂單

    • 點擊某筆訂單的「查看」按鈕(Eye 圖示)
    • ✅ 驗證: 導航至該訂單的詳情頁面
  3. 返回列表並測試更多選單

    • 返回訂單列表頁
    • 點擊「更多」按鈕(MoreVertical 圖示)
    • ✅ 驗證: 顯示下拉選單包含:
      • 編輯(Pencil 圖示)
      • 複製(Copy 圖示)
      • 刪除(Trash2 圖示,紅色)
  4. 測試編輯功能

    • 點擊「編輯」
    • ✅ 驗證: 導航至訂單詳情頁(可編輯模式)
  5. 測試複製功能

    • 返回列表,點擊「更多」→「複製」
    • ✅ 驗證: 導航至新訂單頁面,並帶有 copyFromId 參數
  6. 測試刪除功能

    • 返回列表,點擊「更多」→「刪除」
    • ✅ 驗證: 顯示確認對話框「Delete order {orderNumber}?」
    • 點擊「取消」
    • ✅ 驗證: 對話框關閉,訂單未被刪除

預期結果

  • ✅ 查看按鈕正常導航
  • ✅ 下拉選單功能正常
  • ✅ 刪除確認對話框正常

✅ Scenario 19: Redux 狀態持久化

目標: 驗證搜尋、過濾、排序、分頁狀態跨頁面持久化

操作步驟

  1. 在訂單列表頁

  2. 設定多個狀態

    • 在搜尋框輸入 ABC
    • 選擇過濾狀態「已確認」
    • 點擊「金額」欄位排序
    • 切換至第 2 頁
  3. 離開並返回頁面

    • 點擊其他頁面(例如「客戶管理」)
    • 再次點擊「訂單管理」
    • ✅ 驗證: 搜尋框仍顯示 ABC
    • ✅ 驗證: 過濾狀態仍為「已確認」
    • ✅ 驗證: 排序仍為「金額」
    • ✅ 驗證: 頁碼仍在第 2 頁
  4. 刷新頁面測試

    • 刷新頁面(F5)
    • ✅ 驗證: 所有狀態保持(若有啟用 redux-persist)
  5. 打開 Redux DevTools 驗證

    • 打開瀏覽器 Redux DevTools
    • ✅ 驗證: state.sales.orderFinder 包含:
      • searchTerm: 'ABC'
      • filters.status: ['CONFIRMED']
      • sorting: [{id: 'total', desc: false}]
      • currentPage: 2

預期結果

  • ✅ 狀態跨頁面保持
  • ✅ Redux Store 正確記錄狀態

✅ Scenario 20: 智能格式化顯示

目標: 驗證 DataTable 智能格式化功能

操作步驟

  1. 在訂單列表頁

  2. 驗證數字格式化

    • 檢查「金額」欄位
    • ✅ 驗證: 金額顯示為貨幣格式(例如 NT$1,500
    • ✅ 驗證: 金額欄位靠右對齊
  3. 驗證日期格式化

    • 檢查「配送日期」欄位
    • ✅ 驗證: 日期顯示為 yyyy-MM-dd 格式(例如 2025-12-05
  4. 驗證空值處理

    • 如有訂單沒有配送日期
    • ✅ 驗證: 顯示 - 而非空白或 null
  5. 驗證列序號

    • ✅ 驗證: 第一欄顯示列序號(#)
    • ✅ 驗證: 序號連續(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