Angular CLI進行單元測試與E2E測試

這次為大家帶來Angular CLI進行單元測試與E2E測試，Angular CLI進行單元測試與E2E測試的注意事項有哪些，以下就是實戰案例，一起來看一下。

單元測試.

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忽略那些不識別的元素或元素屬性.

1. -- code-coverage -cc 程式碼覆蓋率報告, 預設這個是不開啟的, 因為產生報告的速度還是比較慢的.

2. --colors 輸出結果使用各種顏色預設開啟

3. --single-run -sr 執行測試, 但是不偵測檔案變更預設不開啟

##--progress 把測驗的流程輸出到控制台預設開啟
--sourcemaps -sm 產生sourcemaps 預設開啟

5. ##--watch -w 執行測試一次, 並且偵測變化預設開啟 

6. 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.

常用的参数有:

1. --config -c 指定配置文件 默认是 protractor.conf.js

2. --element-explorer -ee 打开protractor的元素浏览器

3. --serve -s 在随机的端口编译和serve 默认true

4. --specs -sp 默认是执行所有的spec文件, 如果想执行某个spec就使用这个参数, 默认是all

5. --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: 」字樣, 然後就可以在下面輸入變數或表達式來查看它們的值從而進行調試了.

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Angular使用ng-click傳遞多個參數

H5觸控事件中如何判斷使用者滑動方向

以上是Angular CLI進行單元測試與E2E測試的詳細內容。更多資訊請關注PHP中文網其他相關文章！