[Angular] Angular CLI 實用小技巧 4
- unit tests
- 使用 NO_ERROR SCHEMA 處理 known element 問題
- end to end tests
- 如何 debug 測試
執行單元測試
驗證程式碼的執行邏輯是否如預期。
| Options | Alias | Description |
|---|---|---|
| --code-coverage | -cc | 建立 code coverage report |
| --coloers | 命令提示字元的輸出文字是否要彩色(預設: true) | |
| --single-run | -sr | 執行一次測試，輸出結果後就結束，會在 CI 的時候用到 (預設: false) |
| --progress | Log grogress to console (預設: true( | |
| --sourcemaps | -sm | 可用來 debug test (預設: true) |
| --watch | -w | 偵測檔案變更，並重新執行測試 (預設: true) |
debug 測試
在執行 ng test 後，會開啟瀏覽器，顯示測試結果，在測試結果的右上角點選 DEBUG 按鈕，會導向到 Debug 頁面。
Debug Button在 Debug 頁面，開啟開發者工具(F12)，點選 Source。
chrome 開發者工具點選快捷鍵 ctrl + p，選取要 debug 的檔案 => 下中斷點 => 重新整理網頁，就可以 Debug 測試的程式碼了。
debug處理 router-outlet is not a known element
Angular 在建立其他 Module (ex: admin.module)，且 Componet 有使用 <router-outlet></router-outlet>
在什麼都不設定的情況下，跑測試(ng test)，會出現測試失敗的情形，如下。
router_outlet_unknown看錯誤訊息可以知道是在跑 AdminComponent 的時候發生失敗的，這時候在 admin.component.spec.ts，加上 NO_ERRORS_SCHEMA，就可以解決這個問題。
NO_ERRORS_SCHEMAEnd to End Tests
End to End Tests 模仿使用者與網頁互動的方式，來驗證功能是否正確。 而 Angular CLI 使用 Protractor 來處理 e2e tests ，且會開啟瀏覽器執行。
| Options | Alias | Description |
|---|---|---|
| --config | -c | 指定 conf.js (預設:專案根目錄下的 protractor.conf.js) |
| --element-explorer | -ee | 開啟 protractor’s element explorer ，用於 debug |
| --serve | -s | 編譯並啟動伺服器(預設: true) |
| --specs | -sp | 可指定要執行的 e2e.spec (預設: 全部執行) |
| --webdriver-update | -wu | update webdriver (預設: true) |
End to End Tests Debug
執行 ng e2e -ee 會看到開啟的瀏覽器停在測試的那一頁，而且命令提示字元是可以輸入指令的狀態，這時候就可以用命令提示字元 debug。
例如，我現在的頁面是停在首頁，頁面只有簡單的 app works!
e2e_index這時候我們就可以在命令提示字元，用 css selector 的方式取得 h1 的文字內容
又或者可用 Protractor 提供的 element 取得文字內容
用以上的方式就可以來 debug 頁面上顯示的資訊是不是如預期的。
