src/cdk/menu/menu-group.spec.ts - main - githubmirror/components

src/cdk/menu/menu-group.spec.ts
148 строк4 KB
Kristiyan Kostadinov
build: add explicit change detection to tests (#33010)
30 мар 2026, 10:52
30 мар 2026, 10:527806398
import {Component, ViewChild, ChangeDetectionStrategy} from '@angular/core';
import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
import {CdkMenuModule} from './menu-module';
import {CdkMenuItemCheckbox} from './menu-item-checkbox';
import {CdkMenuItemRadio} from './menu-item-radio';
import {CdkMenuItem} from './menu-item';

describe('MenuGroup', () => {
  describe('with MenuItems as checkbox', () => {
    let fixture: ComponentFixture<CheckboxMenu>;
    let menuItems: CdkMenuItemCheckbox[];

    beforeEach(waitForAsync(() => {
      fixture = TestBed.createComponent(CheckboxMenu);
      fixture.detectChanges();

      fixture.componentInstance.trigger.getMenuTrigger()?.toggle();
      fixture.detectChanges();

      menuItems = fixture.debugElement
        .queryAll(By.directive(CdkMenuItemCheckbox))
        .map(e => e.injector.get(CdkMenuItemCheckbox));
    }));

    it('should not change state of sibling checked menuitemcheckbox', () => {
      menuItems[1].trigger();

      expect(menuItems[0].checked).toBeTrue();
    });
  });

  describe('with MenuItems as radio button', () => {
    let fixture: ComponentFixture<MenuWithMultipleRadioGroups>;
    let menuItems: CdkMenuItemRadio[];

    beforeEach(waitForAsync(() => {
      fixture = TestBed.createComponent(MenuWithMultipleRadioGroups);
      fixture.detectChanges();

      fixture.componentInstance.trigger.getMenuTrigger()?.toggle();
      fixture.detectChanges();

      menuItems = fixture.debugElement
        .queryAll(By.directive(CdkMenuItemRadio))
        .map(e => e.injector.get(CdkMenuItemRadio));
    }));

    it('should change state of sibling menuitemradio in same group', () => {
      menuItems[1].trigger({keepOpen: true});

      expect(menuItems[1].checked).toBeTrue();
      expect(menuItems[0].checked).toBeFalse();
    });

    it('should not change state of menuitemradio in sibling group', () => {
      menuItems[3].trigger({keepOpen: true});

      expect(menuItems[3].checked).toBeTrue();
      expect(menuItems[0].checked).toBeTrue();
    });

    it('should not change radiogroup state with disabled button', () => {
      menuItems[1].disabled = true;

      menuItems[1].trigger({keepOpen: true});

      expect(menuItems[0].checked).toBeTrue();
      expect(menuItems[1].checked).toBeFalse();
    });
  });
});

@Component({
  template: `
    <div cdkMenuBar>
      <button cdkMenuItem [cdkMenuTriggerFor]="panel"></button>
    </div>
    <ng-template #panel>
      <ul cdkMenu>
        <li role="none">
          <ul cdkMenuGroup>
            <li #first role="none">
              <button cdkMenuItemChecked="true" cdkMenuItemCheckbox>
                one
              </button>
            </li>
            <li role="none">
              <button cdkMenuItemCheckbox>
                two
              </button>
            </li>
          </ul>
        </li>
      </ul>
    </ng-template>
  `,
  imports: [CdkMenuModule],
  changeDetection: ChangeDetectionStrategy.Eager,
})
class CheckboxMenu {
  @ViewChild(CdkMenuItem) readonly trigger!: CdkMenuItem;
}

@Component({
  template: `
    <div cdkMenuBar>
      <button cdkMenuItem [cdkMenuTriggerFor]="panel"></button>
    </div>
    <ng-template #panel>
      <ul cdkMenu>
        <li role="none">
          <ul cdkMenuGroup>
            <li role="none">
              <button cdkMenuItemChecked="true" cdkMenuItemRadio>
                one
              </button>
            </li>
            <li role="none">
              <button cdkMenuItemRadio>
                two
              </button>
            </li>
          </ul>
        </li>
        <li role="none">
          <ul cdkMenuGroup>
            <li role="none">
              <button cdkMenuItemRadio>
                three
              </button>
            </li>
            <li role="none">
              <button cdkMenuItemRadio>
                four
              </button>
            </li>
          </ul>
        </li>
      </ul>
    </ng-template>
  `,
  imports: [CdkMenuModule],
  changeDetection: ChangeDetectionStrategy.Eager,
})
class MenuWithMultipleRadioGroups {
  @ViewChild(CdkMenuItem) readonly trigger!: CdkMenuItem;
}