1. 撰寫pages頁面下的測試案例

.github/workflows/ci.yml

@@ -0,0 +1,33 @@
+name: Automate Test & Coverage
+
+on:
+  push:
+    branches:
+      - '**'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests with coverage
+        run: npm run test:coverage
+
+      - name: Upload coverage report
+        if: always() # Upload even if tests fail, though usually we want to see it only on success. But request implies "after testing". Let's keep default behavior (success) or explicitly simple. The user asked "testing finished, then generate report". Usually implies success.
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-report
+          path: coverage/

doc/test/admin_page_test.md

@@ -0,0 +1,39 @@
+---
+description: AdminPage 測試案例
+---
+
+> 狀態：初始為 [ ]、完成為 [x]
+> 注意：狀態只能在測試通過後由流程更新。
+> 測試類型：前端元素、function 邏輯、Mock API、驗證權限...
+
+---
+
+## [x] 【前端元素】檢查頁面基本元素
+**範例輸入**：
+1. User role 為 'admin'
+2. 進入管理頁面
+**期待輸出**：
+1. 顯示標題 "管理後台"
+2. 顯示 "管理員" 角色標籤
+3. 顯示 "登出" 按鈕
+4. 顯示 "管理員專屬頁面" 內容卡片
+5. 顯示 "返回" 連結
+
+---
+
+## [x] 【Router 導航】返回 Dashboard
+**範例輸入**：
+1. 點擊 "返回" 連結
+**期待輸出**：
+1. 導向至 "/dashboard"
+
+---
+
+## [x] 【function 邏輯】登出功能
+**範例輸入**：
+1. 點擊 "登出" 按鈕
+**期待輸出**：
+1. 呼叫 logout method
+2. 導向至 "/login"
+
+---

doc/test/dashboard_page_test.md

@@ -0,0 +1,65 @@
+---
+description: DashboardPage 測試案例
+---
+
+> 狀態：初始為 [ ]、完成為 [x]
+> 注意：狀態只能在測試通過後由流程更新。
+> 測試類型：前端元素、function 邏輯、Mock API、驗證權限...
+
+---
+
+## [x] 【前端元素】檢查頁面基本元素 (Admin)
+**範例輸入**：
+1. User role 為 'admin'
+2. User name 為 'AdminUser'
+3. 進入儀表板頁面
+**期待輸出**：
+1. 顯示標題 "儀表板"
+2. 顯示歡迎訊息 "Welcome, AdminUser"
+3. 顯示 "管理員" 角色標籤
+4. 顯示 "管理後台" 連結
+5. 顯示 "登出" 按鈕
+
+---
+
+## [x] 【前端元素】檢查頁面基本元素 (General User)
+**範例輸入**：
+1. User role 為 'user'
+2. User name 為 'NormalUser'
+3. 進入儀表板頁面
+**期待輸出**：
+1. 顯示 "一般用戶" 角色標籤
+2. **不顯示** "管理後台" 連結
+
+---
+
+## [x] 【Mock API】載入商品列表 - 成功
+**範例輸入**：
+1. 進入頁面
+2. Mock API 回傳商品列表 (e.g., Apple, Banana)
+**期待輸出**：
+1. 初始顯示 "載入商品中..."
+2. 載入完成後顯示商品列表
+3. 顯示商品名稱 "Apple", "Banana"
+4. 顯示商品價格
+
+---
+
+## [x] 【Mock API】載入商品列表 - 失敗
+**範例輸入**：
+1. 進入頁面
+2. Mock API 回傳 500 Error
+**期待輸出**：
+1. 顯示錯誤訊息 "無法載入商品資料"
+2. 不顯示商品列表
+
+---
+
+## [x] 【function 邏輯】登出功能
+**範例輸入**：
+1. 點擊 "登出" 按鈕
+**期待輸出**：
+1. 呼叫 logout method
+2. 導向至 "/login"
+
+---

doc/test/login_page_test.md

@@ -0,0 +1,92 @@
+---
+description: LoginPage 測試案例
+---
+
+> 狀態：初始為 [ ]、完成為 [x]
+> 注意：狀態只能在測試通過後由流程更新。
+> 測試類型：前端元素、function 邏輯、Mock API、驗證權限...
+
+---
+
+## [x] 【前端元素】檢查頁面基本元素
+**範例輸入**：進入登入頁面
+**期待輸出**：
+1. 顯示標題 "歡迎回來"
+2. 顯示 Email 輸入框
+3. 顯示密碼輸入框
+4. 顯示登入按鈕
+
+---
+
+## [x] 【function 邏輯】Email 格式驗證 - 無效格式
+**範例輸入**：
+1. Email 輸入 "invalid-email"
+2. 點擊登入按鈕
+**期待輸出**：
+1. Email 輸入框下方顯示錯訊訊息 "請輸入有效的 Email 格式"
+2. 不會觸發登入 API
+
+---
+
+## [x] 【function 邏輯】密碼格式驗證 - 長度不足
+**範例輸入**：
+1. 密碼輸入 "123"
+2. 點擊登入按鈕
+**期待輸出**：
+1. 密碼輸入框下方顯示錯誤訊息 "密碼必須至少 8 個字元"
+2. 不會觸發登入 API
+
+---
+
+## [x] 【function 邏輯】密碼格式驗證 - 缺少英文字母或數字
+**範例輸入**：
+1. 密碼輸入 "12345678" (只有數字)
+2. 點擊登入按鈕
+**期待輸出**：
+1. 密碼輸入框下方顯示錯誤訊息 "密碼必須包含英文字母和數字"
+2. 不會觸發登入 API
+
+---
+
+## [x] 【Mock API】登入成功
+**範例輸入**：
+1. Email 輸入 "test@example.com"
+2. 密碼 輸入 "password123"
+3. Mock API login 回傳失敗
+4. 點擊登入按鈕
+**期待輸出**：
+1. 呼叫 login API
+2. 導向至 "/dashboard"
+
+---
+
+## [x] 【Mock API】登入失敗
+**範例輸入**：
+1. Email 輸入 "test@example.com"
+2. 密碼 輸入 "password123"
+3. Mock API login 回傳失敗 (401 Unauthorized)
+4. 點擊登入按鈕
+**期待輸出**：
+1. 顯示錯誤 Banner "登入失敗，請稍後再試" (或 API 回傳的訊息)
+2. 停留在登入頁面
+
+---
+
+## [x] 【前端元素】Loading 狀態
+**範例輸入**：
+1. 輸入有效帳密
+2. 點擊登入按鈕 (API 請求中)
+**期待輸出**：
+1. 登入按鈕顯示 "登入中..."
+2. 登入按鈕為 disabled 狀態
+
+---
+
+## [x] 【驗證權限】已登入自動導向
+**範例輸入**：
+1. 設定 AuthContext 狀態為 isAuthenticated = true
+2. 進入登入頁面
+**期待輸出**：
+1. 自動導向至 "/dashboard"
+
+---