第一篇文章是: "使用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