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,175 @@
+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 menuBar: CdkMenuBar;
+    let menuItems: Array<CdkMenuItem>;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [CdkMenuModule],
+        declarations: [MenuBarRadioGroup],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(MenuBarRadioGroup);
+      fixture.detectChanges();
+
+      menuBar = fixture.debugElement.query(By.directive(CdkMenuBar)).injector.get(CdkMenuBar);
+
+      menuItems = menuBar._allItems.toArray();
+    }));
+
+    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('as checkbox group', () => {
+    let fixture: ComponentFixture<MenuBarCheckboxGroup>;
+    let menuBar: CdkMenuBar;
+    let menuItems: Array<CdkMenuItem>;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [CdkMenuModule],
+        declarations: [MenuBarCheckboxGroup],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(MenuBarCheckboxGroup);
+
+      menuBar = fixture.debugElement.query(By.directive(CdkMenuBar)).injector.get(CdkMenuBar);
+      fixture.detectChanges();
+
+      menuItems = menuBar._allItems.toArray();
+    }));
+
+    it('should toggle menuitemcheckbox', () => {
+      expect(menuItems[0].checked).toBeTrue();
+      expect(menuItems[1].checked).toBeFalse();
+
+      menuItems[1].trigger();
+      expect(menuItems[0].checked).toBeTrue(); // checkbox should not change
+
+      menuItems[0].trigger();
+
+      expect(menuItems[0].checked).toBeFalse();
+      expect(menuItems[1].checked).toBeTrue();
+    });
+  });
+
+  describe('checkbox change events', () => {
+    let fixture: ComponentFixture<MenuBarCheckboxGroup>;
+    let menu: CdkMenuBar;
+    let menuItems: Array<CdkMenuItem>;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [CdkMenuModule],
+        declarations: [MenuBarCheckboxGroup],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(MenuBarCheckboxGroup);
+
+      menu = fixture.debugElement.query(By.directive(CdkMenuBar)).injector.get(CdkMenuBar);
+      fixture.detectChanges();
+
+      menuItems = menu._allItems.toArray();
+    }));
+
+    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]);
+    });
+  });
+
+  describe('radiogroup change events', () => {
+    let fixture: ComponentFixture<MenuBarRadioGroup>;
+    let menu: CdkMenuBar;
+    let menuItems: Array<CdkMenuItem>;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [CdkMenuModule],
+        declarations: [MenuBarRadioGroup],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(MenuBarRadioGroup);
+
+      menu = fixture.debugElement.query(By.directive(CdkMenuBar)).injector.get(CdkMenuBar);
+      fixture.detectChanges();
+
+      menuItems = menu._allItems.toArray();
+    }));
+
+    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({
+  selector: 'menubar-as-radio-group',
+  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 {}
+
+@Component({
+  selector: 'menubar-as-checkbox-group',
+  template: `
+    <ul cdkMenuBar>
+      <li role="none">
+        <button checked="true" role="menuitemcheckbox" cdkMenuItem>
+          first
+        </button>
+      </li>
+      <li role="none">
+        <button role="menuitemcheckbox" cdkMenuItem>
+          second
+        </button>
+      </li>
+    </ul>
+  `,
+})
+class MenuBarCheckboxGroup {}

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>;
 }