angular - angular 7 karma测试中如何测试组件是否动态加载？

Question

我制作了一个组件，我在其中动态加载另一个在 ng serve 上运行良好的组件。下面是动态加载组件的代码。

import { Component, OnInit, ViewChild, ComponentFactoryResolver, Type, Input} from '@angular/core';
import { AddComponentDirective } from '../add-component.directive';
import { DynamicComponent } from '../dynamic/dynamic.component';
import { ComponentData } from '../component-data';
import { ComponentItem } from '../component-item';

  export class DynamicLoaderComponent implements OnInit {
      @ViewChild (AddComponentDirective) adhost : AddComponentDirective;

      constructor(private componentFactoryResolver : ComponentFactoryResolver) { }

      ngOnInit() {
          this.loadComponent(DynamicComponent,message,this.adhost);
      }

      loadComponent(comp, message, host){
          let adItem = new ComponentItem(comp,{msg: message});
          let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
          let viewContainerRef = host.viewContainer;
          let componentRef = viewContainerRef.createComponent(componentFactory);
      (<ComponentData>componentRef.instance).data = adItem.data;
    }
 }

但是在使用 Angular karma 测试对其进行测试时，我们面临类型错误，即

TypeError: this.componentFactoryResolver.resolveComponentFactory is not a function

下面是 spec.ts 文件，我是如何测试它的。

import { async, ComponentFixture, TestBed ,getTestBed,inject} from '@angular/core/testing';
import {ComponentFactoryResolver,ViewChild,DebugElement} from '@angular/core';
import { AddComponentDirective } from '../add-component.directive';
import { DynamicComponent } from '../dynamic/dynamic.component';
import { DynamicLoaderComponent } from './dynamic-loader.component';
import { BrowserDynamicTestingModule } from "@angular/platform-browser-dynamic/testing";
import { ComponentData } from "../component-data";

describe('DynamicLoaderComponent', () => {
  let component: DynamicLoaderComponent;
  let fixture: ComponentFixture<DynamicLoaderComponent>;
  let injector: TestBed;
  let componentFactoryResolver : ComponentFactoryResolver ;
  let debugElement: DebugElement

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DynamicLoaderComponent,AddComponentDirective ,DynamicComponent],
      providers:[DynamicLoaderComponent,ComponentFactoryResolver]
    })
    .compileComponents();

    TestBed.overrideModule(BrowserDynamicTestingModule, {
      set: {
        entryComponents: [DynamicComponent]
      }
    });

  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DynamicLoaderComponent);
    component = fixture.componentInstance;
    componentFactoryResolver =  fixture.debugElement.injector.get(ComponentFactoryResolver);
    fixture.detectChanges();
  });  

  it('should create the DynamicLoaderComponent',inject([DynamicLoaderComponent], (component : DynamicLoaderComponent) => {
    expect(component).toBeTruthy();
  }));

});

你能帮我解决这个问题，以便我可以进一步进行动态组件的测试吗？

Answer 1

您需要进行几项更改才能修复这些错误:

1) 从 TestBed 配置中移除 providers

TestBed.configureTestingModule({
  declarations: [ DynamicLoaderComponent,AddComponentDirective ,DynamicComponent],
  providers:[DynamicLoaderComponent,ComponentFactoryResolver] <== remove this line
})

2) 你不需要从 DI 获取你的组件，

所以替换

it('should create the DynamicLoaderComponent', inject([DynamicLoaderComponent], (component : DynamicLoaderComponent) => {
  expect(component).toBeTruthy();
}));

与:

it('should create the DynamicLoaderComponent', () => {
  expect(component).toBeTruthy();
});

3) 只有在非 CLI 环境中运行测试时才需要调用 compileComponents()。

来自 Angular doc

Calling compileComponents() closes the current TestBed instance to further configuration. You cannot call any more TestBed configuration methods, not configureTestingModule() nor any of the override... methods. The TestBed throws an error if you try.

这意味着您的 TestBed.overrideModule 调用不会有任何效果，并且不会找到 DynamicComponent 的工厂。

所以删除 .compileComponents();

TestBed.configureTestingModule({
  declarations: [ DynamicLoaderComponent,AddComponentDirective ,DynamicComponent],
  providers:[DynamicLoaderComponent,ComponentFactoryResolver]
})
.compileComponents(); <==== remove this

如果你在非 angular-cli 环境中，那么你可以在覆盖模块后调用它:

TestBed.overrideModule(BrowserDynamicTestingModule, {
  set: {
    entryComponents: [DynamicComponent]
  }
});

TestBed.compileComponents(); <== this line

---

在我上面写的所有更改之后，测试应该没有任何错误地执行。

Plunker Example