fixup! feat(aria/menu): introduce menu harness

Author: ok7sai

goldens/aria/menu/testing/index.api.md

@@ -7,36 +7,34 @@
 import { BaseHarnessFilters } from '@angular/cdk/testing';
 import { ComponentHarness } from '@angular/cdk/testing';
 import { HarnessPredicate } from '@angular/cdk/testing';
+import { TestElement } from '@angular/cdk/testing';
 
 // @public
 export class MenuHarness extends ComponentHarness {
-    // (undocumented)
+    close(): Promise<void>;
     getItems(filters?: MenuItemHarnessFilters): Promise<MenuItemHarness[]>;
+    _getTrigger(): Promise<TestElement | null>;
     // (undocumented)
     static hostSelector: string;
+    isOpen(): Promise<boolean>;
+    open(): Promise<void>;
     // (undocumented)
     static with(options?: MenuHarnessFilters): HarnessPredicate<MenuHarness>;
 }
 
 // @public
 export interface MenuHarnessFilters extends BaseHarnessFilters {
+    triggerText?: string | RegExp;
 }
 
 // @public
 export class MenuItemHarness extends ComponentHarness {
-    // (undocumented)
     click(): Promise<void>;
-    // (undocumented)
     getSubmenu(): Promise<MenuHarness | null>;
-    // (undocumented)
     getText(): Promise<string>;
     // (undocumented)
-    hasSubmenu(): Promise<boolean>;
-    // (undocumented)
     static hostSelector: string;
-    // (undocumented)
     isDisabled(): Promise<boolean>;
-    // (undocumented)
     isExpanded(): Promise<boolean>;
     // (undocumented)
     static with(options?: MenuItemHarnessFilters): HarnessPredicate<MenuItemHarness>;
@@ -49,25 +47,6 @@ export interface MenuItemHarnessFilters extends BaseHarnessFilters {
     text?: string | RegExp;
 }
 
-// @public
-export class MenuTriggerHarness extends ComponentHarness {
-    // (undocumented)
-    click(): Promise<void>;
-    // (undocumented)
-    getMenu(filters?: MenuHarnessFilters): Promise<MenuHarness>;
-    // (undocumented)
-    getText(): Promise<string>;
-    // (undocumented)
-    static hostSelector: string;
-    // (undocumented)
-    static with(options?: MenuTriggerHarnessFilters): HarnessPredicate<MenuTriggerHarness>;
-}
-
-// @public
-export interface MenuTriggerHarnessFilters extends BaseHarnessFilters {
-    text?: string | RegExp;
-}
-
 // (No @packageDocumentation comment for this package)
 
 ```

src/aria/menu/testing/menu-harness-filters.ts

@@ -8,14 +8,11 @@
 
 import {BaseHarnessFilters} from '@angular/cdk/testing';
 
-/** Filters for locating a `MenuTriggerHarness`. */
-export interface MenuTriggerHarnessFilters extends BaseHarnessFilters {
-  /** Only find instances whose text matches the given value. */
-  text?: string | RegExp;
-}
-
 /** Filters for locating a `MenuHarness`. */
-export interface MenuHarnessFilters extends BaseHarnessFilters {}
+export interface MenuHarnessFilters extends BaseHarnessFilters {
+  /** Only find instances whose trigger text matches the given value. */
+  triggerText?: string | RegExp;
+}
 
 /** Filters for locating a `MenuItemHarness`. */
 export interface MenuItemHarnessFilters extends BaseHarnessFilters {

src/aria/menu/testing/menu-harness.spec.ts

@@ -10,88 +10,142 @@ import {Component} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Menu} from '../menu';
+import {MenuContent} from '../menu-content';
 import {MenuItem} from '../menu-item';
 import {MenuTrigger} from '../menu-trigger';
-import {MenuItemHarness, MenuTriggerHarness} from './menu-harness';
+import {MenuBar} from '../menu-bar';
+import {MenuItemHarness, MenuHarness} from './menu-harness';
 
 describe('Aria Menu Harness', () => {
   let fixture: any;
   let loader: any;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [Menu, MenuItem, MenuTrigger, MenuTestApp],
+      imports: [Menu, MenuItem, MenuTrigger, MenuBar, MenuContent, MenuTestApp],
     });
 
     fixture = TestBed.createComponent(MenuTestApp);
     fixture.detectChanges();
     loader = TestbedHarnessEnvironment.loader(fixture);
   });
 
-  it('should locate the menu trigger harness', async () => {
-    const trigger = await loader.getHarness(MenuTriggerHarness.with({text: 'Open Menu'}));
-    expect(trigger).toBeTruthy();
-    expect(await trigger.getText()).toBe('Open Menu');
+  it('should locate the menu harness', async () => {
+    const menu = await loader.getHarness(MenuHarness.with({triggerText: 'Open Menu'}));
+    expect(menu).toBeTruthy();
+  });
+
+  it('should verify that the menu is initially closed', async () => {
+    const menu = await loader.getHarness(MenuHarness.with({triggerText: 'Open Menu'}));
+    expect(await menu.isOpen()).toBe(false);
   });
 
-  it('should open the menu and locate items', async () => {
-    const trigger = await loader.getHarness(MenuTriggerHarness);
-    await trigger.click();
+  it('should open the menu', async () => {
+    const menu = await loader.getHarness(MenuHarness.with({triggerText: 'Open Menu'}));
+    await menu.open();
     fixture.detectChanges();
 
-    const menu = await trigger.getMenu();
-    expect(menu).toBeTruthy();
+    expect(await menu.isOpen()).toBe(true);
+  });
+
+  it('should close the menu', async () => {
+    const menu = await loader.getHarness(MenuHarness.with({triggerText: 'Open Menu'}));
+    await menu.open();
+    fixture.detectChanges();
+
+    await menu.close();
+    fixture.detectChanges();
+    expect(await menu.isOpen()).toBe(false);
+  });
+
+  it('should get all items inside an open menu', async () => {
+    const menu = await loader.getHarness(MenuHarness.with({triggerText: 'Open Menu'}));
+    await menu.open();
+    fixture.detectChanges();
 
     const items = await menu.getItems();
-    expect(items.length).toBe(4);
+    expect(items.length).toBe(3);
     expect(await items[0].getText()).toBe('Item 1');
-    expect(await items[1].getText()).toBe('Item 2');
-    expect(await items[2].getText()).toBe('Submenu');
-    expect(await items[3].getText()).toBe('Nested Item');
   });
 
-  it('should filter menu items by state', async () => {
-    const trigger = await loader.getHarness(MenuTriggerHarness);
-    await trigger.click();
+  it('should filter menu items by their disabled state', async () => {
+    const menu = await loader.getHarness(MenuHarness.with({triggerText: 'Open Menu'}));
+    await menu.open();
     fixture.detectChanges();
 
     const disabledItems = await loader.getAllHarnesses(MenuItemHarness.with({disabled: true}));
     expect(disabledItems.length).toBe(1);
     expect(await disabledItems[0].getText()).toBe('Item 2');
   });
 
-  it('should locate and open a nested submenu', async () => {
-    const mainTrigger = await loader.getHarness(MenuTriggerHarness.with({text: 'Open Menu'}));
-    await mainTrigger.click();
+  it('should locate and interact with nested submenus', async () => {
+    const main = await loader.getHarness(MenuHarness.with({triggerText: 'Open Menu'}));
+    await main.open();
     fixture.detectChanges();
 
     const subItem = await loader.getHarness(MenuItemHarness.with({text: 'Submenu'}));
-    expect(await subItem.hasSubmenu()).toBe(true);
     await subItem.click();
     fixture.detectChanges();
 
     const submenu = await subItem.getSubmenu();
     expect(submenu).toBeTruthy();
+    expect(await submenu!.isOpen()).toBe(true);
+  });
+
+  it('should read items within a nested submenu', async () => {
+    const main = await loader.getHarness(MenuHarness.with({triggerText: 'Open Menu'}));
+    await main.open();
+    fixture.detectChanges();
+
+    const subItem = await loader.getHarness(MenuItemHarness.with({text: 'Submenu'}));
+    await subItem.click();
+    fixture.detectChanges();
+
+    const submenu = await subItem.getSubmenu();
     const subItems = await submenu!.getItems();
     expect(subItems.length).toBe(1);
     expect(await subItems[0].getText()).toBe('Nested Item');
   });
+
+  it('should confirm persistent horizontal menu bars are always open', async () => {
+    const menubar = await loader.getHarness(MenuHarness.with({selector: '[ngMenuBar]'}));
+    expect(menubar).toBeTruthy();
+    expect(await menubar.isOpen()).toBe(true);
+  });
+
+  it('should read items from a persistent horizontal menu bar', async () => {
+    const menubar = await loader.getHarness(MenuHarness.with({selector: '[ngMenuBar]'}));
+    const items = await menubar.getItems();
+
+    expect(items.length).toBe(2);
+    expect(await items[0].getText()).toBe('File');
+    expect(await items[1].getText()).toBe('Edit');
+  });
 });
 
 @Component({
   template: `
     <button ngMenuTrigger [menu]="testMenu">Open Menu</button>
 
     <div ngMenu #testMenu="ngMenu">
-      <div ngMenuItem value="Item 1">Item 1</div>
-      <div ngMenuItem value="Item 2" [disabled]="true">Item 2</div>
-      <div ngMenuItem value="Submenu" [submenu]="nestedMenu">Submenu</div>
+      <ng-template ngMenuContent>
+        <div ngMenuItem value="Item 1">Item 1</div>
+        <div ngMenuItem value="Item 2" [disabled]="true">Item 2</div>
+        <div ngMenuItem value="Submenu" [submenu]="nestedMenu">Submenu</div>
+      </ng-template>
+    </div>
 
-      <div ngMenu #nestedMenu="ngMenu">
+    <div ngMenu #nestedMenu="ngMenu">
+      <ng-template ngMenuContent>
         <div ngMenuItem value="Nested Item">Nested Item</div>
-      </div>
+      </ng-template>
+    </div>
+
+    <div ngMenuBar>
+      <div ngMenuItem value="File">File</div>
+      <div ngMenuItem value="Edit">Edit</div>
     </div>
   `,
-  imports: [Menu, MenuItem, MenuTrigger],
+  imports: [Menu, MenuItem, MenuTrigger, MenuBar, MenuContent],
 })
 class MenuTestApp {}

src/aria/menu/testing/menu-harness.ts

@@ -6,12 +6,8 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
-import {
-  MenuHarnessFilters,
-  MenuItemHarnessFilters,
-  MenuTriggerHarnessFilters,
-} from './menu-harness-filters';
+import {ComponentHarness, HarnessPredicate, TestElement} from '@angular/cdk/testing';
+import {MenuHarnessFilters, MenuItemHarnessFilters} from './menu-harness-filters';
 
 /** Harness for interacting with a standard ngMenuItem in tests. */
 export class MenuItemHarness extends ComponentHarness {
@@ -34,73 +30,95 @@ export class MenuItemHarness extends ComponentHarness {
       );
   }
 
+  /** Gets the text content of the menu item. */
   async getText(): Promise<string> {
     return (await this.host()).text();
   }
 
+  /** Whether the menu item is disabled. */
   async isDisabled(): Promise<boolean> {
     const host = await this.host();
     return (await host.getAttribute('aria-disabled')) === 'true';
   }
 
+  /** Whether the menu item is expanded (contains an open submenu). */
   async isExpanded(): Promise<boolean> {
     const host = await this.host();
     return (await host.getAttribute('aria-expanded')) === 'true';
   }
 
+  /** Clicks the menu item to trigger its action or toggle its submenu. */
   async click(): Promise<void> {
     return (await this.host()).click();
   }
 
-  async hasSubmenu(): Promise<boolean> {
-    return (await (await this.host()).getAttribute('aria-haspopup')) !== null;
-  }
-
+  /** Resolves the nested submenu panel associated with this menu item, if any exists. */
   async getSubmenu(): Promise<MenuHarness | null> {
-    if (await this.hasSubmenu()) {
-      const controlsId = await (await this.host()).getAttribute('aria-controls');
+    const controlsId = await (await this.host()).getAttribute('aria-controls');
+    if (controlsId) {
       return this.documentRootLocatorFactory().locatorFor(
-        MenuHarness.with({selector: controlsId ? `#${controlsId}` : undefined}),
+        MenuHarness.with({selector: `#${controlsId}`}),
       )();
     }
     return null;
   }
 }
 
-/** Harness for interacting with a standard ngMenu in tests. */
+/** Harness for interacting with a standard ngMenu or ngMenuBar in tests. */
 export class MenuHarness extends ComponentHarness {
-  static hostSelector = '[ngMenu]';
+  static hostSelector = '[ngMenu], [ngMenuBar]';
 
   static with(options: MenuHarnessFilters = {}): HarnessPredicate<MenuHarness> {
-    return new HarnessPredicate(MenuHarness, options);
+    return new HarnessPredicate(MenuHarness, options).addOption(
+      'triggerText',
+      options.triggerText,
+      async (harness, text) => {
+        const trigger = await harness._getTrigger();
+        if (!trigger) return false;
+        return HarnessPredicate.stringMatches(await trigger.text(), text);
+      },
+    );
   }
 
-  async getItems(filters: MenuItemHarnessFilters = {}): Promise<MenuItemHarness[]> {
-    return this.locatorForAll(MenuItemHarness.with(filters))();
+  /** Resolves the trigger associated with this menu container via aria-controls inversion. */
+  async _getTrigger(): Promise<TestElement | null> {
+    const id = await (await this.host()).getAttribute('id');
+    if (!id) return null;
+    return this.documentRootLocatorFactory().locatorForOptional(`[aria-controls="${id}"]`)();
   }
-}
-
-/** Harness for interacting with a standard ngMenuTrigger in tests. */
-export class MenuTriggerHarness extends ComponentHarness {
-  static hostSelector = '[ngMenuTrigger]';
 
-  static with(options: MenuTriggerHarnessFilters = {}): HarnessPredicate<MenuTriggerHarness> {
-    return new HarnessPredicate(MenuTriggerHarness, options).addOption(
-      'text',
-      options.text,
-      (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text),
-    );
+  /** Checks whether the menu container is visible. */
+  async isOpen(): Promise<boolean> {
+    const host = await this.host();
+    // Menu bars are always visible persistently.
+    if (await host.matchesSelector('[ngMenuBar]')) {
+      return true;
+    }
+    return (await host.getAttribute('data-visible')) === 'true';
   }
 
-  async getText(): Promise<string> {
-    return (await this.host()).text();
+  /** Opens the menu if it is currently closed. */
+  async open(): Promise<void> {
+    if (!(await this.isOpen())) {
+      const trigger = await this._getTrigger();
+      if (trigger) {
+        await trigger.click();
+      }
+    }
   }
 
-  async click(): Promise<void> {
-    return (await this.host()).click();
+  /** Closes the menu if it is currently open. */
+  async close(): Promise<void> {
+    if (await this.isOpen()) {
+      const trigger = await this._getTrigger();
+      if (trigger) {
+        await trigger.click();
+      }
+    }
   }
 
-  async getMenu(filters: MenuHarnessFilters = {}): Promise<MenuHarness> {
-    return this.documentRootLocatorFactory().locatorFor(MenuHarness.with(filters))();
+  /** Queries all menu items inside this menu container. */
+  async getItems(filters: MenuItemHarnessFilters = {}): Promise<MenuItemHarness[]> {
+    return this.locatorForAll(MenuItemHarness.with(filters))();
   }
 }