test(material-experimental/mdc-menu): add missing test coverage

Adds tests that were missing from the `mdc-menu` module.

Author: crisbeto

scripts/check-mdc-tests.ts

@@ -64,7 +64,7 @@ function getTestNames(files: string[]): string[] {
 
     sourceFile.forEachChild(function walk(node: ts.Node) {
       if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) &&
-          node.expression.text === 'it') {
+          (node.expression.text === 'it' || node.expression.text === 'xit')) {
         // Note that this is a little naive since it'll take the literal text of the test
         // name expression which could include things like string concatenation. It's fine
         // for the limited use cases of the script.

src/material-experimental/mdc-menu/menu.spec.ts

@@ -14,6 +14,7 @@ import {
   QueryList,
   Type,
   Provider,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import {Direction, Directionality} from '@angular/cdk/bidi';
 import {OverlayContainer, Overlay} from '@angular/cdk/overlay';
@@ -243,6 +244,42 @@ describe('MDC-based MatMenu', () => {
     expect(backdrop.classList).toContain('custom-backdrop');
   }));
 
+
+  it('should be able to set a custom class on the overlay panel', fakeAsync(() => {
+    const optionsProvider =  {
+      provide: MAT_MENU_DEFAULT_OPTIONS,
+      useValue: {overlayPanelClass: 'custom-panel-class'}
+    };
+    const fixture = createComponent(SimpleMenu, [optionsProvider], [FakeIcon]);
+
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+    tick(500);
+
+    const overlayPane = <HTMLElement>overlayContainerElement.querySelector('.cdk-overlay-pane');
+
+    expect(overlayPane.classList).toContain('custom-panel-class');
+  }));
+
+  it('should be able to set a custom classes on the overlay panel', fakeAsync(() => {
+    const optionsProvider =  {
+      provide: MAT_MENU_DEFAULT_OPTIONS,
+      useValue: {overlayPanelClass: ['custom-panel-class-1', 'custom-panel-class-2']}
+    };
+    const fixture = createComponent(SimpleMenu, [optionsProvider], [FakeIcon]);
+
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+    tick(500);
+
+    const overlayPane = <HTMLElement>overlayContainerElement.querySelector('.cdk-overlay-pane');
+
+    expect(overlayPane.classList).toContain('custom-panel-class-1');
+    expect(overlayPane.classList).toContain('custom-panel-class-2');
+  }));
+
   it('should restore focus to the root trigger when the menu was opened by mouse', fakeAsync(() => {
     const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
     fixture.detectChanges();
@@ -906,6 +943,25 @@ describe('MDC-based MatMenu', () => {
     flush();
   }));
 
+  it('should open submenus when the menu is inside an OnPush component', fakeAsync(() => {
+    const fixture = createComponent(LazyMenuWithOnPush);
+    fixture.detectChanges();
+
+    // Open the top-level menu
+    fixture.componentInstance.rootTrigger.nativeElement.click();
+    fixture.detectChanges();
+    flush();
+
+    // Dispatch a `mouseenter` on the menu item to open the submenu.
+    // This will only work if the top-level menu is aware the this menu item exists.
+    dispatchMouseEvent(fixture.componentInstance.menuItemWithSubmenu.nativeElement, 'mouseenter');
+    fixture.detectChanges();
+    flush();
+
+    expect(overlayContainerElement.querySelectorAll('.mat-mdc-menu-item').length)
+        .toBe(2, 'Expected two open menus');
+  }));
+
   it('should focus the menu panel if all items are disabled', fakeAsync(() => {
     const fixture = createComponent(SimpleMenuWithRepeater, [], [FakeIcon]);
     fixture.componentInstance.items.forEach(item => item.disabled = true);
@@ -2588,6 +2644,30 @@ class SimpleMenuWithRepeaterInLazyContent {
 }
 
 
+@Component({
+  template: `
+    <button [matMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>
+
+    <mat-menu #menu="matMenu">
+      <ng-template matMenuContent>
+        <button [matMenuTriggerFor]="menu2" mat-menu-item #menuItem>Item</button>
+      </ng-template>
+    </mat-menu>
+
+    <mat-menu #menu2="matMenu">
+      <ng-template matMenuContent>
+        <button mat-menu-item #subMenuItem>Sub item</button>
+      </ng-template>
+    </mat-menu>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class LazyMenuWithOnPush {
+  @ViewChild('triggerEl', {read: ElementRef}) rootTrigger: ElementRef;
+  @ViewChild('menuItem', {read: ElementRef}) menuItemWithSubmenu: ElementRef;
+}
+
+
 @Component({
   template: `
     <mat-menu #menu="matMenu">