如何将@viewChildren中使用的组件替换为测试双？

Question

假设我有一个要测试的组件，它使用了一个非常复杂的组件。此外，它使用由@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

Answer 1

可以使用反映的元数据功能来完成它的工作：

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