angular unit test 基本介紹

前言

當我們把程式碼寫完，通常需要測試，而 angular cli 就提供了方便單元測試的工具。

開發環境

• macOS
• VScode
• Angular cli
• 測試工具 Jasmine + Karma

Jasmine

是一套js用來測試的工具

Karma

是一套可以讓Jasmine測試運行在瀏覽器上的工具

測試方法

通常專案會使用 Angular cli 去產生component、service、module…等，Angular cli 會順便產生測試的檔案( xxxx.spec.ts )，只要下ng test 指令就可以執行。

圖片中的 app.component.spec.ts就是測試檔

ng test 執行在瀏覽器的畫面

預設是使用google chrome開啟，如果想要修改開啟的瀏覽器，可以到專案資料夾下面src/karma.conf.js 裡面的browsers設定。

運行測試時

運行測試時Angular cli會不斷偵測程式碼進行測試，所以只要存擋即可以看到測試結果，假如想要停止偵測，在終端機下control + c就可以結束偵測。

Jasmine基本元素

• Suites — describe(string, function) 基本容器，可放多個 Specs。
• Specs — it(string, function) 基本測試單位，裡面可以包含一到多個Expectations。
• Expectations — 預期會發生的結果，如expect(actual).toBe(expected)。
• Matchers — 判斷是否符合預期。如toBe(expected)、toEqual(expected)。

常用到的Matchers

• not 表示對後面判斷的否定
• toBe() 相當於===
• toBeDefined() 相當於不等於undefined
• toBeUndefined() 相當於是否等於undefined
• toBeNull()判斷變數是否為null
• toBeNaN()判斷變數是否為NaN(not a number)
• toBeTruthy()判斷是否為true
• toBeFalsy()判斷是否為false
• toEqual()相當於==
• toBeLessThan() 判斷實際值是否小於期望值
• toBeLessThanOrEqual() 判斷實際值是否小於等於期望值

四個鉤子

Jasmine有提供4個handlers，來處理一些在測試前或是測試後可以額外執行的動作。

• beforeEach於每一個 spec 前執行，每一個it function執行之前被執行。

• afterEach 於每一個 spec 後執行，每一個it function執行之後被執行。

• beforeAll 於每一個 Suit 前執行，所有測試之前被呼叫一次。

• afterAll 於每一個 Suit 後執行，所有的describe()都做完之後被呼叫一次。

測試覆蓋率

Angular cli 也提供一個功能可以檢視，測試在專案中的百分比。
要啟用這項功能，就要在angular.json裡面test的部份加入"codeCoverage" : true 就可以開啟此功能。

執行測試就可以發現多了一個coverage資料夾，裡面index.html 就可以看覆蓋率了。

實際範例

今天有一個function需要測試如下

測試程式如下

describe('Say hello', function) 後面的function就是基本容器，裡面可以放多個單元測試，為單元測試的集合。

it('show hello', function) 前面放的字串可以是對測試的說明，後面的functio，裡面可以包含一到多個Expectations。
expect(sayHello())這個描述稱為期望，預期會發生的結果。
toEqual('Hello!') 為Matcher，是判斷期望是否符合預期，回傳值為為boolean。

執行ng test 看看測試結果！

有4 specs其中有一個失敗，原因是預期得到的值為’Hello!‘但實際得到的是’你好!’。
把這個失敗的測試修改之後存擋，看看測試結果。

就成功了！
恭喜你完成你的一個Angular基本單元測試了。