Lazily loaded menu content with ngIf not showing in testbed

[hags033]

Reproduction

Steps to reproduce:

1. have a lazily loaded mat menu (ng-content>matMenuContent), with mat-menu-items and non mat-menu-items inside with *ngIf(s) on them
2. Use the MatMenuHarness to find and open your mat menu in a unit test
3. use getItems() to locate the mat-menu-items
4. use css.queries to find non mat-menu-items

This started happening as of material, cdk, cdk experimental 10.1.2

Expected Behavior

I would expect to be able to query non mat-menu-item(s) with css, using the harness to open lazily loaded mat menu content area.

Harness getItems() will find the menu item if ngIf is true and won't find if false, which works as expected.

Actual Behavior

You can query and find non mat-menu-items in the test only if they do not have an ngIf on them. You cannot query and find non mat-menu-items if they have an ngIf on them regardless if the ngIf is true or false.

Environment

• Angular: 10.0.8
• CDK/Material: 10.1.3
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

Can you post what the template of the test component looks like?

[hags033]

<button [matMenuTriggerFor]="subMenu">Click Me</button>
<mat-menu #subMenu="matMenu">
  <ng-template matMenuContent>
    <div mat-menu-item>item 1</div> <!-- found with harness after harness opens menu -->
    <div class="not-menu-item" >item 2</div> <!-- found with css query after opening with harness -->
    <div mat-menu-item *ngIf="true">item 3</div><!-- found with harness after harness opens menu -->
    <div class="not-menu-item" *ngIf="true">item 4</div><!-- not found with css query after opening with harness -->
  </ng-template>
</mat-menu>