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

.agent/rules/vibecoding.md

@@ -0,0 +1,25 @@
+---
+trigger: always_on
+---
+
+DO NOT GIVE ME HIGH LEVEL SHIT, IF I ASK FOR FIX OR EXPLANATION, I WANT ACTUAL CODE OR EXPLANATION!!! I DON'T WANT "Here's how you can blablabla"
+
+- Be casual unless otherwise specified
+- Be terse
+- Suggest solutions that I didn't think about—anticipate my needs
+- Treat me as an expert
+- Be accurate and thorough
+- Give the answer immediately. Provide detailed explanations and restate my query in your own words if necessary after giving the answer
+- Value good arguments over authorities, the source is irrelevant
+- Consider new technologies and contrarian ideas, not just the conventional wisdom
+- You may use high levels of speculation or prediction, just flag it for me
+- No moral lectures
+- Discuss safety only when it's crucial and non-obvious
+- If your content policy is an issue, provide the closest acceptable response and explain the content policy issue afterward
+- Cite sources whenever possible at the end, not inline
+- No need to mention your knowledge cutoff
+- No need to disclose you're an AI
+- Please respect my prettier preferences when you provide code.
+- Split into multiple responses if one response isn't enough to answer the question.
+
+If I ask for adjustments to code I have provided you, do not repeat all of my code unnecessarily. Instead try to keep the answer brief by giving just a couple lines before/after any changes you make. Multiple code blocks are ok.

.github/workflows/ci.yml

@@ -0,0 +1,32 @@
+name: CI
+
+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
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-report
+          path: coverage/

doc/test/AdminPage.md

@@ -0,0 +1,53 @@
+# AdminPage 測試案例
+
+> 狀態：初始為 [ ]、完成為 [x]
+> 注意：狀態只能在測試通過後由流程更新。
+> 測試類型：UI 渲染、互動邏輯
+
+---
+
+## [x] 【UI 渲染】檢查管理頁面基本元素
+
+**範例輸入**：
+
+- Mock User 為 admin
+- 進入 AdminPage  
+**期待輸出**：
+- 渲染標題 "管理後台"
+- 渲染 "返回" 連結
+- 渲染 "登出" 按鈕
+- 渲染使用者角色標籤 (管理員)
+
+---
+
+## [x] 【UI 渲染】一般用戶與管理員的角色標籤顯示
+
+**範例輸入**：
+
+- Case 1: Mock User role 為 'admin'
+- Case 2: Mock User role 為 'user'  
+**期待輸出**：
+- Case 1: 顯示 "管理員"
+- Case 2: 顯示 "一般用戶"
+
+---
+
+## [x] 【互動邏輯】點擊返回連結
+
+**範例輸入**：
+
+- 點擊 "返回" 連結
+**期待輸出**：
+- 導航至 `/dashboard`
+
+---
+
+## [x] 【互動邏輯】點擊登出按鈕
+
+**範例輸入**：
+
+- Mock `logout` 函式
+- 點擊 "登出" 按鈕
+**期待輸出**：
+- 呼叫 `logout` 函式
+- 導航至 `/login`

doc/test/DashboardPage.md

@@ -0,0 +1,68 @@
+# DashboardPage 測試案例
+
+> 狀態：初始為 [ ]、完成為 [x]
+> 注意：狀態只能在測試通過後由流程更新。
+> 測試類型：UI 渲染、API 互動、互動邏輯
+
+---
+
+## [x] 【UI 渲染】檢查儀表板基本元素
+
+**範例輸入**：
+
+- Mock User info
+- 進入 DashboardPage  
+**期待輸出**：
+- 渲染 "儀表板" 標題
+- 渲染 User 歡迎訊息與頭像
+- 渲染 "商品列表" 區塊
+- 渲染 "登出" 按鈕
+
+---
+
+## [x] 【UI 渲染】管理員專屬連結顯示
+
+**範例輸入**：
+
+- Case 1: Mock User role 為 'admin'
+- Case 2: Mock User role 為 'user'  
+**期待輸出**：
+- Case 1: 顯示 "管理後台" 連結
+- Case 2: 不顯示 "管理後台" 連結
+
+---
+
+## [x] 【API 互動】成功載入商品列表
+
+**範例輸入**：
+
+- Mock `getProducts` resolve with product list
+- 渲染頁面  
+**期待輸出**：
+- 初始顯示 "載入商品中..."
+- 載入完成後顯示 Mock 的商品資料 (名稱、價格、描述)
+- 不顯示錯誤訊息
+
+---
+
+## [x] 【API 互動】載入商品失敗
+
+**範例輸入**：
+
+- Mock `getProducts` reject with error
+- 渲染頁面  
+**期待輸出**：
+- 顯示錯誤訊息 (Mock 的錯誤訊息或預設訊息)
+- 不顯示商品列表
+
+---
+
+## [x] 【互動邏輯】點擊登出按鈕
+
+**範例輸入**：
+
+- Mock `logout`
+- 點擊 "登出" 按鈕  
+**期待輸出**：
+- 呼叫 `logout`
+- 導航至 `/login`

doc/test/LoginPage.md

@@ -0,0 +1,105 @@
+# 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`