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 相关文章推荐
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
Json实现传值到后台代码实例
Jun 30 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
PHP 面向对象详解
2012/09/13 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
实现vuex原理的示例
2020/10/21 Javascript
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
深入理解Python 多线程
2020/06/16 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
五一口号
2014/06/19 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript