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

Question

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?

score 0 · Answer 1 · answered Dec 26 '18 at 20:53

0

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

answered Dec 26 '18 at 20:53

Fabian Küng

5,925
28
40

problem for me here is: how can I know the moment that matSelectControls becomes defined – Janiiik Mar 21 '19 at 10:23
Something like this `fixture.detectChanges(); fixture.whenStable().then(() => { /* code here */ }`. – Fabian Küng Mar 21 '19 at 11:08

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

1 Answers1