Угловое модульное тестирование - Как я могу получить дочерний компонент внутри оверлейного контейнера

Question

У меня есть пользовательский компонент с именем MatSelectControls, который используется следующим образом:

<component-im-testing>
   <mat-select>
      <mat-select-controls></mat-select-controls>
      <mat-option *ngFor="..."></mat-option>
   </mat-select>
</component-im-testing>

В моем тесте я могу получить экземпляр MatSelect следующим образом:

const matSelectRef = fixture.debugElement.query(By.directive(MatSelect));
const matSelect = matSelectRef.componentInstance as MatSelect;
matSelect.open();

Но то, что я действительно ищу, - это MatSelectControls компонент.Попытка выбрать его тем же способом не работает:

const matControlsRef = fixture.debugElement.query(By.directive(MatSelectControls)); //returns null

Я предполагаю, что это не работает, потому что MatSelectControls фактически рендерит внутри оверлея cdk, который создает MatSelect.

Как я могу получить экземпляр компонента MatSelectControls, даже если он действительно отображается внутри оверлея cdk?

Answer 1

Без полного кода трудно помочь, но вы можете просто добавить ссылку на компонент mat-select-controls через @ViewChild() в родительском компоненте:

@ViewChild(MatSelectControls) matSelectControls: MatSelectControls;

И затем использоватьэто в вашем тесте:

component.matSelectControls.abc