跳至主要内容

US-301: 客戶基本資料管理 - 手動測試指南

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

測試前準備​

1. 啟動開發伺服器​

npm run dev

2. 測試帳號​

訪問 http://localhost:3000/login

用戶名密碼角色權限說明
manager@florist.comPassword123!ROLE_MANAGER可創建/編輯/停用/啟用客戶
staff@florist.comPassword123!ROLE_STAFF可創建/編輯客戶（不可停用）

3. 種子數據​

Mock API 預設包含以下客戶資料：

客戶編號姓名/公司名類型電話等級狀態
ABC-CUST-000001王小明個人0912-345-678VIP啟用
ABC-CUST-000002李美玲個人0923-456-789Regular啟用
ABC-CUST-000003XX 科技公司企業02-1234-5678VVIP啟用
ABC-CUST-000004張三個人0934-567-890Regular停用

測試場景​

✅ Scenario 1: 創建個人客戶（僅必填欄位）​

目標: 驗證快速創建個人客戶流程（僅填寫姓名和電話）

操作步驟​

  1. 以 Staff 帳號登入

    • 登入 staff@florist.com

  2. 導航至創建客戶頁面

    • 訪問 http://localhost:3000/customers/new
    • ✅ 驗證: 看到頁面標題「新增客戶」
    • ✅ 驗證: 預設選中「個人客戶」類型

  3. 填寫必填欄位

    • 姓名：陳大明
    • 電話：0955-123-456

  4. 提交表單

    • 點擊「儲存」按鈕
    • ✅ 驗證: 顯示 Toast 通知「客戶創建成功」
    • ✅ 驗證: 頁面導航至客戶詳情頁

  5. 驗證客戶資料

    • ✅ 驗證: 客戶編號格式正確（ABC-CUST-XXXXXX）
    • ✅ 驗證: 電話已標準化（0955123456）
    • ✅ 驗證: 狀態為「啟用」
    • ✅ 驗證: 等級為「普通客戶」
    • ✅ 驗證: 累計消費為 NT$ 0

預期結果​

  • ✅ 客戶創建成功
  • ✅ 客戶編號自動生成
  • ✅ 電話格式標準化（移除連字號）
  • ✅ 初始狀態為啟用、等級為普通客戶

✅ Scenario 2: 創建個人客戶（完整欄位）​

目標: 驗證創建個人客戶時填寫所有欄位

操作步驟​

  1. 導航至創建客戶頁面

    • 訪問 http://localhost:3000/customers/new

  2. 填寫基本資訊

    • 姓名：林美華
    • 電話：0966-234-567
    • Email：meihwa@example.com
    • 性別：女
    • 生日：1990-05-15

  3. 填寫地址

    • 點擊「+ 新增地址」
    • 地址類型：住家
    • 地址：台北市信義區信義路五段 7 號
    • 設為預設地址

  4. 填寫附加資訊

    • 來源：網路搜尋
    • 喜好備註：喜歡粉色系花卉
    • 標籤：婚禮、企業送禮

  5. 提交表單

    • 點擊「儲存」按鈕
    • ✅ 驗證: 客戶創建成功

  6. 驗證客戶詳情

    • ✅ 驗證: 所有欄位資料正確顯示
    • ✅ 驗證: 地址區塊顯示「住家」標籤
    • ✅ 驗證: 標籤區塊顯示「婚禮」、「企業送禮」

預期結果​

  • ✅ 所有欄位資料正確儲存
  • ✅ 地址資訊完整
  • ✅ 標籤正確顯示

✅ Scenario 3: 創建企業客戶（含聯絡人）​

目標: 驗證創建企業客戶並添加多位聯絡人

操作步驟​

  1. 導航至創建客戶頁面

    • 訪問 http://localhost:3000/customers/new

  2. 切換至企業客戶

    • 點擊「企業客戶」選項
    • ✅ 驗證: 表單切換為企業客戶欄位

  3. 填寫企業基本資訊

    • 公司名稱：幸福花藝有限公司
    • 統一編號：12345678
    • 公司電話：02-8765-4321
    • 公司地址：新北市板橋區中山路一段 100 號
    • 產業類別：零售業
    • 月結帳期：30 天

  4. 添加第一位聯絡人（主要）

    • 點擊「+ 新增聯絡人」
    • 姓名：張經理
    • 職稱：採購經理
    • 電話：0912-111-222
    • Email：zhang@happyflower.com
    • 勾選「設為主要聯絡人」

  5. 添加第二位聯絡人

    • 再次點擊「+ 新增聯絡人」
    • 姓名：李助理
    • 職稱：行政助理
    • 電話：0923-222-333
    • Email：li@happyflower.com

  6. 提交表單

    • 點擊「儲存」按鈕
    • ✅ 驗證: 客戶創建成功

  7. 驗證客戶詳情

    • ✅ 驗證: 公司資訊正確顯示
    • ✅ 驗證: 統一編號為 8 位數字
    • ✅ 驗證: 顯示 2 位聯絡人
    • ✅ 驗證: 張經理標示為「主要聯絡人」

預期結果​

  • ✅ 企業客戶創建成功
  • ✅ 聯絡人資訊正確儲存
  • ✅ 主要聯絡人標示正確

✅ Scenario 4: 編輯客戶基本資訊​

目標: 驗證編輯客戶資料並即時反映

操作步驟​

  1. 導航至客戶列表

    • 訪問 http://localhost:3000/customers

  2. 選擇客戶進入詳情頁

    • 點擊「王小明」進入詳情頁
    • ✅ 驗證: 看到客戶詳情資料

  3. 進入編輯模式

    • 點擊「編輯」按鈕
    • ✅ 驗證: 頁面切換為編輯表單
    • ✅ 驗證: 現有資料已預填

  4. 修改客戶資料

    • 將電話從 0912-345-678 改為 0912-999-888
    • 新增 Email：xiaoming@example.com

  5. 儲存變更

    • 點擊「儲存」按鈕
    • ✅ 驗證: 顯示 Toast 通知「客戶更新成功」

  6. 驗證更新結果

    • ✅ 驗證: 詳情頁顯示新電話 0912999888
    • ✅ 驗證: Email 欄位顯示 xiaoming@example.com
    • ✅ 驗證: updatedAt 時間戳已更新

預期結果​

  • ✅ 客戶資料更新成功
  • ✅ 變更即時反映在詳情頁
  • ✅ 更新時間戳正確

✅ Scenario 5: 重複電話檢測（新增時警告）​

目標: 驗證創建客戶時的電話重複檢測功能

操作步驟​

  1. 導航至創建客戶頁面

    • 訪問 http://localhost:3000/customers/new

  2. 填寫已存在的電話

    • 姓名：王小明的家人
    • 電話：0912-345-678（與「王小明」相同）

  3. 觸發重複檢測

    • 離開電話欄位（blur 事件）
    • 等待 500ms（防抖）
    • ✅ 驗證: 顯示黃色警告框
    • ✅ 驗證: 警告訊息包含現有客戶名稱「王小明」
    • ✅ 驗證: 警告框有「查看客戶」連結

  4. 選擇繼續創建

    • 勾選「仍要繼續創建」
    • 點擊「儲存」按鈕
    • ✅ 驗證: 客戶創建成功（允許強制創建）

  5. 驗證審計日誌（可選）

    • 檢查 Console 或 API 回應
    • ✅ 驗證: 日誌記錄「重複警告被忽略」

預期結果​

  • ✅ 重複電話顯示警告
  • ✅ 警告包含現有客戶資訊
  • ✅ 允許用戶忽略警告並創建

✅ Scenario 6: 重複電話檢測（編輯時排除自身）​

目標: 驗證編輯客戶時不會對自己的電話報警

操作步驟​

  1. 導航至客戶編輯頁面

    • 訪問 http://localhost:3000/customers/ABC-CUST-000001/edit
    • （或從客戶列表點擊「王小明」→「編輯」）

  2. 不修改電話，修改其他欄位

    • 電話保持 0912-345-678
    • 將 Email 改為 wang@example.com

  3. 觸發重複檢測

    • 點擊電話欄位後離開（blur）
    • ✅ 驗證: 不應該顯示重複警告
    • ✅ 驗證: 編輯自己的資料時排除自身

  4. 儲存變更

    • 點擊「儲存」按鈕
    • ✅ 驗證: 更新成功，無警告

預期結果​

  • ✅ 編輯模式排除自身電話檢測
  • ✅ 不顯示誤報警告
  • ✅ 更新正常完成

✅ Scenario 7: 停用客戶​

目標: 驗證管理者可停用客戶並記錄原因

操作步驟​

  1. 以 Manager 帳號登入

    • 登入 manager@florist.com

  2. 導航至客戶詳情頁

    • 訪問客戶「李美玲」的詳情頁

  3. 點擊停用按鈕

    • 點擊「停用客戶」按鈕
    • ✅ 驗證: 顯示確認對話框

  4. 填寫停用原因

    • 停用原因：選擇「客戶要求」
    • 備註：客戶暫時不需要服務

  5. 確認停用

    • 點擊「確認停用」
    • ✅ 驗證: 顯示 Toast 通知「客戶已停用」

  6. 驗證停用狀態

    • ✅ 驗證: 客戶狀態變為「停用」（灰色標籤）
    • ✅ 驗證: 停用原因已記錄

  7. 驗證訂單選擇列表

    • 訪問 http://localhost:3000/orders/new
    • ✅ 驗證: 客戶下拉選單不包含「李美玲」

預期結果​

  • ✅ 客戶成功停用
  • ✅ 停用原因已記錄
  • ✅ 停用客戶不出現在訂單選擇列表

✅ Scenario 8: 重新啟用客戶​

目標: 驗證管理者可重新啟用停用的客戶

操作步驟​

  1. 以 Manager 帳號登入

    • 登入 manager@florist.com

  2. 找到停用客戶

    • 訪問 http://localhost:3000/customers
    • 過濾條件選擇「停用」狀態
    • ✅ 驗證: 看到「張三」（停用狀態）

  3. 進入客戶詳情頁

    • 點擊「張三」進入詳情頁

  4. 點擊啟用按鈕

    • 點擊「啟用客戶」按鈕
    • ✅ 驗證: 顯示確認對話框

  5. 確認啟用

    • 點擊「確認啟用」
    • ✅ 驗證: 顯示 Toast 通知「客戶已啟用」

  6. 驗證啟用狀態

    • ✅ 驗證: 客戶狀態變為「啟用」（綠色標籤）

  7. 驗證訂單選擇列表

    • 訪問 http://localhost:3000/orders/new
    • ✅ 驗證: 客戶下拉選單包含「張三」

預期結果​

  • ✅ 客戶成功啟用
  • ✅ 啟用後可在訂單選擇列表中看到

✅ Scenario 9: 權限驗證（Staff 無法停用客戶）​

目標: 驗證 Staff 角色無法停用/啟用客戶

操作步驟​

  1. 以 Staff 帳號登入

    • 登入 staff@florist.com

  2. 導航至客戶詳情頁

    • 訪問任意客戶的詳情頁

  3. 檢查操作按鈕

    • ✅ 驗證: 不顯示「停用客戶」按鈕
    • ✅ 驗證: 不顯示「啟用客戶」按鈕
    • ✅ 驗證: 僅顯示「編輯」按鈕

  4. 嘗試直接訪問 API（可選，開發者工具）

    • 在 Console 執行 PATCH 請求
    • ✅ 驗證: 返回 403 Forbidden

預期結果​

  • ✅ Staff 角色無法看到停用/啟用按鈕
  • ✅ API 層級阻擋未授權操作

✅ Scenario 10: 必填欄位驗證​

目標: 驗證表單必填欄位驗證

操作步驟​

  1. 導航至創建客戶頁面

    • 訪問 http://localhost:3000/customers/new

  2. 不填寫任何欄位，直接提交

    • 點擊「儲存」按鈕
    • ✅ 驗證: 姓名欄位顯示錯誤「請輸入姓名」
    • ✅ 驗證: 電話欄位顯示錯誤「請輸入電話」
    • ✅ 驗證: 欄位邊框變為紅色

  3. 切換至企業客戶

    • 點擊「企業客戶」選項
    • 不填寫任何欄位，直接提交
    • ✅ 驗證: 公司名稱顯示錯誤「請輸入公司名稱」
    • ✅ 驗證: 公司電話顯示錯誤「請輸入公司電話」
    • ✅ 驗證: 聯絡人區塊顯示錯誤「至少需要一位聯絡人」

  4. 驗證表單狀態

    • ✅ 驗證: 客戶未被創建
    • ✅ 驗證: 已填寫的資料保留

預期結果​

  • ✅ 必填欄位驗證正確
  • ✅ 錯誤訊息清晰明確
  • ✅ 表單資料不會因驗證失敗而遺失

✅ Scenario 11: 格式驗證​

目標: 驗證電話、Email、統一編號等格式驗證

操作步驟​

  1. 導航至創建客戶頁面

    • 訪問 http://localhost:3000/customers/new

  2. 測試電話格式驗證

    • 姓名：測試客戶
    • 電話：abc123（無效格式）
    • 離開電話欄位
    • ✅ 驗證: 顯示錯誤「請輸入有效的電話號碼」

  3. 測試 Email 格式驗證

    • 電話：0912-345-678（有效）
    • Email：invalid-email（無效格式）
    • 離開 Email 欄位
    • ✅ 驗證: 顯示錯誤「請輸入有效的 Email」

  4. 切換至企業客戶測試統一編號

    • 點擊「企業客戶」選項
    • 統一編號：1234（不足 8 位）
    • 離開統一編號欄位
    • ✅ 驗證: 顯示錯誤「統一編號必須為 8 位數字」

  5. 測試有效格式

    • 電話：0912-345-678、02-1234-5678、0912345678
    • ✅ 驗證: 以上三種格式都可接受

預期結果​

  • ✅ 電話格式驗證正確
  • ✅ Email 格式驗證正確
  • ✅ 統一編號格式驗證正確
  • ✅ 支援多種電話格式

✅ Scenario 12: 聯絡人管理（企業客戶）​

目標: 驗證企業客戶的聯絡人新增、刪除、設為主要功能

操作步驟​

  1. 導航至創建企業客戶頁面

    • 訪問 http://localhost:3000/customers/new
    • 選擇「企業客戶」

  2. 新增第一位聯絡人

    • 點擊「+ 新增聯絡人」
    • ✅ 驗證: 出現聯絡人表單區塊
    • 填寫：姓名「陳經理」、電話「0912-111-111」
    • ✅ 驗證: 自動設為主要聯絡人（唯一時）

  3. 新增第二位聯絡人

    • 再次點擊「+ 新增聯絡人」
    • 填寫：姓名「王助理」、電話「0923-222-222」
    • ✅ 驗證: 第二位聯絡人未標記為主要

  4. 切換主要聯絡人

    • 在第二位聯絡人處點擊「設為主要」
    • ✅ 驗證: 第二位聯絡人變為主要（藍色標籤）
    • ✅ 驗證: 第一位聯絡人不再是主要

  5. 刪除聯絡人

    • 在第一位聯絡人處點擊「刪除」
    • ✅ 驗證: 顯示確認對話框
    • 點擊「確認」
    • ✅ 驗證: 第一位聯絡人已移除
    • ✅ 驗證: 僅剩一位聯絡人（王助理）

  6. 驗證至少一位聯絡人

    • 嘗試刪除最後一位聯絡人
    • ✅ 驗證: 顯示錯誤「至少需要一位聯絡人」或刪除按鈕禁用

預期結果​

  • ✅ 可新增多位聯絡人
  • ✅ 可切換主要聯絡人
  • ✅ 可刪除聯絡人
  • ✅ 至少保留一位聯絡人

測試檢查清單​

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

基本功能​

  • Scenario 1: 創建個人客戶（僅必填欄位）
  • Scenario 2: 創建個人客戶（完整欄位）
  • Scenario 3: 創建企業客戶（含聯絡人）
  • Scenario 4: 編輯客戶基本資訊

重複檢測​

  • Scenario 5: 重複電話檢測（新增時警告）
  • Scenario 6: 重複電話檢測（編輯時排除自身）

停用/啟用​

  • Scenario 7: 停用客戶
  • Scenario 8: 重新啟用客戶
  • Scenario 9: 權限驗證（Staff 無法停用）

錯誤處理​

  • Scenario 10: 必填欄位驗證
  • Scenario 11: 格式驗證
  • Scenario 12: 聯絡人管理

UI/UX​

  • 個人/企業客戶表單切換流暢
  • 錯誤訊息顯示在正確位置（欄位下方）
  • 警告訊息使用黃色樣式
  • 成功訊息使用 Toast 通知
  • 響應式設計（桌面版雙欄、手機版單欄）

API​

  • POST /api/v1/customers 正常運作
  • PUT /api/v1/customers/{id} 正常運作
  • GET /api/v1/customers/check-duplicate 正常運作
  • PATCH /api/v1/customers/{id}/status 正常運作
  • 錯誤響應格式正確（400/403/404）

安全性​

  • 權限控制正確（Staff 不可停用/啟用）
  • 多租戶隔離（只能看到自己租戶的客戶）

已知問題​

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

測試結論​

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

最後更新: 2025-12-08