coffee-cart-cwc

Aiden cwc wrote:

測試目的 (Objective)¶

驗證使用者在已加載應用後遭遇網路中斷（Offline）時，單頁應用（SPA）的路由切換、已加入之購物車暫存狀態是否不受斷網影響，以及網路恢復後的行為表現。

前置條件 (Preconditions)¶

1. 開啟受測網站：Coffee cart。
2. 在在線狀態下先加入 2 杯咖啡至購物車（例如 Espresso + Americano，共 $17.00）。
3. 按 F12 開啟 DevTools，切換至 Network 分頁。

測試步驟 (Test Steps)¶

1. 在 DevTools Network 面板的 Throttling 下拉選單中選擇「Offline」（模擬斷網）。
2. 觀察當前首頁狀態與購物車數據（右上角 cart (2)，右下角 $17.00）。
3. 點擊頂部導覽列的 cart (2) 切換至購物車頁面。
4. 在購物車頁面嘗試點擊品項旁邊的數量增加按鈕（+）。
5. 點擊頂部導覽列切換回 menu 頁面。
6. 將 DevTools Network 切回「No throttling」（恢復連線），重新檢視資料。

預期結果 (Expected Results)¶

1. 步驟 2：切換至 Offline 後，原先加入的購物車金額與數量保持完整，未遺失。
2. 步驟 3：頁面因屬於 SPA 前端路由架構，能在斷網下順暢切換至 /cart 頁面，無瀏覽器原生「無網際網路連線」恐龍畫面。
3. 步驟 4-5：本地記憶體計算邏輯仍可正常執行（數量能累加，金額能更新），且能順暢切換回 / (menu)。
4. 步驟 6：網路恢復連線後，應用程式狀態維持同步，無破圖或腳本阻斷問題。

實際測試結果 (Actual Results)¶

• 執行狀態：Pass (完全通過 - 離線狀態下單頁路由切換與記憶體運算皆符合預期)
• 嚴重程度：None (無缺陷)
• 實際呈現：
  1. 離線狀態資料完整保留 (Step 2)：在 DevTools 切換至 Offline 模式後，首頁當前畫面無崩潰或白屏，頂部導覽列維持 cart (2)，右下角付款金額維持 $17.00，資料未遺失。
  2. 斷網下 SPA 路由無縫切換 (Step 3)：點擊頂部導覽列的 cart (2) 連結，系統直接於前端切換至 /cart 頁面並完整渲染購物車清單（Espresso 與 Americano），未向伺服器發起整頁請求，無瀏覽器原生斷網錯誤（如 ERR_INTERNET_DISCONNECTED 恐龍畫面）。
  3. 離線購物車增減計算正常 (Step 4-5)：在斷網環境下點擊品項旁的 + 增加按鈕，品項數量與總金額皆能即時在前端累加計算；隨後點擊導覽列 menu 亦能順暢切換回首頁菜單，整體互動無卡頓或阻斷。
  4. 網路恢復狀態同步良好 (Step 6)：將 DevTools 切回 No throttling 恢復網路連線後，頁面所有文字、圖示與購物車狀態維持正常連動，主執行緒無拋出未捕獲的網路異常（Network Error），無破圖或腳本失效現象。