零基礎學習Angular單元測試內容總結（還沒有完成）

零

學習Angular的過程當中，到目前爲止最難於理解的就是單元測試了。
首先是不知道什麼是單元測試，其次是不知道爲何要進行單元測試，還不知道如何去操做。

終於，在許多天的思考以後，我終於把單元測試歸納成了一句話：

單元測試的本質是，用測試代碼來模擬用戶輸入、模擬用戶點擊、模擬服務器返回值，並經過業務邏輯來斷言測試結果，只要實際結果和斷言相同，則視爲測試經過。

1、爲何要進行單元測試

咱們先想想傳統的代碼測試是怎樣的：開發人員在本地跑代碼，運行起來，而後把本身做爲用戶，把用戶全部可能的操做執行一遍，若是沒有出現異常，則測試經過。

這樣就出現了兩個明顯的弊端：
第一，開發人員不可能模擬全部的操做，總會有遺漏的狀況，這樣下降了測試的質量；
第二，即便只是測試一個功能，也須要把整個項目先後臺的全部代碼全都運行起來，下降了測試的效率。

此外，還有一個隱患，那就是沒有充分考慮代碼間的聯繫，容易出現「只改了一行代碼致使其餘功能崩掉」的狀況。

因此單元測試的出現，成功的解決了上述問題：

第一，質量高

單元測試是經過在測試文件xxxx.component.spec.ts中寫入測試代碼來實現的，整個測試過程不須要用戶的參與，徹底由代碼來實現，下降了因爲操做失誤或操做遺漏形成的隱患。只要測試文件的內容正確，就能夠正常測試。

第二，靈活

單元測試既能夠測試整個系統，也能夠只測試某個功能，不再須要由於測某個功能而把整個系統跑起來。
更方便的是，能夠經過代碼來模擬後端的返回值，測試前端就不須要起後端服務了。

第三，安全

若是某一行代碼的改變影響了其餘的功能，單元測試會立刻發出警告，避免相互關聯的功能收到影響。

2、運行單元測試的方法

ng test

在項目目錄輸入ng test命令，會啓動整個項目的單元測試

若是將測試代碼的describe改成fdescribe，就只測試單個組件；
若是將測試代碼的it改成fit，就只測試組件的這個功能；

當ng test命令運行時，先看代碼中有沒有fit，再看有沒有fdescribe，若是都沒有，就測試整個項目。

WebStorm

在代碼中點擊describe或it前面的符號，便可直接測試單個組件或單個功能。

從測試頁面中獲取信息

頂部顯示了測試數，組件總數，成功數量和失敗數量。
高亮的組件是當前正在測試的組件，其餘的組件沒有測試。

3、基礎功能代碼

定義測試變量：

//定義變量並賦值
const req = httpTestingController.expectOne('http://localhost:8080/Klass');

斷言：

//斷言：根據邏輯來看，我期待結果應該是什麼樣子的
expect(req.request.method).toEqual('POST');

模擬返回值：

//因爲測試時並無鏈接後端服務器，須要用這行代碼來模擬返回的數據
req.flush(null, {status: 201, statusText: 'Accepted'});

因爲時間緣由，暫時沒有學徹底部內容，更多的代碼等學完後更新。