test(cdk-experimental/menu): refactor tests to use smaller, more focused fixtures

Author: andy9775

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

@@ -7,66 +7,85 @@ import {CdkMenu} from './menu';
 import {By} from '@angular/platform-browser';
 
 describe('MenuGroup', () => {
-  describe('MenuItem', () => {
-    let fixture: ComponentFixture<MenuGroups>;
+  describe('with MenuItems as checkbox', () => {
+    let fixture: ComponentFixture<CheckboxMenu>;
     let menuItems: Array<CdkMenuItem>;
 
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [CdkMenuModule],
-        declarations: [MenuGroups],
+        declarations: [CheckboxMenu],
       }).compileComponents();
 
-      fixture = TestBed.createComponent(MenuGroups);
+      fixture = TestBed.createComponent(CheckboxMenu);
       fixture.detectChanges();
 
       menuItems = fixture.debugElement
         .queryAll(By.directive(CdkMenuItem))
         .map(e => e.injector.get(CdkMenuItem));
     }));
 
-    it('should not change state of sibling menuitemcheckbox', () => {
+    it('should not change state of sibling checked menuitemcheckbox', () => {
       menuItems[1].trigger();
 
-      expect(menuItems[0].checked).toBeTrue(); // default state true
+      expect(menuItems[0].checked).toBeTrue();
     });
+  });
+
+  describe('with MenuItems as radio button', () => {
+    let fixture: ComponentFixture<MenuWithMultipleRadioGroups>;
+    let menuItems: Array<CdkMenuItem>;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [CdkMenuModule],
+        declarations: [MenuWithMultipleRadioGroups],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(MenuWithMultipleRadioGroups);
+      fixture.detectChanges();
+
+      menuItems = fixture.debugElement
+        .queryAll(By.directive(CdkMenuItem))
+        .map(e => e.injector.get(CdkMenuItem));
+    }));
 
     it('should change state of sibling menuitemradio in same group', () => {
-      menuItems[3].trigger();
+      menuItems[1].trigger();
 
-      expect(menuItems[3].checked).toBeTrue();
-      expect(menuItems[2].checked).toBeFalse();
+      expect(menuItems[1].checked).toBeTrue();
+      expect(menuItems[0].checked).toBeFalse();
     });
 
     it('should not change state of menuitemradio in sibling group', () => {
-      menuItems[4].trigger();
+      menuItems[3].trigger();
 
-      expect(menuItems[4].checked).toBeTrue();
-      expect(menuItems[2].checked).toBeTrue();
+      expect(menuItems[3].checked).toBeTrue();
+      expect(menuItems[0].checked).toBeTrue();
     });
 
     it('should not change radiogroup state with disabled button', () => {
-      menuItems[3].disabled = true;
+      menuItems[1].disabled = true;
 
-      menuItems[3].trigger();
+      menuItems[1].trigger();
 
-      expect(menuItems[2].checked).toBeTrue();
-      expect(menuItems[3].checked).toBeFalse();
+      expect(menuItems[0].checked).toBeTrue();
+      expect(menuItems[1].checked).toBeFalse();
     });
   });
 
   describe('change events', () => {
-    let fixture: ComponentFixture<MenuGroups>;
+    let fixture: ComponentFixture<MenuWithMenuItemsAndRadioGroups>;
     let menu: CdkMenu;
     let menuItems: Array<CdkMenuItem>;
 
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [CdkMenuModule],
-        declarations: [MenuGroups],
+        declarations: [MenuWithMenuItemsAndRadioGroups],
       }).compileComponents();
 
-      fixture = TestBed.createComponent(MenuGroups);
+      fixture = TestBed.createComponent(MenuWithMenuItemsAndRadioGroups);
       fixture.detectChanges();
 
       menu = fixture.debugElement.query(By.directive(CdkMenu)).injector.get(CdkMenu);
@@ -85,7 +104,7 @@ describe('MenuGroup', () => {
       expect(spy).toHaveBeenCalledTimes(0);
     });
 
-    it('should emit from groups with clicked menu items', () => {
+    it('should emit from enclosing radio group only', () => {
       const spies: Array<jasmine.Spy> = [];
 
       fixture.debugElement.queryAll(By.directive(CdkMenuGroup)).forEach((group, index) => {
@@ -94,44 +113,26 @@ describe('MenuGroup', () => {
         group.injector.get(CdkMenuGroup).change.subscribe(spy);
       });
 
-      menuItems[2].trigger();
-      menuItems[4].trigger();
+      menuItems[0].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]);
+      expect(spies[1]).toHaveBeenCalledTimes(1);
+      expect(spies[1]).toHaveBeenCalledWith(menuItems[0]);
+      expect(spies[2]).toHaveBeenCalledTimes(0);
+      expect(spies[3]).toHaveBeenCalledTimes(0);
     });
 
     it('should not emit with click on disabled button', () => {
       const spy = jasmine.createSpy('cdkMenuGroup change spy');
 
       fixture.debugElement
-        .queryAll(By.directive(CdkMenuGroup))[3]
+        .queryAll(By.directive(CdkMenuGroup))[1]
         .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].disabled = true;
 
       menuItems[0].trigger();
 
-      expect(spies[1]).toHaveBeenCalledTimes(1);
-      expect(spies[2]).toHaveBeenCalledTimes(0);
-      expect(spies[3]).toHaveBeenCalledTimes(0);
+      expect(spy).toHaveBeenCalledTimes(0);
     });
 
     it('should not emit on menuitem click', () => {
@@ -143,7 +144,7 @@ describe('MenuGroup', () => {
         group.injector.get(CdkMenuGroup).change.subscribe(spy);
       });
 
-      menuItems[7].trigger();
+      menuItems[2].trigger();
 
       spies.forEach(spy => expect(spy).toHaveBeenCalledTimes(0));
     });
@@ -153,7 +154,6 @@ describe('MenuGroup', () => {
 @Component({
   template: `
     <ul cdkMenu>
-      <!-- Checkbox group -->
       <li role="none">
         <ul cdkMenuGroup>
           <li #first role="none">
@@ -168,51 +168,78 @@ describe('MenuGroup', () => {
           </li>
         </ul>
       </li>
-      <!-- Radio group -->
+    </ul>
+  `,
+})
+class CheckboxMenu {}
+
+@Component({
+  template: `
+    <ul cdkMenu>
       <li role="none">
         <ul cdkMenuGroup>
           <li role="none">
             <button checked="true" role="menuitemradio" cdkMenuItem>
-              three
+              one
             </button>
           </li>
           <li role="none">
             <button role="menuitemradio" cdkMenuItem>
-              four
+              two
             </button>
           </li>
         </ul>
       </li>
-      <!-- Radio group -->
       <li role="none">
         <ul cdkMenuGroup>
           <li role="none">
             <button role="menuitemradio" cdkMenuItem>
-              five
+              three
+            </button>
+          </li>
+          <li role="none">
+            <button role="menuitemradio" cdkMenuItem>
+              four
             </button>
           </li>
+        </ul>
+      </li>
+    </ul>
+  `,
+})
+class MenuWithMultipleRadioGroups {}
+
+@Component({
+  template: `
+    <ul cdkMenu>
+      <li role="none">
+        <ul cdkMenuGroup>
           <li role="none">
             <button role="menuitemradio" cdkMenuItem>
-              six
+              one
             </button>
           </li>
         </ul>
       </li>
       <li role="none">
         <ul cdkMenuGroup>
           <li role="none">
-            <button cdkMenuItem>
-              seven
+            <button role="menuitemradio" cdkMenuItem>
+              two
             </button>
           </li>
+        </ul>
+      </li>
+      <li role="none">
+        <ul cdkMenuGroup>
           <li role="none">
             <button cdkMenuItem>
-              eight
+              three
             </button>
           </li>
         </ul>
       </li>
     </ul>
   `,
 })
-class MenuGroups {}
+class MenuWithMenuItemsAndRadioGroups {}