WIP: fix tests

src/cdk/a11y/key-manager/list-key-manager.ts

@@ -68,8 +68,10 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
     // We allow for the items to be an array because, in some cases, the consumer may
     // not have access to a QueryList of the items they want to manage (e.g. when the
     // items aren't being collected via `ViewChildren` or `ContentChildren`).
+    console.log('ListKeyManager > #Items', this._items.length);
     if (_items instanceof QueryList) {
       this._itemChangesSubscription = _items.changes.subscribe((newItems: QueryList<T>) => {
+        console.log('ListKeyManager > #Items', this._items.length);
         if (this._activeItem) {
           const itemArray = newItems.toArray();
           const newIndex = itemArray.indexOf(this._activeItem);

src/dev-app/menu/menu-demo.html

@@ -9,13 +9,15 @@
     </mat-toolbar>
 
     <mat-menu #menu="matMenu">
-      @for (item of items; track item) {
-        <button mat-menu-item (click)="select(item.text)" [disabled]="item.disabled">
-          {{ item.text }}
-        </button>
-      }
+      <ng-template matMenuContent>
+        @for (item of items; track item) {
+          <button mat-menu-item (click)="select(item.text)" [disabled]="item.disabled">
+            {{ item.text }}
+          </button>
+        }
+      </ng-template>
     </mat-menu>
-  </div>
+  </div><!--
   <div class="demo-menu-section">
     <p>Menu with divider</p>
 
@@ -191,7 +193,7 @@
         <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
       }
     </mat-menu>
-  </div>
+  </div>-->
 </div>
 
 <div style="height: 500px">This div is for testing scrolled menus.</div>

src/material/menu/menu-content.ts

@@ -81,6 +81,7 @@ export class MatMenuContent implements OnDestroy {
    * @docs-private
    */
   attach(context: any = {}) {
+    console.log('MatMenuContent > attach');
     if (!this._portal) {
       this._portal = new TemplatePortal(this._template, this._viewContainerRef);
     }

src/material/menu/menu-trigger.ts

@@ -319,6 +319,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
 
   /** Opens the menu. */
   openMenu(): void {
+    console.log('MatMenuTrigger > openMenu');
     const menu = this.menu;
 
     if (this._menuOpen || !menu) {

src/material/menu/menu.spec.ts

@@ -1,4 +1,11 @@
-import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing';
+import {
+  ComponentFixture,
+  fakeAsync,
+  flush,
+  TestBed,
+  tick,
+  waitForAsync,
+} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {
@@ -772,27 +779,14 @@ describe('MDC-based MatMenu', () => {
   }));
 
   it('should set the proper origin when calling focusFirstItem after the opening sequence has started', () => {
-    let zone: MockNgZone;
-    const fixture = createComponent(
-      SimpleMenu,
-      [
-        {
-          provide: NgZone,
-          useFactory: () => (zone = new MockNgZone()),
-        },
-      ],
-      [FakeIcon],
-    );
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
     fixture.detectChanges();
     spyOn(fixture.componentInstance.items.first, 'focus').and.callThrough();
 
-    const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
-
-    dispatchMouseEvent(triggerEl, 'mousedown');
-    triggerEl.click();
-    fixture.detectChanges();
+    fixture.componentInstance.trigger.openMenu();
+    fixture.componentInstance.menu.focusFirstItem('mouse');
     fixture.componentInstance.menu.focusFirstItem('touch');
-    zone!.onStable.next();
+    fixture.detectChanges();
 
     expect(fixture.componentInstance.items.first.focus).toHaveBeenCalledOnceWith('touch');
   });
@@ -1304,25 +1298,16 @@ describe('MDC-based MatMenu', () => {
       expect(trigger.menuOpen).withContext('Expected menu to be closed').toBe(false);
     }));
 
-    it('should focus the first menu item when opening a lazy menu via keyboard', fakeAsync(() => {
-      let zone: MockNgZone;
-      let fixture = createComponent(SimpleLazyMenu, [
-        {
-          provide: NgZone,
-          useFactory: () => (zone = new MockNgZone()),
-        },
-      ]);
+    fit('should focus the first menu item when opening a lazy menu via keyboard', waitForAsync(async () => {
+      let fixture = createComponent(SimpleLazyMenu);
 
       fixture.detectChanges();
 
       // A click without a mousedown before it is considered a keyboard open.
+      console.log('Test > click');
       fixture.componentInstance.triggerEl.nativeElement.click();
+      console.log('Test > detectChanges');
       fixture.detectChanges();
-      tick(500);
-      zone!.simulateZoneExit();
-
-      // Flush due to the additional tick that is necessary for the FocusMonitor.
-      flush();
 
       const item = document.querySelector('.mat-mdc-menu-panel [mat-menu-item]')!;
 

src/material/menu/menu.ts

@@ -425,10 +425,12 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
    * @param origin Action from which the focus originated. Used to set the correct styling.
    */
   focusFirstItem(origin: FocusOrigin = 'program'): void {
+    console.log('MatMenu > focusFirstItem');
     // Wait for `afterNextRender` to ensure iOS VoiceOver screen reader focuses the first item (#24735).
     this._firstItemFocusRef?.destroy();
     this._firstItemFocusRef = afterNextRender(
       () => {
+        console.log('MatMenu > focusFirstItem > afterNextRender');
         let menuPanel: HTMLElement | null = null;
 
         if (this._directDescendantItems.length) {