Rename menu-interface to menu-panel.

Added a test for triggering a custom menu.

Author: trshafer

src/lib/menu/menu-directive.ts

@@ -16,7 +16,7 @@ import {MenuPositionX, MenuPositionY} from './menu-positions';
 import {MdMenuInvalidPositionX, MdMenuInvalidPositionY} from './menu-errors';
 import {MdMenuItem} from './menu-item';
 import {UP_ARROW, DOWN_ARROW, TAB} from '../core';
-import {MdMenuInterface} from './menu-interface';
+import {MdMenuPanel} from './menu-panel';
 
 @Component({
   moduleId: module.id,
@@ -27,7 +27,7 @@ import {MdMenuInterface} from './menu-interface';
   encapsulation: ViewEncapsulation.None,
   exportAs: 'mdMenu'
 })
-export class MdMenu implements MdMenuInterface {
+export class MdMenu implements MdMenuPanel {
   private _focusedItemIndex: number = 0;
 
   // config object to be passed into the menu's ngClass

src/lib/menu/menu-interface.ts renamed to src/lib/menu/menu-panel.ts

@@ -1,7 +1,7 @@
 import {EventEmitter, TemplateRef} from '@angular/core';
 import {MenuPositionX, MenuPositionY} from './menu-positions';
 
-export interface MdMenuInterface {
+export interface MdMenuPanel {
   positionX: MenuPositionX;
   positionY: MenuPositionY;
   templateRef: TemplateRef<any>;

src/lib/menu/menu-trigger.ts

@@ -10,7 +10,7 @@ import {
     OnDestroy,
     Renderer
 } from '@angular/core';
-import {MdMenuInterface} from './menu-interface';
+import {MdMenuPanel} from './menu-panel';
 import {MdMenuMissingError} from './menu-errors';
 import {
     ENTER,
@@ -47,7 +47,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
   // the first item of the list when the menu is opened via the keyboard
   private _openedFromKeyboard: boolean = false;
 
-  @Input('md-menu-trigger-for') menu: MdMenuInterface;
+  @Input('md-menu-trigger-for') menu: MdMenuPanel;
   @Output() onMenuOpen = new EventEmitter();
   @Output() onMenuClose = new EventEmitter();
 

src/lib/menu/menu.spec.ts

@@ -1,6 +1,18 @@
 import {TestBed, async} from '@angular/core/testing';
-import {Component, ViewChild} from '@angular/core';
-import {MdMenuModule, MdMenuTrigger} from './menu';
+import {
+  Component,
+  EventEmitter,
+  Output,
+  TemplateRef,
+  ViewChild
+} from '@angular/core';
+import {
+  MdMenuModule,
+  MdMenuTrigger,
+  MdMenuPanel,
+  MenuPositionX,
+  MenuPositionY
+} from './menu';
 import {OverlayContainer} from '../core/overlay/overlay-container';
 
 
@@ -10,7 +22,7 @@ describe('MdMenu', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [MdMenuModule.forRoot()],
-      declarations: [SimpleMenu],
+      declarations: [CustomMenuPanel, CustomMenu, SimpleMenu],
       providers: [
         {provide: OverlayContainer, useFactory: () => {
           overlayContainerElement = document.createElement('div');
@@ -30,7 +42,7 @@ describe('MdMenu', () => {
       fixture.componentInstance.trigger.openMenu();
       fixture.componentInstance.trigger.openMenu();
 
-      expect(overlayContainerElement.textContent.trim()).toBe('Content');
+      expect(overlayContainerElement.textContent.trim()).toBe('Simple Content');
     }).not.toThrowError();
   });
 
@@ -46,16 +58,59 @@ describe('MdMenu', () => {
     expect(overlayContainerElement.textContent).toBe('');
   });
 
+  it('should open a custom menu', () => {
+    const fixture = TestBed.createComponent(CustomMenu);
+    fixture.detectChanges();
+    expect(overlayContainerElement.textContent).toBe('');
+    expect(() => {
+      fixture.componentInstance.trigger.openMenu();
+      fixture.componentInstance.trigger.openMenu();
+
+      expect(overlayContainerElement.textContent).toContain('Custom Menu header');
+      expect(overlayContainerElement.textContent).toContain('Custom Content');
+    }).not.toThrowError();
+  });
+
 });
 
 @Component({
   template: `
     <button [md-menu-trigger-for]="menu">Toggle menu</button>
     <md-menu #menu="mdMenu">
-      <button md-menu-item> Content </button>
+      <button md-menu-item> Simple Content </button>
     </md-menu>
   `
 })
 class SimpleMenu {
   @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger;
 }
+
+@Component({
+  selector: 'custom-menu',
+  template: `
+    <template>
+      Custom Menu header
+      <ng-content></ng-content>
+    </template>
+  `,
+  exportAs: 'mdCustomMenu'
+})
+class CustomMenuPanel implements MdMenuPanel {
+  positionX: MenuPositionX = 'after';
+  positionY: MenuPositionY = 'below';
+  @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
+  @Output() close = new EventEmitter<void>();
+  _focusFirstItem: () => void;
+}
+
+@Component({
+  template: `
+    <button [md-menu-trigger-for]="menu">Toggle menu</button>
+    <custom-menu #menu="mdCustomMenu">
+      <button md-menu-item> Custom Content </button>
+    </custom-menu>
+  `
+})
+class CustomMenu {
+  @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger;
+}

src/lib/menu/menu.ts

@@ -7,7 +7,7 @@ import {MdMenuTrigger} from './menu-trigger';
 export {MdMenu} from './menu-directive';
 export {MdMenuItem} from './menu-item';
 export {MdMenuTrigger} from './menu-trigger';
-export {MdMenuInterface} from './menu-interface';
+export {MdMenuPanel} from './menu-panel';
 export {MenuPositionX, MenuPositionY} from './menu-positions';