# 隐藏测试信息  随着测试的增多，组件的测试效果将逐步后移。虽说单元测试应该使用以代码测试代码的思想，但做为前期的我们还是感觉能够直观的看到效果最保险。 本节我们共同隐藏掉那些没有被激活的测试信息。 ## 原理 实现的原理很简单，我们仅需要将那些需要隐藏掉的加入`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) |