使用Angular CLI進行單元測試和E2E測試

第一篇文章是: "使用angular cli生成angular5項目" : http://www.cnblogs.com/cgzl/p/8594571.html

第二篇文章是: "使用angular cli從藍本生成代碼" : http://www.cnblogs.com/cgzl/p/8605464.html

第三篇文章是: "使用Angular CLI生成路由" : http://www.cnblogs.com/cgzl/p/8611532.html

第四篇文章時: 「使用Angular CLI進行Build (構建) 和 Serve」: http://www.cnblogs.com/cgzl/p/8612263.html

本文是該系列的最後一篇文章.

 

單元測試.

angular cli使用karma進行單元測試.

首先執行ng test --help或者ng test -h查看幫助.

執行測試的話就執行ng test便可, 它會執行項目裏全部的.spec.ts文件.

並且它還會檢測文件的變化, 若是文件有變化, 那麼它會從新執行測試.

它應該在單獨的終端進程中執行. 

首先建立一個angular項目, 帶路由的:

ng new sales --routing

 

建立好項目後, 直接執行命令測試:

ng test

 

而後會彈出一個頁面, 就是測試的結果數據.

下面我再添加幾個components 和 一個 admin module:

ng g c person
ng g c order
ng g m admin --routing
ng g c admin/user
ng g c admin/email

 

而後配置一下路由, 最重要獲得這個效果:

這時我從新執行一下ng test:

儘管程序運行沒有問題, 可是測試仍是出現了問題: router-outlet is not an angular component.

能夠看一下spec list:

這時由於運行測試的時候, admin模塊是獨立運行的, 因此該模塊並無引用Router模塊, 因此沒法識別router-outlet.

那麼如何解決這個問題?

打開admin.component.spec.ts:

把這句話填上, 而後就沒有錯誤了:

NO_ERRORS_SCHEMA告訴angular忽略那些不識別的元素或者元素屬性.

 

ng test的經常使用參數.

• --code-coverage -cc 代碼覆蓋率報告, 默認這個是不開啓的, 由於生成報告的速度仍是比較慢的.
• --colors 輸出結果使用各類顏色 默認開啓
• --single-run -sr 執行測試, 可是不檢測文件變化 默認不開啓
• --progress 把測試的過程輸出到控制檯 默認開啓
• --sourcemaps -sm 生成sourcemaps 默認開啓
• --watch -w 運行測試一次, 而且檢測變化 默認開啓

ng test 就是運行測試, 而且若是文件有變化, 就會從新運行測試.

使用ng test -sr或者ng test -w false 執行單次測試 

測試代碼覆蓋率:

ng test --cc 的報告默認是生成在/coverage文件夾下, 可是能夠經過修改.angular-cli.json裏面的屬性進行修改.

下面生成代碼覆蓋率報告:

ng test -sr -cc

 

一般是配合-sr參數使用的(運行一次測試).

而後會在項目的coverage文件夾裏生成一些文件:

直接打開index.html:能夠看到都是100%, 這是由於我沒有寫任何代碼.

而後我在user component裏面添加一些代碼:

再運行一次 ng test --sr -cc:

能夠看到這部分代碼並無覆蓋到.

若是我把代碼裏到 canGetUsers改成true:

再次執行ng test --sr -cc

能夠看到此次代碼覆蓋率變化了:

只有catch部分沒有覆蓋到.

我認爲代碼覆蓋率這個內置功能是很是好的.

 

Debug單元測試.

首先執行ng test:

而後點擊debug, 並打開開發者工具:

而後按cmd+p:

找到須要調試的文件:

設置斷點:

而後在spec裏面也設置一個斷點:

最後點擊瀏覽器的刷新按鈕便可:

E2E測試的參數.

實際上angular cli是配合着protractor來進行這個測試的.

它的命令是 ng e2e.

經常使用的參數有:

• --config -c 指定配置文件 默認是 protractor.conf.js
• --element-explorer -ee 打開protractor的元素瀏覽器
• --serve -s 在隨機的端口編譯和serve 默認true
• --specs -sp 默認是執行全部的spec文件, 若是想執行某個spec就使用這個參數, 默認是all
• --webdriver-update -wu 嘗試更新webdriver 默認true

一般執行下面機組命令參數組合便可:

ng e2e
ng e2e -ee

 

 

Debug E2E測試.

看一下項目:

 

配置文件protractor.conf.js已經配置好.

而測試文件是在e2e目錄下.

看一下spec和po文件:

再看一下app.component.html裏面的值:

應該是沒問題的.

因此執行ng e2e:

測試經過, 可是瀏覽器閃了一下就關閉了.

若是我想debug e2e, 那麼執行這個命令:

ng e2e -ee

 

因爲我使用的是mac, 當前這個命令在mac上貌似確實有一個bug:

若是能夠正常運行這個命令的話, 終端窗口會出現「Debugger listening on xxx: 」字樣, 而後就能夠在下面輸入變量或者表達式來查看它們的值從而進行調試了.

若是想退出調試, 那就按Ctrl+c或者輸入.exit便可.

 

因爲angular cli 更新比較快, 因此查看最新的功能最好仍是看官方文檔: https://github.com/angular/angular-cli/wiki