使用Angular CLI进行单元测试和E2E测试的方法


Posted in Javascript onMarch 24, 2018

第一篇文章是: "使用angular cli生成angular5项目" :https://3water.com/article/136621.htm

第二篇文章是: "使用angular cli从蓝本生成代码" :https://3water.com/article/137031.htm

第三篇文章是: "使用Angular CLI生成路由" :https://3water.com/article/137033.htm

第四篇文章时: “使用Angular CLI进行Build (构建) 和 Serve”:https://3water.com/article/137034.htm

本文是该系列的最后一篇文章.

单元测试.

angular cli使用karma进行单元测试.

首先执行ng test --help或者ng test -h查看帮助.

执行测试的话就执行ng test即可, 它会执行项目里所有的.spec.ts文件.

而且它还会检测文件的变化, 如果文件有变化, 那么它会重新执行测试.

它应该在单独的终端进程中执行.

首先创建一个angular项目, 带路由的:

ng new sales --routing

创建好项目后, 直接执行命令测试:

ng test

使用Angular CLI进行单元测试和E2E测试的方法

然后会弹出一个页面, 就是测试的结果数据.

下面我再添加几个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

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

使用Angular CLI进行单元测试和E2E测试的方法

这时我重新执行一下ng test:

使用Angular CLI进行单元测试和E2E测试的方法

尽管程序运行没有问题, 但是测试还是出现了问题: router-outlet is not an angular component.

可以看一下spec list:

使用Angular CLI进行单元测试和E2E测试的方法

使用Angular CLI进行单元测试和E2E测试的方法

这时因为运行测试的时候, admin模块是独立运行的, 所以该模块并没有引用Router模块, 所以无法识别router-outlet.

那么如何解决这个问题?

打开admin.component.spec.ts:

使用Angular CLI进行单元测试和E2E测试的方法

把这句话填上, 然后就没有错误了:

使用Angular CLI进行单元测试和E2E测试的方法

NO_ERRORS_SCHEMA告诉angular忽略那些不识别的元素或者元素属性.

  1. --code-coverage -cc 代码覆盖率报告, 默认这个是不开启的, 因为生成报告的速度还是比较慢的.
  2. --colors 输出结果使用各种颜色 默认开启
  3. --single-run -sr 执行测试, 但是不检测文件变化 默认不开启
  4. --progress 把测试的过程输出到控制台 默认开启
  5. --sourcemaps -sm 生成sourcemaps 默认开启
  6. --watch -w 运行测试一次, 并且检测变化 默认开启 

ng test 就是运行测试, 并且如果文件有变化, 就会重新运行测试.

使用ng test -sr或者ng test -w false 执行单次测试

测试代码覆盖率:

ng test --cc 的报告默认是生成在/coverage文件夹下, 但是可以通过修改.angular-cli.json里面的属性进行修改.

下面生成代码覆盖率报告:

ng test -sr -cc

通常是配合-sr参数使用的(运行一次测试).

然后会在项目的coverage文件夹里生成一些文件:

使用Angular CLI进行单元测试和E2E测试的方法

直接打开index.html:

使用Angular CLI进行单元测试和E2E测试的方法

可以看到都是100%, 这是因为我没有写任何代码.

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

使用Angular CLI进行单元测试和E2E测试的方法

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

使用Angular CLI进行单元测试和E2E测试的方法

使用Angular CLI进行单元测试和E2E测试的方法

可以看到这部分代码并没有覆盖到.

如果我把代码里到 canGetUsers改为true:

使用Angular CLI进行单元测试和E2E测试的方法

再次执行ng test --sr -cc

可以看到这次代码覆盖率变化了:

使用Angular CLI进行单元测试和E2E测试的方法

只有catch部分没有覆盖到.

我认为代码覆盖率这个内置功能是非常好的.

Debug单元测试.

首先执行ng test:

使用Angular CLI进行单元测试和E2E测试的方法

然后点击debug, 并打开开发者工具:

使用Angular CLI进行单元测试和E2E测试的方法

然后按cmd+p:

找到需要调试的文件:

使用Angular CLI进行单元测试和E2E测试的方法

设置断点:

使用Angular CLI进行单元测试和E2E测试的方法

然后在spec里面也设置一个断点:

使用Angular CLI进行单元测试和E2E测试的方法

最后点击浏览器的刷新按钮即可:

使用Angular CLI进行单元测试和E2E测试的方法

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 默认是执行所有的spec文件, 如果想执行某个spec就使用这个参数, 默认是all
  5. --webdriver-update -wu 尝试更新webdriver 默认true

通常执行下面机组命令参数组合即可:

ng e2e
ng e2e -ee

Debug E2E测试.

看一下项目:

使用Angular CLI进行单元测试和E2E测试的方法

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

而测试文件是在e2e目录下.

看一下spec和po文件:

使用Angular CLI进行单元测试和E2E测试的方法

使用Angular CLI进行单元测试和E2E测试的方法

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

使用Angular CLI进行单元测试和E2E测试的方法

应该是没问题的.

所以执行ng e2e:

使用Angular CLI进行单元测试和E2E测试的方法

测试通过, 但是浏览器闪了一下就关闭了.

如果我想debug e2e, 那么执行这个命令:

ng e2e -ee

由于我使用的是mac, 当前这个命令在mac上貌似确实有一个bug:

使用Angular CLI进行单元测试和E2E测试的方法

如果可以正常运行这个命令的话, 终端窗口会出现“Debugger listening on xxx: ”字样, 然后就可以在下面输入变量或者表达式来查看它们的值从而进行调试了.

如果想退出调试, 那就按Ctrl+c或者输入.exit即可.

由于angular cli 更新比较快, 所以查看最新的功能最好还是看官方文档:https://github.com/angular/angular-cli/wiki

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
js友好的时间返回函数
Aug 24 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 #Javascript
使用Angular CLI生成路由的方法
Mar 24 #Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 #Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 #Javascript
在vue中使用jointjs的方法
Mar 24 #Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 #Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 #jQuery
You might like
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
JS 文件大小判断的实现代码
2010/04/07 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
JavaScrip常见的一些算法总结
2015/12/28 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
深入理解Python3中的http.client模块
2017/03/29 Python
Python定时器实例代码
2017/11/01 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
基于python实现学生管理系统
2018/10/17 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
医学生求职信
2014/07/01 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
少年雷锋观后感
2015/06/10 职场文书
大学生见习总结报告
2015/06/24 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android