# 隱藏測試信息  隨著測試的增多，組件的測試效果將逐步后移。雖說單元測試應該使用以代碼測試代碼的思想，但做為前期的我們還是感覺能夠直觀的看到效果最保險。 本節我們共同隱藏掉那些沒有被激活的測試信息。 ## 原理 實現的原理很簡單，我們僅需要將那些需要隱藏掉的加入`display:none`的CSS屬性即可。若要使某個屬性在所有的測試中都生效，則需要將其聲明在`angular.json`的特定位置上，我們在前面成功的單元測試引入了bootstrap，而在這引用一個專門用于測試的樣式同引入bootstrap的方法一致。 ### 新建測試專用樣式 ```bash panjiedeMacBook-Pro:src panjie$ pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src panjiedeMacBook-Pro:src panjie$ tree -L 1 . ├── app ├── assets ├── environments ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css ├── styles.test.css ?? └── test.ts 3 directories, 7 files ``` ### 應用到測試環境 找到`angular.json`將上述文件應用到測試環境： ```typescript +++ b/first-app/angular.json @@ -99,6 +99,7 @@ ], "styles": [ "src/styles.css", + "src/styles.test.css", "./node_modules/bootstrap/dist/css/bootstrap.css", "./node_modules/@fortawesome/fontawesome-free/css/all.css" ], ``` 重新啟動`ng t`，則`styles.test.css`生效。 ### 隱藏到冗余的信息 使用firefox快速獲取預隱藏的信息所在的css選擇路徑：  然后在`styles.test.css中對其設置隱藏屬性： ```css +++ b/first-app/src/styles.test.css @@ -0,0 +1,10 @@ +/*隱藏掉所有的報告*/ +div.jasmine_html-reporter div.jasmine-results div.jasmine-summary ul.jasmine-suite { + display: none; +} + +/*僅顯示第一個報告*/ +div.jasmine_html-reporter div.jasmine-results div.jasmine-summary ul.jasmine-suite:first-child { + display: block; +} + ``` 如此一來，清爽的界面再次回歸到我們面前：  ## 本節作業 嘗試隱藏掉其它你認為沒有用的測試信息。 | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step5.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step5.3.zip) |