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

Question

我有一个场景，我需要测试一个作为 @Viewchild 引用的函数。

我的组件.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();
            });
        });
    }

所以在我的 Spec 文件中，我做了以下操作

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

以上测试用例工作正常。

但我现在确定如何测试此函数 renderEntityRanges。

它做的是renderEntityRanges，如果type是title，它会检查ACCORDION_ITEM中的类型，然后将对 this.renderEngineService.setRootViewContainerRef 进行服务调用，输入为 this.title。

所以请帮助如何对该功能进行单元测试。

Answer 1

为了更正 renderEntityRanges，我已将 this.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();
            });
        });
    }

并在 constructor 中将 renderEngineService 和 changeDetectorRef 设为 public 以进行监视:

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_ITEM 具有同时满足 types 和 section.rjf = [ some array to iterate over]

的数据