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获取网页中的js、css、Flash等文件
Dec 20 Javascript
IE下js调试工具Companion.JS
Oct 15 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 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+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP asXML()函数讲解
2019/02/03 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
python实现人机猜拳小游戏
2020/02/03 Python
Python双链表原理与实现方法详解
2020/02/22 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
咖啡店自主创业商业计划书
2014/01/22 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
社区活动总结
2015/02/04 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python