Angular 如何对作为viewchild的函数进行单元测试

我有一个场景，需要测试一个函数，该函数作为

@Viewchild

引用

My component.ts

    @ViewChild('accTitle', { read: ViewContainerRef, static: false }) title: ViewContainerRef;
    @ViewChild('accText', { read: ViewContainerRef, static: false }) body: ViewContainerRef;

    constructor(
        private renderEngineService: RenderEngineService,
        @Inject(CONTENT_MAPPINGS) private contentMappings: any,
        private changeDetectorRef: ChangeDetectorRef
    ) {}

    ngAfterViewInit() {
        this.renderEntityRanges(this.item);
    }

    renderEntityRanges(item: AreasData) {
        this.item.sections.forEach(section => {
            if (section.type === 'title') {
                this.renderEngineService.setRootViewContainerRef(this.title);
            } else if (section.type === 'text') {
                this.renderEngineService.setRootViewContainerRef(this.body);
            }
            section.rjf.forEach(rjf => {
                const type = this.contentMappings[rjf.type];
                this.renderEngineService.createComponent(rjf, type);
                this.changeDetectorRef.detectChanges();
            });
        });
    }

所以在我的规范文件中，我做了以下工作

  it('should invoke renderEntityRanges', () => {
    const renderEntityRanges = spyOn(accordionItemComponent, 'renderEntityRanges');
    accordionItemComponent.ngAfterViewInit();
    expect(renderEntityRanges).toHaveBeenCalledWith(ACCORDION_ITEM);
  });

上面的测试用例运行良好

但是我现在确定了如何测试这个函数

renderEntityRanges

它的作用是

renderEntityRanges

，它将检查

ACCORDION\u项中的类型

，如果

类型

是

标题

，则将对

this.renderEngineService.setRootViewContainerRef进行服务调用，输入为
this.title

因此，请帮助我们如何对这个函数进行单元测试
 为了更正
renderEntityRanges
，我仅将
此.item
删除为
item
，因为它是作为参数传递的

    renderEntityRanges(item: AreasData) {
        item.sections.forEach(section => {
            if (section.type === 'title') {
                this.renderEngineService.setRootViewContainerRef(this.title);
            } else if (section.type === 'text') {
                this.renderEngineService.setRootViewContainerRef(this.body);
            }
            section.rjf.forEach(rjf => {
                const type = this.contentMappings[rjf.type];
                this.renderEngineService.createComponent(rjf, type);
                this.changeDetectorRef.detectChanges();
            });
        });
    }

并将
renderEngineService
和
changeDetectorRef
作为
公共
在构造函数中进行间谍活动：

public renderEngineService: RenderEngineService,
public changeDetectorRef: ChangeDetectorRef

您可以尝试按以下方式进行测试：

it('should set Container Ref and create component',()=>{
   spyOn(accordionItemComponent.renderEngineService,'setRootViewContainerRef').and.callThrough();
   spyOn(accordionItemComponent.renderEngineService,'createComponent').and.callThrough();
   spyOn(accordionItemComponent.changeDetectorRef,'detectChanges').and.callThrough();
   accordionItemComponent.renderEntityRanges(ACCORDION_ITEM);
   expect(accordionItemComponent.renderEngineService.setRootViewContainerRef).toHaveBeenCalled();
   expect(accordionItemComponent.renderEngineService.createComponent).toHaveBeenCalled();
   expect(accordionItemComponent.changeDetectorRef.detectChanges).toHaveBeenCalled();
})


并确保
ACCORDION\u项
具有同时满足
类型
和
section.rjf=[要迭代的数组]