feat(cdk-experimental/menu): Implement grouping logic for menuitems

src/cdk-experimental/menu/BUILD.bazel

@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -15,3 +15,20 @@ ng_module(
         "@npm//rxjs",
     ],
 )
+
+ng_test_library(
+    name = "unit_test_sources",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":menu",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)

src/cdk-experimental/menu/menu-bar.spec.ts

@@ -0,0 +1,88 @@
+import {ComponentFixture, TestBed, async} from '@angular/core/testing';
+import {Component} from '@angular/core';
+import {CdkMenuBar} from './menu-bar';
+import {CdkMenuModule} from './menu-module';
+import {CdkMenuItem} from './menu-item';
+import {By} from '@angular/platform-browser';
+
+describe('MenuBar', () => {
+  describe('as radio group', () => {
+    let fixture: ComponentFixture<MenuBarRadioGroup>;
+    let menuItems: Array<CdkMenuItem>;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [CdkMenuModule],
+        declarations: [MenuBarRadioGroup],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(MenuBarRadioGroup);
+      fixture.detectChanges();
+
+      menuItems = fixture.debugElement
+        .queryAll(By.directive(CdkMenuItem))
+        .map((element) => element.injector.get(CdkMenuItem));
+    }));
+
+    it('should toggle menuitemradio items', () => {
+      expect(menuItems[0].checked).toBeTrue();
+      expect(menuItems[1].checked).toBeFalse();
+
+      menuItems[1].trigger();
+
+      expect(menuItems[0].checked).toBeFalse();
+      expect(menuItems[1].checked).toBeTrue();
+    });
+  });
+
+  describe('radiogroup change events', () => {
+    let fixture: ComponentFixture<MenuBarRadioGroup>;
+    let menuItems: Array<CdkMenuItem>;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [CdkMenuModule],
+        declarations: [MenuBarRadioGroup],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(MenuBarRadioGroup);
+
+      fixture.detectChanges();
+
+      menuItems = fixture.debugElement
+        .queryAll(By.directive(CdkMenuItem))
+        .map((element) => element.injector.get(CdkMenuItem));
+    }));
+
+    it('should emit on click', () => {
+      const spy = jasmine.createSpy('cdkMenu change spy');
+      fixture.debugElement
+        .query(By.directive(CdkMenuBar))
+        .injector.get(CdkMenuBar)
+        .change.subscribe(spy);
+
+      menuItems[0].trigger();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith(menuItems[0]);
+    });
+  });
+});
+
+@Component({
+  template: `
+    <ul cdkMenuBar>
+      <li role="none">
+        <button checked="true" role="menuitemradio" cdkMenuItem>
+          first
+        </button>
+      </li>
+      <li role="none">
+        <button role="menuitemradio" cdkMenuItem>
+          second
+        </button>
+      </li>
+    </ul>
+  `,
+})
+class MenuBarRadioGroup {}

src/cdk-experimental/menu/menu-bar.ts

@@ -6,7 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, Input} from '@angular/core';
+import {Directive, Input, ContentChildren, QueryList} from '@angular/core';
+import {CdkMenuGroup} from './menu-group';
+import {CdkMenuItem} from './menu-item';
 
 /**
  * Directive applied to an element which configures it as a MenuBar by setting the appropriate
@@ -21,11 +23,16 @@ import {Directive, Input} from '@angular/core';
     'role': 'menubar',
     '[attr.aria-orientation]': 'orientation',
   },
+  providers: [{provide: CdkMenuGroup, useExisting: CdkMenuBar}],
 })
-export class CdkMenuBar {
+export class CdkMenuBar extends CdkMenuGroup {
   /**
    * Sets the aria-orientation attribute and determines where sub-menus will be opened.
    * Does not affect styling/layout.
    */
   @Input('cdkMenuBarOrientation') orientation: 'horizontal' | 'vertical' = 'horizontal';
+
+  /** All the child MenuItem components which this directive wraps including descendants */
+  @ContentChildren(CdkMenuItem, {descendants: true})
+  readonly _allItems: QueryList<CdkMenuItem>;
 }

src/cdk-experimental/menu/menu-group.spec.ts

@@ -0,0 +1,218 @@
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed, async} from '@angular/core/testing';
+import {CdkMenuModule} from './menu-module';
+import {CdkMenuGroup} from './menu-group';
+import {CdkMenuItem} from './menu-item';
+import {CdkMenu} from './menu';
+import {By} from '@angular/platform-browser';
+
+describe('MenuGroup', () => {
+  describe('MenuItem', () => {
+    let fixture: ComponentFixture<MenuGroups>;
+    let menuItems: Array<CdkMenuItem>;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [CdkMenuModule],
+        declarations: [MenuGroups],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(MenuGroups);
+      fixture.detectChanges();
+
+      menuItems = fixture.debugElement
+        .queryAll(By.directive(CdkMenuItem))
+        .map((element) => element.injector.get(CdkMenuItem));
+    }));
+
+    it('should not change state of sibling menuitemcheckbox', () => {
+      menuItems[1].trigger();
+
+      expect(menuItems[0].checked).toBeTrue(); // default state true
+    });
+
+    it('should change state of sibling menuitemradio in same group', () => {
+      menuItems[3].trigger();
+
+      expect(menuItems[3].checked).toBeTrue();
+      expect(menuItems[2].checked).toBeFalse();
+    });
+
+    it('should not change state of menuitemradio in sibling group', () => {
+      menuItems[4].trigger();
+
+      expect(menuItems[4].checked).toBeTrue();
+      expect(menuItems[2].checked).toBeTrue();
+    });
+
+    it('should not change radiogroup state with disabled button', () => {
+      menuItems[3].disabled = true;
+
+      menuItems[3].trigger();
+
+      expect(menuItems[2].checked).toBeTrue();
+      expect(menuItems[3].checked).toBeFalse();
+    });
+  });
+
+  describe('change events', () => {
+    let fixture: ComponentFixture<MenuGroups>;
+    let menu: CdkMenu;
+    let menuItems: Array<CdkMenuItem>;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [CdkMenuModule],
+        declarations: [MenuGroups],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(MenuGroups);
+      fixture.detectChanges();
+
+      menu = fixture.debugElement.query(By.directive(CdkMenu)).injector.get(CdkMenu);
+
+      menuItems = fixture.debugElement
+        .queryAll(By.directive(CdkMenuItem))
+        .map((element) => element.injector.get(CdkMenuItem));
+    }));
+
+    it('should not emit from root menu with nested groups', () => {
+      const spy = jasmine.createSpy('changeSpy for root menu');
+      menu.change.subscribe(spy);
+
+      menuItems.forEach((menuItem) => menuItem.trigger());
+
+      expect(spy).toHaveBeenCalledTimes(0);
+    });
+
+    it('should emit from groups with clicked menu items', () => {
+      const spies: Array<jasmine.Spy> = [];
+
+      fixture.debugElement.queryAll(By.directive(CdkMenuGroup)).forEach((group, index) => {
+        const spy = jasmine.createSpy(`cdkMenuGroup ${index} change spy`);
+        spies.push(spy);
+        group.injector.get(CdkMenuGroup).change.subscribe(spy);
+      });
+
+      menuItems[2].trigger();
+      menuItems[4].trigger();
+
+      expect(spies[1]).toHaveBeenCalledTimes(0);
+      expect(spies[2]).toHaveBeenCalledTimes(1);
+      expect(spies[2]).toHaveBeenCalledWith(menuItems[2]);
+      expect(spies[3]).toHaveBeenCalledTimes(1);
+      expect(spies[3]).toHaveBeenCalledWith(menuItems[4]);
+    });
+
+    it('should not emit with click on disabled button', () => {
+      const spy = jasmine.createSpy('cdkMenuGroup change spy');
+
+      fixture.debugElement
+        .queryAll(By.directive(CdkMenuGroup))[3]
+        .injector.get(CdkMenuGroup)
+        .change.subscribe(spy);
+      menuItems[4].disabled = true;
+
+      menuItems[4].trigger();
+
+      expect(spy).toHaveBeenCalledTimes(0);
+    });
+
+    it('should not emit from sibling groups', () => {
+      const spies: Array<jasmine.Spy> = [];
+
+      fixture.debugElement.queryAll(By.directive(CdkMenuGroup)).forEach((group, index) => {
+        const spy = jasmine.createSpy(`cdkMenuGroup ${index} change spy`);
+        spies.push(spy);
+        group.injector.get(CdkMenuGroup).change.subscribe(spy);
+      });
+
+      menuItems[0].trigger();
+
+      expect(spies[1]).toHaveBeenCalledTimes(1);
+      expect(spies[2]).toHaveBeenCalledTimes(0);
+      expect(spies[3]).toHaveBeenCalledTimes(0);
+    });
+
+    it('should not emit on menuitem click', () => {
+      const spies: Array<jasmine.Spy> = [];
+
+      fixture.debugElement.queryAll(By.directive(CdkMenuGroup)).forEach((group, index) => {
+        const spy = jasmine.createSpy(`cdkMenuGroup ${index} change spy`);
+        spies.push(spy);
+        group.injector.get(CdkMenuGroup).change.subscribe(spy);
+      });
+
+      menuItems[7].trigger();
+
+      spies.forEach((spy) => expect(spy).toHaveBeenCalledTimes(0));
+    });
+  });
+});
+
+@Component({
+  template: `
+    <ul cdkMenu>
+      <!-- Checkbox group -->
+      <li role="none">
+        <ul cdkMenuGroup>
+          <li #first role="none">
+            <button checked="true" role="menuitemcheckbox" cdkMenuItem>
+              one
+            </button>
+          </li>
+          <li role="none">
+            <button role="menuitemcheckbox" cdkMenuItem>
+              two
+            </button>
+          </li>
+        </ul>
+      </li>
+      <!-- Radio group -->
+      <li role="none">
+        <ul cdkMenuGroup>
+          <li role="none">
+            <button checked="true" role="menuitemradio" cdkMenuItem>
+              three
+            </button>
+          </li>
+          <li role="none">
+            <button role="menuitemradio" cdkMenuItem>
+              four
+            </button>
+          </li>
+        </ul>
+      </li>
+      <!-- Radio group -->
+      <li role="none">
+        <ul cdkMenuGroup>
+          <li role="none">
+            <button role="menuitemradio" cdkMenuItem>
+              five
+            </button>
+          </li>
+          <li role="none">
+            <button role="menuitemradio" cdkMenuItem>
+              six
+            </button>
+          </li>
+        </ul>
+      </li>
+      <li role="none">
+        <ul cdkMenuGroup>
+          <li role="none">
+            <button cdkMenuItem>
+              seven
+            </button>
+          </li>
+          <li role="none">
+            <button cdkMenuItem>
+              eight
+            </button>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  `,
+})
+class MenuGroups {}

src/cdk-experimental/menu/menu-group.ts

@@ -7,7 +7,7 @@
  */
 
 import {Directive, Output, EventEmitter} from '@angular/core';
-import {CdkMenuItem} from './menu-item';
+import {MenuItem} from './menu-item-interface';
 
 /**
  * Directive which acts as a grouping container for `CdkMenuItem` instances with
@@ -22,5 +22,15 @@ import {CdkMenuItem} from './menu-item';
 })
 export class CdkMenuGroup {
   /** Emits the element when checkbox or radiobutton state changed  */
-  @Output() change: EventEmitter<CdkMenuItem> = new EventEmitter();
+  @Output() change: EventEmitter<MenuItem> = new EventEmitter();
+
+  /**
+   * Emits events for the clicked MenuItem
+   * @param menuItem The clicked MenuItem to handle
+   */
+  _registerTriggeredItem(menuItem: MenuItem) {
+    if (menuItem.role !== 'menuitem') {
+      this.change.emit(menuItem);
+    }
+  }
 }