跳至主要内容

SBE Scenario 3: 組合搜尋與過濾

場景描述​

店員同時使用搜尋與過濾功能，並搭配分頁導航，快速找到符合多個條件的訂單。

Given（前置條件）​

系統狀態​

  • 當前日期: 2025-11-03
  • 當前租戶: ABC (ABC 花店)
  • 已登入用戶: 張店員 (ROLE_SALES)

測試資料​

現有訂單（共 50 筆）

  • 客戶姓氏為「李」的訂單: 15 筆
    • 狀態為「已確認」: 5 筆
    • 狀態為「設計中」: 3 筆
    • 狀態為「待確認」: 7 筆
  • 客戶姓氏為「王」的訂單: 20 筆
  • 客戶姓氏為「張」的訂單: 15 筆

When（執行操作）​

測試案例 1: 搜尋 + 狀態過濾​

步驟 1: 輸入搜尋關鍵字​

  • 店員在搜尋框輸入「李」（搜尋客戶姓名）

步驟 2: 選擇過濾條件​

  • 店員在「狀態」下拉選單中勾選「已確認」

步驟 3: 套用過濾​

  • 店員點擊「套用過濾」按鈕

Then（預期結果 - 測試案例 1）​

API 請求​

端點: GET /api/v1/orders?search=李&status=confirmed

API 響應​

{
  "orders": [
    {
      "orderId": "ABC-20251101-0005",
      "customer": {
        "name": "李大華"
      },
      "status": "confirmed",
      "deliveryDate": "2025-11-05",
      "totalAmount": 2520
    },
    {
      "orderId": "ABC-20251102-0007",
      "customer": {
        "name": "李小明"
      },
      "status": "confirmed",
      "deliveryDate": "2025-11-07",
      "totalAmount": 3500
    },
    {
      "orderId": "ABC-20251103-0012",
      "customer": {
        "name": "李美麗"
      },
      "status": "confirmed",
      "deliveryDate": "2025-11-09",
      "totalAmount": 1800
    },
    {
      "orderId": "ABC-20251104-0018",
      "customer": {
        "name": "李志明"
      },
      "status": "confirmed",
      "deliveryDate": "2025-11-10",
      "totalAmount": 4200
    },
    {
      "orderId": "ABC-20251105-0023",
      "customer": {
        "name": "李國華"
      },
      "status": "confirmed",
      "deliveryDate": "2025-11-11",
      "totalAmount": 2900
    }
  ],
  "pagination": {
    "currentPage": 1,
    "totalPages": 1,
    "totalItems": 5,
    "itemsPerPage": 20
  }
}

UI 顯示​

  • 顯示 5 筆訂單（客戶姓氏為「李」且狀態為「已確認」）
  • 顯示已套用的條件標籤:
    • 「搜尋: 李」
    • 「狀態: 已確認」
  • 顯示「顯示 1-5 筆，共 5 筆訂單」

When（執行操作）​

測試案例 2: 搜尋 + 狀態過濾 + 日期範圍​

步驟 1: 保持搜尋與狀態過濾​

  • 搜尋框: 「李」
  • 狀態: 「已確認」

步驟 2: 添加日期範圍​

  • 店員在「配送日期」選擇器中選擇:
    • 開始日期: 2025-11-01
    • 結束日期: 2025-11-08

步驟 3: 套用過濾​

  • 店員點擊「套用過濾」按鈕

Then（預期結果 - 測試案例 2）​

API 請求​

端點: GET /api/v1/orders?search=李&status=confirmed&deliveryDateFrom=2025-11-01&deliveryDateTo=2025-11-08

API 響應​

{
  "orders": [
    {
      "orderId": "ABC-20251101-0005",
      "customer": {
        "name": "李大華"
      },
      "status": "confirmed",
      "deliveryDate": "2025-11-05",
      "totalAmount": 2520
    },
    {
      "orderId": "ABC-20251102-0007",
      "customer": {
        "name": "李小明"
      },
      "status": "confirmed",
      "deliveryDate": "2025-11-07",
      "totalAmount": 3500
    }
  ],
  "pagination": {
    "currentPage": 1,
    "totalPages": 1,
    "totalItems": 2,
    "itemsPerPage": 20
  }
}

UI 顯示​

  • 顯示 2 筆訂單（同時符合所有條件）
  • 顯示已套用的條件標籤:
    • 「搜尋: 李」
    • 「狀態: 已確認」
    • 「配送日期: 2025-11-01 至 2025-11-08」
  • 顯示「顯示 1-2 筆，共 2 筆訂單」

When（執行操作）​

測試案例 3: 分頁導航（50 筆訂單）​

步驟 1: 清空所有過濾條件​

  • 店員點擊「清空過濾」按鈕
  • 系統顯示所有 50 筆訂單（每頁 20 筆）

步驟 2: 查看第 2 頁​

  • 店員點擊「下一頁」或「2」
  • 系統跳轉至第 2 頁

Then（預期結果 - 測試案例 3）​

API 請求​

端點: GET /api/v1/orders?page=2&limit=20

API 響應​

{
  "orders": [
    // 第 21-40 筆訂單...
  ],
  "pagination": {
    "currentPage": 2,
    "totalPages": 3,
    "totalItems": 50,
    "itemsPerPage": 20,
    "hasNextPage": true,
    "hasPreviousPage": true
  }
}

UI 顯示​

  • 顯示第 21-40 筆訂單
  • 顯示「顯示 21-40 筆，共 50 筆訂單」
  • 分頁導航:
    • 「上一頁」按鈕啟用
    • 當前頁碼「2」高亮
    • 「下一頁」按鈕啟用

When（執行操作）​

測試案例 4: 調整每頁筆數​

步驟 1: 選擇每頁筆數​

  • 店員在「每頁顯示」下拉選單中選擇「50 筆/頁」

Then（預期結果 - 測試案例 4）​

API 請求​

端點: GET /api/v1/orders?page=1&limit=50

API 響應​

{
  "orders": [
    // 所有 50 筆訂單...
  ],
  "pagination": {
    "currentPage": 1,
    "totalPages": 1,
    "totalItems": 50,
    "itemsPerPage": 50,
    "hasNextPage": false,
    "hasPreviousPage": false
  }
}

UI 顯示​

  • 顯示所有 50 筆訂單
  • 顯示「顯示 1-50 筆，共 50 筆訂單」
  • 分頁導航消失（只有 1 頁）

驗證檢查清單​

組合邏輯​

  • 搜尋 + 過濾採用 AND 邏輯（交集）
  • 多個過濾條件採用 AND 邏輯
  • 狀態多選採用 OR 邏輯（聯集）

分頁功能​

  • 顯示當前頁碼與總頁數
  • 上一頁/下一頁按鈕正常
  • 頁碼快速跳轉功能正常
  • 每頁筆數調整功能正常

UI 互動​

  • 搜尋與過濾組合後自動跳回第 1 頁
  • 已套用條件標籤正確顯示
  • 清空過濾功能正常

效能​

  • 搜尋防抖功能正常（500ms）
  • 快取機制正常（5 分鐘）

最後更新: 2025-11-03