Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angular – 如何替换@viewChildren中用于测试double的组件?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_301_6@ 假设我有一个我想要测试的组件,它使用了一个非常复杂的组件.此外,它使用@viewChildren获得的引用调用它的一些方法.例如

@Component({
        moduleId: module.id,selector: 'test',template: '<complex *ngFor='let v of vals'></complex>',})
    export class TestComponent{
    vals = [1,2,3,4]
    @ViewChildren(ComplexComponent) cpxs : QueryList<ComplexComponent>
    // ....
    }

如何在`TestBed’中替换复合组件以获得测试双?

就像是

@Component({
  moduleId : module.id,selector: 'complex',template: ''
})
class ComplexComponentStub {
}

describe('TestComponent',() => {
  beforeEach( async(() => {
    TestBed.configureTestingModule({
      declarations : [ComplexComponentStub,TestComponent],});
it('should have four sons',()=>{
   let fixture = TestBed.createComponent(TestComponent);
   let comp    = fixture.componentInstance as TestComponent;
   fixture.detectChanges();
   expect(comp.cpxs.length).toBe(4);
});

    //....
}));

有关完整示例,请参阅plnkr
http://plnkr.co/edit/ybdrN8VimzktiDCTvhwe?p=preview

解决方法

您可以使用反射元数据功能来执行此操作:

it('should have four sons',() => {
   const propMetadata = Reflect['getMetadata']('propMetadata',FatherComponent);
   var originType = propMetadata.cpxs[0].selector;
   propMetadata.cpxs[0].selector = ComplexComponentStub; // Replace ViewChild Type

   let fixture = TestBed.createComponent(FatherComponent);

   let comp = fixture.componentInstance as FatherComponent;
   fixture.detectChanges();
   expect(comp.cpxs.length).toBe(4);

   propMetadata.cpxs[0].selector = originType; // reset ViewChild
});

Test in Plunker

您可以在此处阅读有关装饰器和反射元数据的更多信息:

> Angular 2,decorators and class inheritance

大佬总结

以上是大佬教程为你收集整理的angular – 如何替换@viewChildren中用于测试double的组件?全部内容,希望文章能够帮你解决angular – 如何替换@viewChildren中用于测试double的组件?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: