Skip to content

LoginPage.md

Latest commit

 

History

History
105 lines (72 loc) · 2.19 KB

LoginPage.md

File metadata and controls

105 lines (72 loc) · 2.19 KB

LoginPage 測試案例

狀態：初始為 [ ]、完成為 [x] 注意：狀態只能在測試通過後由流程更新。 測試類型：UI 渲染、表單驗證、API 互動、權限/路由

[x] 【UI 渲染】檢查登入頁面基本元素

範例輸入：進入登入頁面
期待輸出：

  • 渲染標題 "歡迎回來"
  • 渲染 Email 輸入框
  • 渲染密碼輸入框
  • 渲染登入按鈕

[x] 【表單驗證】驗證無效的 Email 格式

範例輸入：

  • Email 輸入 "invalid-email"
  • 點擊登入按鈕
    期待輸出：
  • 顯示 "請輸入有效的 Email 格式" 錯誤訊息
  • 不觸發登入 API

[x] 【表單驗證】驗證密碼長度不足

範例輸入：

  • 密碼輸入 "1234567" (少於 8 碼)
  • 點擊登入按鈕
    期待輸出：
  • 顯示 "密碼必須至少 8 個字元" 錯誤訊息
  • 不觸發登入 API

[x] 【表單驗證】驗證密碼缺少英文字母或數字

範例輸入：

  • 密碼輸入 "12345678" (無字母) 或 "abcdefgh" (無數字)
  • 點擊登入按鈕
    期待輸出：
  • 顯示 "密碼必須包含英文字母和數字" 錯誤訊息
  • 不觸發登入 API

[x] 【API 互動】驗證登入成功流程

範例輸入：

  • Email 輸入 "test@example.com"
  • 密碼輸入 "Valid123"
  • 點擊登入按鈕
  • Mock login resolve
    期待輸出：
  • 進入 Loading 狀態（按鈕 disabled、顯示 loading icon）
  • 呼叫 login 函式
  • 跳轉至 /dashboard

[x] 【API 互動】驗證登入失敗流程

範例輸入：

  • Email 輸入 "test@example.com"
  • 密碼輸入 "Valid123"
  • 點擊登入按鈕
  • Mock login reject with message "帳號或密碼錯誤"
    期待輸出：
  • 顯示 "帳號或密碼錯誤" 錯誤訊息
  • 解除 Loading 狀態

[x] 【權限/路由】已登入狀態自動導向

範例輸入：

  • Mock isAuthenticated 為 true
  • 渲染 LoginPage
    期待輸出：
  • 自動導向至 /dashboard

[x] 【API 互動】顯示 Auth Context 的過期訊息

範例輸入：

  • Mock authExpiredMessage 為 "連線逾時"
  • 渲染 LoginPage
    期待輸出：
  • 顯示 "連線逾時" 錯誤訊息
  • 呼叫 clearAuthExpiredMessage