docs(material/menu): add harness example for menu

Author: annieyw

src/components-examples/material/menu/BUILD.bazel

@@ -11,9 +11,16 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/menu",
     deps = [
+        "//src/cdk/overlay",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/icon",
         "//src/material/menu",
+        "//src/material/menu/testing",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

src/components-examples/material/menu/index.ts

@@ -6,15 +6,18 @@ import {MenuIconsExample} from './menu-icons/menu-icons-example';
 import {MenuOverviewExample} from './menu-overview/menu-overview-example';
 import {MenuPositionExample} from './menu-position/menu-position-example';
 import {MenuNestedExample} from './menu-nested/menu-nested-example';
+import {MenuHarnessExample} from './menu-harness/menu-harness-example';
 
 export {
+  MenuHarnessExample,
   MenuIconsExample,
   MenuOverviewExample,
   MenuPositionExample,
   MenuNestedExample,
 };
 
 const EXAMPLES = [
+  MenuHarnessExample,
   MenuIconsExample,
   MenuOverviewExample,
   MenuPositionExample,

src/components-examples/material/menu/menu-harness/menu-harness-example.html

@@ -0,0 +1,7 @@
+<button type="button" id="settings" [matMenuTriggerFor]="settingsMenu">Settings</button>
+<button type="button" disabled [matMenuTriggerFor]="settingsMenu">Disabled menu</button>
+
+<mat-menu #settingsMenu>
+  <menu mat-menu-item>Profile</menu>
+  <menu mat-menu-item>Account</menu>
+</mat-menu>

src/components-examples/material/menu/menu-harness/menu-harness-example.spec.ts

@@ -0,0 +1,75 @@
+import {TestBed, ComponentFixture, waitForAsync, inject} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatMenuHarness} from '@angular/material/menu/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatMenuModule} from '@angular/material/menu';
+import {MenuHarnessExample} from './menu-harness-example';
+import {OverlayContainer} from '@angular/cdk/overlay';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+describe('MenuHarnessExample', () => {
+  let fixture: ComponentFixture<MenuHarnessExample>;
+  let loader: HarnessLoader;
+  let overlayContainer: OverlayContainer;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatMenuModule, NoopAnimationsModule],
+        declarations: [MenuHarnessExample]
+      }).compileComponents();
+    }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MenuHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    inject([OverlayContainer], (oc: OverlayContainer) => {
+      overlayContainer = oc;
+    })();
+  });
+
+  afterEach(() => {
+    // Angular won't call this for us so we need to do it ourselves to avoid leaks.
+    overlayContainer.ngOnDestroy();
+    overlayContainer = null!;
+  });
+
+  it('should load all menu harnesses', async () => {
+    const menues = await loader.getAllHarnesses(MatMenuHarness);
+    expect(menues.length).toBe(2);
+  });
+
+  it('should get disabled state', async () => {
+    const [enabledMenu, disabledMenu] = await loader.getAllHarnesses(MatMenuHarness);
+    expect(await enabledMenu.isDisabled()).toBe(false);
+    expect(await disabledMenu.isDisabled()).toBe(true);
+  });
+
+  it('should get menu text', async () => {
+    const [firstMenu, secondMenu] = await loader.getAllHarnesses(MatMenuHarness);
+    expect(await firstMenu.getTriggerText()).toBe('Settings');
+    expect(await secondMenu.getTriggerText()).toBe('Disabled menu');
+  });
+
+  it('should open and close', async () => {
+    const menu = await loader.getHarness(MatMenuHarness.with({triggerText: 'Settings'}));
+    expect(await menu.isOpen()).toBe(false);
+    await menu.open();
+    expect(await menu.isOpen()).toBe(true);
+    await menu.close();
+    expect(await menu.isOpen()).toBe(false);
+  });
+
+  it('should get all items', async () => {
+    const menu = await loader.getHarness(MatMenuHarness.with({triggerText: 'Settings'}));
+    await menu.open();
+    expect((await menu.getItems()).length).toBe(2);
+  });
+});

src/components-examples/material/menu/menu-harness/menu-harness-example.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatMenuHarness
+ */
+@Component({
+  selector: 'menu-harness-example',
+  templateUrl: 'menu-harness-example.html',
+})
+export class MenuHarnessExample {}