fix(aria/menu): update unit tests to use ngMenuContent

Author: wagnermaciel

src/aria/menu/menu.spec.ts

@@ -1,7 +1,7 @@
 import {Component, DebugElement} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
-import {Menu, MenuBar, MenuItem, MenuTrigger} from './menu';
+import {Menu, MenuBar, MenuContent, MenuItem, MenuTrigger} from './menu';
 import {provideFakeDirectionality} from '@angular/cdk/testing/private';
 
 describe('Standalone Menu Pattern', () => {
@@ -946,20 +946,25 @@ describe('Menu Bar Pattern', () => {
 @Component({
   template: `
 <div ngMenu [expansionDelay]="0" (onSelect)="onSelect($event)">
-  <div ngMenuItem value='Apple' searchTerm='Apple'>Apple</div>
-  <div ngMenuItem value='Banana' searchTerm='Banana'>Banana</div>
-  <div ngMenuItem value='Berries' searchTerm='Berries' [submenu]="berriesMenu">Berries</div>
-
-  <div ngMenu [expansionDelay]="0" #berriesMenu="ngMenu">
-    <div ngMenuItem value='Blueberry' searchTerm='Blueberry'>Blueberry</div>
-    <div ngMenuItem value='Blackberry' searchTerm='Blackberry'>Blackberry</div>
-    <div ngMenuItem value='Strawberry' searchTerm='Strawberry'>Strawberry</div>
-  </div>
-
-  <div ngMenuItem value='Cherry' searchTerm='Cherry' [disabled]="true">Cherry</div>
+  <ng-template ngMenuContent>
+    <div ngMenuItem value='Apple' searchTerm='Apple'>Apple</div>
+    <div ngMenuItem value='Banana' searchTerm='Banana'>Banana</div>
+    <div ngMenuItem value='Berries' searchTerm='Berries' [submenu]="berriesMenu">Berries</div>
+
+    <div ngMenu [expansionDelay]="0" #berriesMenu="ngMenu">
+      <ng-template ngMenuContent>
+        <div ngMenuItem value='Blueberry' searchTerm='Blueberry'>Blueberry</div>
+        <div ngMenuItem value='Blackberry' searchTerm='Blackberry'>Blackberry</div>
+        <div ngMenuItem value='Strawberry' searchTerm='Strawberry'>Strawberry</div>
+      </ng-template>
+    </div>
+
+    <div ngMenuItem value='Cherry' searchTerm='Cherry' [disabled]="true">Cherry</div>
+  </ng-template>
 </div>
   `,
-  imports: [Menu, MenuItem],
+  imports: [Menu, MenuItem, MenuContent],
+  standalone: true,
 })
 class StandaloneMenuExample {
   onSelect(value: string) {}
@@ -970,20 +975,25 @@ class StandaloneMenuExample {
 <button ngMenuTrigger [menu]="menu">Open menu</button>
 
 <div ngMenu [expansionDelay]="0" #menu="ngMenu">
-  <div ngMenuItem value='Apple' searchTerm='Apple'>Apple</div>
-  <div ngMenuItem value='Banana' searchTerm='Banana'>Banana</div>
-  <div ngMenuItem value='Berries' searchTerm='Berries' [submenu]="berriesMenu">Berries</div>
-
-  <div ngMenu [expansionDelay]="0" #berriesMenu="ngMenu">
-    <div ngMenuItem value='Blueberry' searchTerm='Blueberry'>Blueberry</div>
-    <div ngMenuItem value='Blackberry' searchTerm='Blackberry'>Blackberry</div>
-    <div ngMenuItem value='Strawberry' searchTerm='Strawberry'>Strawberry</div>
-  </div>
-
-  <div ngMenuItem value='Cherry' searchTerm='Cherry'>Cherry</div>
+  <ng-template ngMenuContent>
+    <div ngMenuItem value='Apple' searchTerm='Apple'>Apple</div>
+    <div ngMenuItem value='Banana' searchTerm='Banana'>Banana</div>
+    <div ngMenuItem value='Berries' searchTerm='Berries' [submenu]="berriesMenu">Berries</div>
+
+    <div ngMenu [expansionDelay]="0" #berriesMenu="ngMenu">
+      <ng-template ngMenuContent>
+        <div ngMenuItem value='Blueberry' searchTerm='Blueberry'>Blueberry</div>
+        <div ngMenuItem value='Blackberry' searchTerm='Blackberry'>Blackberry</div>
+        <div ngMenuItem value='Strawberry' searchTerm='Strawberry'>Strawberry</div>
+      </ng-template>
+    </div>
+
+    <div ngMenuItem value='Cherry' searchTerm='Cherry'>Cherry</div>
+  </ng-template>
 </div>
   `,
-  imports: [Menu, MenuItem, MenuTrigger],
+  imports: [Menu, MenuItem, MenuTrigger, MenuContent],
+  standalone: true,
 })
 class MenuTriggerExample {}
 
@@ -994,26 +1004,33 @@ class MenuTriggerExample {}
   <div ngMenuItem value='Edit' searchTerm='Edit' [submenu]="editMenu">Edit</div>
 
   <div ngMenu [expansionDelay]="0" #editMenu="ngMenu">
-    <div ngMenuItem value='Undo' searchTerm='Undo'>Undo</div>
-    <div ngMenuItem value='Redo' searchTerm='Redo'>Redo</div>
+    <ng-template ngMenuContent>
+      <div ngMenuItem value='Undo' searchTerm='Undo'>Undo</div>
+      <div ngMenuItem value='Redo' searchTerm='Redo'>Redo</div>
+    </ng-template>
   </div>
 
   <div ngMenuItem [submenu]="viewMenu" value='View' searchTerm='View'>View</div>
 
   <div ngMenu [expansionDelay]="0" #viewMenu="ngMenu">
-    <div ngMenuItem value='Zoom In' searchTerm='Zoom In'>Zoom In</div>
-    <div ngMenuItem value='Zoom Out' searchTerm='Zoom Out'>Zoom Out</div>
-    <div ngMenuItem value='Full Screen' searchTerm='Full Screen'>Full Screen</div>
+    <ng-template ngMenuContent>
+      <div ngMenuItem value='Zoom In' searchTerm='Zoom In'>Zoom In</div>
+      <div ngMenuItem value='Zoom Out' searchTerm='Zoom Out'>Zoom Out</div>
+      <div ngMenuItem value='Full Screen' searchTerm='Full Screen'>Full Screen</div>
+    </ng-template>
   </div>
 
   <div ngMenuItem [submenu]="helpMenu" value='Help' searchTerm='Help'>Help</div>
 
   <div ngMenu [expansionDelay]="0" #helpMenu="ngMenu">
-    <div ngMenuItem value='Documentation' searchTerm='Documentation'>Documentation</div>
-    <div ngMenuItem value='About' searchTerm='About'>About</div>
+    <ng-template ngMenuContent>
+      <div ngMenuItem value='Documentation' searchTerm='Documentation'>Documentation</div>
+      <div ngMenuItem value='About' searchTerm='About'>About</div>
+    </ng-template>
   </div>
 </div>
   `,
-  imports: [Menu, MenuBar, MenuItem],
+  imports: [Menu, MenuBar, MenuItem, MenuContent],
+  standalone: true,
 })
 class MenuBarExample {}