使用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 相关文章推荐
js移除事件 js绑定事件实例应用
Nov 28 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
Vue.directive使用注意(小结)
Aug 31 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
Node 代理访问的实现
Sep 19 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 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
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
PHP导入导出Excel代码
2015/07/07 PHP
简单实现PHP留言板功能
2016/12/21 PHP
php 猴子摘桃的算法
2017/06/20 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
js module大战
2019/04/19 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Python实现网站表单提交和模板
2019/01/15 Python
Python之时间和日期使用小结
2019/02/14 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
《影子》教学反思
2014/02/21 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
护士长竞聘书
2014/03/31 职场文书
质量标语大全
2014/06/12 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
SQL Server实现分页方法介绍
2022/03/16 SQL Server