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 相关文章推荐
jquery ajax abort()的使用方法
Oct 28 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
利用static实现表格的颜色隔行显示
2006/10/09 PHP
PHP中session变量的销毁
2014/02/27 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
餐饮主管岗位职责
2013/12/10 职场文书
欢送退休感言
2014/02/08 职场文书
优良学风班总结材料
2014/02/08 职场文书
大跃进口号
2014/06/16 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
学校创先争优活动总结
2014/08/28 职场文书
英语演讲开场白
2015/05/29 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
周一问候语大全
2015/11/10 职场文书
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技