如何测试具有ComponentPortal属性的组件？

Question

我正在尝试建立用于测试具有ComponentPortal属性的组件的环境，但是我陷入了与ComponentPortal属性有关的错误：

  

未找到ToolsAttributesComponent的组件工厂。您是否将其添加到@ NgModule.entryComponents？

这是我的代码：

组件：

import {ComponentPortal} from '@angular/cdk/portal';
import {AfterViewInit, ChangeDetectorRef, Component, ViewChild} from '@angular/core';
import {MatCardContent} from '@angular/material/card';
import {MatSidenavModule} from '@angular/material/sidenav';
import {CreateDrawingFormValues} from '../../../data-structures/CreateDrawingFormValues';
import {ToolsAttributesComponent} from '../tools-attributes/tools-attributes.component';
import {WorkZoneComponent} from '../work-zone/work-zone.component';

@Component({
  selector: 'app-drawing-view',
  templateUrl: './drawing-view.component.html',
  styleUrls: ['./drawing-view.component.scss'],
})
export class DrawingViewComponent implements AfterViewInit {
  @ViewChild('workZoneComponent', {static: false}) workZoneComponent: WorkZoneComponent;
  @ViewChild('attributesSideNav', {static: false}) attributesSideNav: MatSidenavModule;
  @ViewChild('toolsAttributes', {static: false}) toolsAttributes: MatCardContent;

  protected toolAttributesComponent: ComponentPortal<ToolsAttributesComponent>;

  constructor(private cd: ChangeDetectorRef) {
    this.toolAttributesComponent = new ComponentPortal(ToolsAttributesComponent);
  }

  ngAfterViewInit() {
    this.cd.detectChanges();
  }

  protected onCreateDrawing(formValues: CreateDrawingFormValues) {
    this.workZoneComponent.color = formValues.color;
    this.workZoneComponent.height = formValues.height;
    this.workZoneComponent.width = formValues.width;
  }
}

规格：

// import {ComponentPortal, PortalModule} from '@angular/cdk/portal';
import {PortalModule} from '@angular/cdk/portal';
import {CommonModule} from '@angular/common';
import {ChangeDetectorRef, Component, NO_ERRORS_SCHEMA} from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing';
import {DemoMaterialModule} from '../../../material.module';
// import {MatSidenavModule} from '@angular/material/sidenav';
// import {ToolsAttributesComponent} from '../tools-attributes/tools-attributes.component';
import { DrawingViewComponent } from './drawing-view.component';
// import {NgTemplateOutlet} from "@angular/common";

/* tslint:disable:max-classes-per-file for mocking classes*/

@Component({selector: 'app-lateral-bar', template: ''})
class LateralBarStubComponent {}

@Component({selector: 'app-welcome-modal', template: ''})
class WelcomeModalStubComponent {}

@Component({selector: '<app-work-zone', template: ''})
class WorkZoneStubComponent {}

@Component({selector: '<app-tools-attributes', template: ''})
class ToolsAttributesStubComponent {}

@Component({selector: '<app-tools-attributes-one', template: ''})
class ToolsAttributesComponent {}

fdescribe('DrawingViewComponent', () => {
  let component: DrawingViewComponent;
  let fixture: ComponentFixture<DrawingViewComponent>;
  // let toolSelectorServiceStub: Partial<ToolSelectorService>;
  // const cp = new ComponentPortal <ToolsAttributesComponent>(ToolsAttributesComponent);

  beforeAll(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        DrawingViewComponent,
        WelcomeModalStubComponent,
        LateralBarStubComponent,
        ToolsAttributesStubComponent,
        WorkZoneStubComponent,
        ToolsAttributesComponent,
      ],
      imports: [
        DemoMaterialModule,
        CommonModule,
        PortalModule,
      ],
      providers: [ChangeDetectorRef],
      schemas: [ NO_ERRORS_SCHEMA ],
    })
    .compileComponents().then( () => {
      TestBed.overrideModule(
        BrowserDynamicTestingModule,
        { set: { entryComponents: [ToolsAttributesComponent] },
        });
      fixture = TestBed.createComponent(DrawingViewComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  }));

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

HTML：

<app-welcome-modal></app-welcome-modal>

<mat-sidenav-container class="lateral-bar-container">

  <!-- Tools Side Nav -->
  <mat-sidenav mode="side" opened id="tools-side-nav">
    <app-lateral-bar (createDrawing)="onCreateDrawing($event)"
                     [attributesSideNav]="attributesSideNav">
    </app-lateral-bar>
  </mat-sidenav>

  <!-- Attributes Side Nav -->
  <mat-sidenav mode="side" position="end" #attributesSideNav id="attributes-side-nav">
    <ng-template [cdkPortalHost]="toolAttributesComponent"></ng-template>
  </mat-sidenav>

  <!-- the content is simply the work zone containing the drawing -->
    <mat-sidenav-content id="workZone">
      <app-work-zone #workZoneComponent></app-work-zone>
    </mat-sidenav-content>

</mat-sidenav-container>

我已经尝试覆盖spec中的entryComponents条目，但似乎没有任何效果：（。