Блог

Как я могу модульно протестировать компонент, который использует другой компонент, использующий проекцию содержимого с помощью ng-шаблона? Поскольку это модульный тест, я хотел бы пощадить объявление другого компонента.

Вот пример:

 Component({
  selector: "my-confirmation",
  template: `
    <ng-container *ngFor="let checkboxTemplate of checkboxTemplates">
      <ng-container *ngTemplateOutlet="checkboxTemplate"></ng-container>
    </ng-container>
`,
})
export class ConfirmationComponent {  @Output() public close = new EventEmitter<boolean>();
  @ContentChildren("checkboxTemplate") public checkboxTemplates: QueryList<TemplateRef<void>>;
}

@Component({
  template: `
    <my-confirmation>
      <ng-template #checkboxTemplate>
        <mat-checkbox id="dont-ask">
          Do not show this again.
        </mat-checkbox>
      </ng-template>
    </my-confirmation>
`
})
export class UnderTestComponent {}



describe('UnderTestComponent', () => {
  let component: UnderTestComponent;
  let fixture: ComponentFixture<UnderTestComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        UnderTestComponent,
        // This is a unit test, I do not want to include other components
        // ConfirmationComponent
      ]
    });
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(UnderTestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(fixture.debugElement.query(By.css("#dont-ask")).toBeTruthy();
  });
});