coffee-cart-cwc

Aiden cwc wrote:

測試目的 (Objective)¶

驗證系統在帶入破壞模式參數 ?breakable=1 時，嘗試加入購物車是否能如期觸發模擬的 JavaScript 異常，並檢驗前端是否具備適當的錯誤捕捉（Error Boundary）機制，避免應用程式完全反白崩潰。

前置條件 (Preconditions)¶

1. 開啟 Chrome 瀏覽器並按下 F12 開啟 DevTools，切換至 Console 分頁。
2. 勾選 Console 面板的「Preserve log」以便追蹤錯誤堆疊。

測試步驟 (Test Steps)¶

1. 於網址列輸入測試網址：https://coffee-cart.app/?breakable=1。
2. 檢視頁面載入狀態與 Console 是否有預設報錯。
3. 單擊菜單首頁的任一咖啡品項（例如 Mocha）。
4. 檢視 Console 拋出的錯誤訊息類型與 Stack Trace。
5. 觀察頁面 UI 狀態（例如是否全頁崩潰白屏、按鈕是否鎖死、或有提示錯誤訊息）。
6. 重新整理頁面並移除網址參數（回到 https://coffee-cart.app/），再次嘗試加入咖啡。

預期結果 (Expected Results)¶

1. 步驟 3-4：點擊加入購物車時，Console 正確拋出刻意模擬的 Uncaught Error（如拋出模擬異常訊息）。
2. 步驟 5：系統不應出現不可恢復的整頁死鎖或完全白畫面，其他非破壞區域（如頂部導覽列）應維持可操作性。
3. 步驟 6：移除參數回復乾淨 URL 後，購物車加入功能恢復正常，無殘留的異常狀態。

實際測試結果 (Actual Results)¶

• 執行狀態：Pass (完全通過 - 錯誤注入機制依設計正常觸發且系統未崩潰)
• 嚴重程度：None (符合示範網站刻意設計之測試行為)
• 實際呈現：
  1. 刻意拋出異常成功觸發 (Step 3-4)：在網址帶入 ?breakable=1 參數並點選咖啡（如 Espresso Macchiato）加入購物車時，DevTools Console 即刻精準捕捉到刻意模擬的 Error 報錯：
     • Error Message：Some additional workflow is broken.
     • Call Stack：來自 ListPage.vue:108 的 addToCart 方法。
  2. 核心加購與 UI 狀態維持正常 (Step 5)：
     • 雖然 Console 拋出未捕獲錯誤，但系統未發生全頁反白（White Screen of Death）或介面死鎖現象。
     • 購物車核心邏輯正常執行：頂部導覽列即時更新為 cart (1)，品項清單正確列出 Espresso Macchiato $12.00 x 1，總額同步計算為 Total: $12.00。
  3. 非破壞區域可操作性：頂部導覽列（menu、cart (1)、github）維持可互動狀態，頁面結構完好無損。
  4. 移除參數後正常 (Step 6)：移除 ?breakable=1 返回乾淨網址時，加入品項不再於 Console 拋出此項自訂錯誤。