開發環境

• ubuntu
• VSCode
• 安裝 Nodejs: 16.16.0
• 安裝 Angular Cli: 13.2.5

npm install -g angular-cli

安裝完後檢查版本

ng verison

建立 Angular 專案

ng new tdd-exercise(your project name)

瞭解spec測試的意思

先知道spec測試的內容，之後寫測試會更清楚自己在測什麼。

建立新專案後，Angular 預設也會建立一份測試檔案 app.component.spec.ts

• line 5 預設建立一個Test Suite (describe)
  在describe內，在跑每個Test Case (it) 之前，會先建立「測試用的模擬環境」，如 line 7 ~ line 14，透過TestBed建立測試模組，再import要測試的元件 AppComponent，最後在 compileComponents() 將測試元件建立起來。

• 上圖總共有三個測試案例(3個it)，我們一個一個來翻譯
  • line 17 ~ line 20: 用const fixture取得TestBed的測試元件 AppComponent，在取得fixture元件的instance，最後預期app要存在，也就是 expect(app).toBeTruthy();
  • line 23 ~ line 26: line 24 ~ line 25 同上述，最後預期app裡的title變數要=='tdd-exercie'，也就是expect(app.title).toEqual('tdd-exercie')
  • line 29 ~ line 33 : 一樣透過TestBed取得測試元件，但是多了個 detectChanges()，用來檢測DOM元素變動，因為測試元件並不是run 瀏覽器上，而是一個元件的包裝器(wrapper)，最後預期元件的textContent有包含'tdd...is running'。 (若解釋有誤，再請各位先進指正)

fixture is a wrapper for our component’s environment so we can control things like change detection.

資料來源參考

4. run ng test
   
   成功測試一個Test Suite，三個spec

本周總結

前面六天認識寫好測試的基礎原則、測試框架(Jasmine)、和測試工具(Karma)應用，今天在動手建立新專案，和run 測試，針對之前所吸收的知識，應用在單元測試有更深的印象。

尤其是本週在Udemy上學習的課程，Angular - The Complete Guide (2022 Edition)
by Maximilian Schwarzmüller，其中一堂說明單元測試，Max老師用「逐行翻譯」每行程式碼的意思，更清楚知道自己在寫什麼，不會迷茫在程式碼中。

自學的過程中，學會最重要的就是「分辨正確資訊」和「梳理資訊的脈絡」，網路資源很多、很廣，但有時會不小心走錯方向，基礎的東西沒弄清楚，就以為是當下的問題引起，殊不知其實只看見冰山的一角，沒有看到背後真的問題點，反而又繞了一圈，花了很多時間才找到問題點。

希望這樣的整理方式，能夠幫助自己實作單元測試、和大家操作。

下一篇，來學習如何測試 Component