第一篇文章是: "使用 angular cli 生成 angular5 项目" : http://www.cnblogs.com/cgzl/p/8594571.html
第二篇文章是: "使用 angular cli 从蓝本生成代码" : http://www.cnblogs.com/cgzl/p/8605464.html
第三篇文章是: "使用 Angular CLI 生成路由" : http://www.cnblogs.com/cgzl/p/8611532.html
第四篇文章时: 使用 Angular CLI 进行 Build (构建) 和 Serve: http://www.cnblogs.com/cgzl/p/8612263.html
本文是该系列的最后一篇文章.
单元测试.
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 忽略那些不识别的元素或者元素属性.
ng test 的常用参数.
--code-coverage -cc 代码覆盖率报告, 默认这个是不开启的, 因为生成报告的速度还是比较慢的.
--colors 输出结果使用各种颜色 默认开启
--single-run -sr 执行测试, 但是不检测文件变化 默认不开启
--progress 把测试的过程输出到控制台 默认开启
--sourcemaps -sm 生成 sourcemaps 默认开启
--watch -w 运行测试一次, 并且检测变化 默认开启
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.
常用的参数有:
--config -c 指定配置文件 默认是 protractor.conf.js
--element-explorer -ee 打开 protractor 的元素浏览器
--serve -s 在随机的端口编译和 serve 默认 true
--specs -sp 默认是执行所有的 spec 文件, 如果想执行某个 spec 就使用这个参数, 默认是 all
--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: 字样, 然后就可以在下面输入变量或者表达式来查看它们的值从而进行调试了.
如果想退出调试, 那就按 Ctrl+c 或者输入. exit 即可.
由于 angular cli 更新比较快, 所以查看最新的功能最好还是看官方文档: https://github.com/angular/angular-cli/wiki
来源: https://www.cnblogs.com/cgzl/p/8615357.html