angular组件间传值测试的方法详解


Posted in Javascript onMay 07, 2020

前言

我们知道angular组件间通讯有多种方法,其中最常用的一种方法就是借助于 @Input 和 @Output 进行通讯。具体如何通讯请参考angular组件间通讯,本文不再赘述,我们来讲讲关于此方法如何进行单元测试。

创建假组件

我们单元测试父组件与子组件的的交互是否符合我们的要求,我们在父组件进行测试,就需要模拟一个假的子组件出来,这样排除其他因素对测试的影响。

比如现在我在分页组件里写了一个每页大小选择组件,现在要测试一下组件间交互。现在分页组件就是我们的父组件,每页大小组件就是我们的子组件。我们现在需要去模拟一个假的子组件出来。我们先模拟一个假模块出来。

我们的子组件在core模块里,我们在core模块下创造一个core-testing模拟模块。再在core-testing模块下创造一个core组件,因为我们是一个模拟模块,我们只需要ts文件即可。

@Component({
 selector: 'app-size',
 template: `
 <p>
  size-select works!
 </p>
 `,
 styles: []
})
export class SizeComponent implements OnInit {
 constructor() {
 }

 ngOnInit() {
 }
}

为了我们可以在父组件的测试文件中得到模拟的子组件,我们还需要一个controller,在core-testing文件夹下创建一个core-testing-controller.ts文件。CoreTestingController类继承TestingController。

export class CoreTestingController extends TestingController {
}

同时在我们的core-testing.module里声明CoreTestingController为提供者

providers: [
 CoreTestingController
 ]

此时我们的目录树

 core-testing git:(134) ✗ tree  
.
├── core-testing-controller.ts
├── core-testing.module.ts
├── page
│   └── page.component.ts
└── size
    └── size.component.ts

因为我们是模拟的子组件,所以我们应该添加子组件的@Input 和 @Output,同时在构造函数里把这个模拟的子组件添加到CoreTestingController里。

export class SizeComponent implements OnInit {
 @Input() size: number;

 @Output() onChangeSize = new EventEmitter<number>();

 constructor(private controller: CoreTestingController) {
 this.controller.addUnit(this);
 }
}

此时我们的准备工作就完成了。

单元测试

首先我们引入假组件并声明提供者

import {CoreTestingController} from '../core-testing/core-testing-controller';
import {SizeComponent} from '../core-testing/size/size.component';

beforeEach(async(() => {
 TestBed.configureTestingModule({
  declarations: [ PageComponent, SizeComponent ],
  imports: [FormsModule],
  providers: [
  CoreTestingController
  ]
 })
 .compileComponents();
 }));

我你们这里引入的是我们创造的假的SizeComponent,因为我们父组件与子组件在同一个模块里,所以我们直接引入SizeComponent就可以。

此时我们父组件想要子组件时就会使用假的子组件。

我们先断言@Input,我们断言父组件的值与我们假的子组件值相等

it('选择每页大小', () => {
 const controller = TestBed.get(CoreTestingController) as CoreTestingController;
 const sizeComponent = controller.get(SizeComponent) as SizeComponent;
 expect(sizeComponent.size).toBe(component.size);
 });

我们这里的get方法就对应的我们之前的构造函数的addUnit方法,具体参考TestingController类定义的方法。

然后我们再断言子组件向父组件@Output也没有问题,我们先spyon父组件接收子组件值的方法,然后定义一个变量并传给父组件,然后断言父组件接收到的值与子组件传的值相同。

spyOn(component, 'onSizeSelected');
const emitSize = 4;
sizeComponent.onChangeSize.emit(emitSize);
expect(component.onSizeSelected).toHaveBeenCalledWith(4);

这时我们就达到了我们测试的目的。

我们启动测试,发现我们本来的选择下拉框变成了文字,这就是我们假的子组件的效果。

angular组件间传值测试的方法详解

总结

我们进行单元测试,就需要除被测组件外,其他引用组件尽量为假,才能达到我们的目的。

到此这篇关于angular组件间传值测试的文章就介绍到这了,更多相关angular组件间传值测试内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
js实现无缝循环滚动
Jun 23 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 #Javascript
JS面试题中深拷贝的实现讲解
May 07 #Javascript
javascript 代码是如何被压缩的示例代码
May 06 #Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 #Javascript
Vue SSR 即时编译技术的实现
May 06 #Javascript
深入webpack打包原理及loader和plugin的实现
May 06 #Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 #Javascript
You might like
fgetcvs在linux的问题
2012/01/15 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
积极分子思想汇报
2014/01/04 职场文书
学生励志演讲稿
2014/01/06 职场文书
公司请假条格式
2014/04/11 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
2014年科室工作总结
2014/11/20 职场文书
采购员工作总结范文
2015/08/12 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript