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代码小结
Oct 14 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
React 高阶组件HOC用法归纳
Jun 13 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
python正则表达式re之compile函数解析
2017/10/25 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
python简单实现操作Mysql数据库
2018/01/29 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
Python绘制动态水球图过程详解
2020/06/03 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
财务分析个人的自荐书范文
2013/11/24 职场文书
爱心募捐感谢信
2015/01/22 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
离婚案件答辩状
2015/05/22 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
mysql查询结果实现多列拼接查询
2022/04/03 MySQL