单元测试延迟加载的组件

问题描述

我正在使用以下代码片段懒惰地加载组件及其模块：

@ViewChild(TemplateRef,{ read: ViewContainerRef })
private templateViewContainerRef: ViewContainerRef;

constructor(
  private readonly componentFactoryResolver: ComponentFactoryResolver,private readonly injector: Injector
) {}

ngOnInit() {
  this.loadModuleAndComponent();
}

private async loadModuleAndComponent() {
  import('@scope/package').then(({ LazyModule,LazyComponent }) => {
    // load module to set up store etc.
    createInjector(LazyModule,this.injector).get(LazyModule);

    // create component instance
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(LazyComponent);
    const componentRef = this.templateViewContainerRef.createComponent(componentFactory);
  

    // set data of the component
    // how to test?
    componentRef.instance.data = {};

    // handle emitted events
    // how to test?
    componentRef.instance.actionPerformed
      .asObservable()
      .pipe(take(1))
      .subscribe((action) => {});
  });
}

虽然此方法工作正常，但我不确定如何测试{{1}的输入（即组件获得data）和发出的事件（即actionPerformed事件） }。

在Angular 9之前，我猜想应该使用SpyNgModuleFactoryLoader，但是现在不建议使用@L_502_1@。

您可以找到一个running example on StackBlitz。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）