Angular unit testing - How can I get the child component inside an overlay container

user_1267778 0
Viewed 1499

I have a custom component called MatSelectControls that is used like so:

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

In my test, I can retrieve the MatSelect instance like so:

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

But what I'm really after is the MatSelectControls component. Trying to select it the same way does not work:

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

I'm assuming this doesn't work because the MatSelectControls actually renders inside of the cdk overlay that MatSelect creates.

How can I retrieve the MatSelectControls component instance even though it actually renders inside the cdk overlay?

angular-material2 angular-test angular
1 Answers

Without the complete code it is difficult to help, but what you could do is simply add a reference to the mat-select-controls component via @ViewChild() in your parent component:

@ViewChild(MatSelectControls) matSelectControls: MatSelectControls;

And then use it in your test:

component.matSelectControls.abc
user_46060400
Related