小程序ui模板_angular组件间传值测试的方法详解

摘要: angular部件间传值检测的方式详细说明 本文关键给大伙儿详细介绍了有关怎样检测angular部件间传值的有关材料,原文中根据实例编码详细介绍的十分详尽,对大伙儿学习培训或是应...

angular组件间传值测试的方法详解       这篇文章主要给大家介绍了关于如何测试angular组件间传值的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用angular组件具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

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

创建假组件

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

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

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

@Component({
 selector: 'app-size',
 template: `
 size-select works!
 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
│  └── ponent.ts
└── size
  └── ponent.ts

因为我们是模拟的子组件, @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/ponent';
beforeEach(async(() = {
 TestBed.configureTestingModule({
 declarations: [ PageComponent, SizeComponent ],
 imports: [FormsModule],
 providers: [
 CoreTestingController
 .compileComponents();
 }));

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

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

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

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

,然后定义一个变量并传给父组件,然后断言父组件接收到的值与子组件传的值相同。

ponent, 'onSizeSelected');
const emitSize = 4;
sizeComponent.onChangeSize.emit(emitSize);
ponent.onSizeSelected).toHaveBeenCalledWith(4);

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

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

总结

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

到此这篇关于angular组件间传值测试的文章就介绍到这了,更多相关angular组件间传值测试内容请搜索凡科以前的文章或继续浏览下面的



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:小程序模板市场