Angular

Angular Unit Test 基本介紹

陳子平 Tzuping Chen 2019/11/04 21:21:50
82

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基本單元測試了。

陳子平 Tzuping Chen