怎么在Angular CLI中進行單元測試？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

成都一家集口碑和實力的網站建設服務商，擁有專業(yè)的企業(yè)建站團隊和靠譜的建站技術，10多年企業(yè)及個人網站建設經驗 ,為成都上千余家客戶提供網頁設計制作,網站開發(fā),企業(yè)網站制作建設等服務,包括成都營銷型網站建設，品牌網站制作，同時也為不同行業(yè)的客戶提供成都網站設計、網站制作的服務,包括成都電商型網站制作建設,裝修行業(yè)網站制作建設，傳統(tǒng)機械行業(yè)網站建設,傳統(tǒng)農業(yè)行業(yè)網站制作建設。在成都做網站,選網站制作建設服務商就選成都創(chuàng)新互聯。

單元測試.

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

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

執(zhí)行測試的話就執(zhí)行ng test即可, 它會執(zhí)行項目里所有的.spec.ts文件.

而且它還會檢測文件的變化, 如果文件有變化, 那么它會重新執(zhí)行測試.

它應該在單獨的終端進程中執(zhí)行.

首先創(chuàng)建一個angular項目, 帶路由的:

ng new sales --routing

創(chuàng)建好項目后, 直接執(zhí)行命令測試:

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

然后配置一下路由, 最重要得到這個效果:

這時我重新執(zhí)行一下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 執(zhí)行測試, 但是不檢測文件變化 默認不開啟

4. --progress 把測試的過程輸出到控制臺 默認開啟

5. --sourcemaps -sm 生成sourcemaps 默認開啟

6. --watch -w 運行測試一次, 并且檢測變化 默認開啟 

ng test 就是運行測試, 并且如果文件有變化, 就會重新運行測試.

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

測試代碼覆蓋率:

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

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

ng test -sr -cc

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

然后會在項目的coverage文件夾里生成一些文件:

直接打開index.html:

可以看到都是100%, 這是因為我沒有寫任何代碼.

然后我在user component里面添加一些代碼:

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

可以看到這部分代碼并沒有覆蓋到.

如果我把代碼里到 canGetUsers改為true:

再次執(zhí)行ng test --sr -cc

可以看到這次代碼覆蓋率變化了:

只有catch部分沒有覆蓋到.

我認為代碼覆蓋率這個內置功能是非常好的.

Debug單元測試.

首先執(zhí)行ng test:

然后點擊debug, 并打開開發(fā)者工具:

然后按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 默認是執(zhí)行所有的spec文件, 如果想執(zhí)行某個spec就使用這個參數, 默認是all

5. --webdriver-update -wu 嘗試更新webdriver 默認true

通常執(zhí)行下面機組命令參數組合即可:

ng e2e
ng e2e -ee

Debug E2E測試.

看一下項目:

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

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

看一下spec和po文件:

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

應該是沒問題的.

所以執(zhí)行ng e2e:

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

如果我想debug e2e, 那么執(zhí)行這個命令:

ng e2e -ee

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

關于怎么在Angular CLI中進行單元測試問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注創(chuàng)新互聯成都網站設計公司行業(yè)資訊頻道了解更多相關知識。

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前標題：怎么在AngularCLI中進行單元測試-創(chuàng)新互聯
本文網址：http://chinadenli.net/article24/gojce.html

成都網站建設公司_創(chuàng)新互聯，為您提供定制開發(fā)、搜索引擎優(yōu)化、網站營銷、ChatGPT、品牌網站制作、標簽優(yōu)化

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯