隨記

Week 10 · Day 07 — 第十週總複習：測試

學習目標

  • 回顧單元測試、服務測試、E2E
  • 建立完整測試策略
  • 完成並通過本週作業

重點速覽

  • 單元測試：Jasmine + Karma + TestBed，測元件與服務
  • TestBed：configureTestingModule + createComponent + inject
  • 元件測試：測屬性/方法/模板渲染（detectChanges + nativeElement）
  • 服務測試：TestBed.inject；HTTP 用 HttpClientTestingModule + expectOne + flush
  • E2E：Cypress，cy.visit/get/type/click/should
  • 定位：用 data-testid，一個測試走一個情境

自我測驗

  1. TestBed 的角色？
  2. 元件測試為何呼叫 fixture.detectChanges()？
  3. httpMock.expectOne(url) 與 req.flush(data) 各做什麼？
  4. E2E 與單元測試的差別？
答案 1. 建立測試用迷你 Angular 環境 2. 觸發變更偵測，讓模板/狀態更新到 DOM 3. 驗證發出的請求；模擬後端回應 4. 單元測單一單位；E2E 開真實瀏覽器走完整流程

作業

第十週作業（README） - [ ] 撰寫元件單元測試 ✅ - [ ] 撰寫服務測試 ✅ - [ ] 建立第一個 E2E 測試 ✅

實作檢核 - [ ] 至少 3 個元件測試（create / 顯示 / 變更） - [ ] 一個 HTTP 服務測試（用 HttpClientTestingModule） - [ ] 一個完整 E2E 場景通過

總結

你現在有能力確保程式正確性。下一週把所學整合成一個實戰專案。