feat(aria/menu): introduce menu harness

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

@@ -0,0 +1,73 @@
+## API Report File for "@angular/aria_menu_testing"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { BaseHarnessFilters } from '@angular/cdk/testing';
+import { ComponentHarness } from '@angular/cdk/testing';
+import { HarnessPredicate } from '@angular/cdk/testing';
+
+// @public
+export class MenuHarness extends ComponentHarness {
+    // (undocumented)
+    getItems(filters?: MenuItemHarnessFilters): Promise<MenuItemHarness[]>;
+    // (undocumented)
+    static hostSelector: string;
+    // (undocumented)
+    static with(options?: MenuHarnessFilters): HarnessPredicate<MenuHarness>;
+}
+
+// @public
+export interface MenuHarnessFilters extends BaseHarnessFilters {
+}
+
+// @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>;
+}
+
+// @public
+export interface MenuItemHarnessFilters extends BaseHarnessFilters {
+    disabled?: boolean;
+    expanded?: boolean;
+    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/config.bzl

@@ -5,6 +5,7 @@ ARIA_ENTRYPOINTS = [
     "grid",
     "listbox",
     "menu",
+    "menu/testing",
     "tabs",
     "toolbar",
     "tree",

src/aria/menu/testing/BUILD.bazel

@@ -0,0 +1,40 @@
+load("//tools:defaults.bzl", "ng_project", "ng_web_test_suite", "ts_project")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_project(
+    name = "testing",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = [
+        "//src/cdk/testing",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)
+
+ng_project(
+    name = "unit_tests_lib",
+    testonly = True,
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":testing",
+        "//:node_modules/@angular/core",
+        "//:node_modules/@angular/platform-browser",
+        "//src/aria/menu",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [
+        ":unit_tests_lib",
+    ],
+)

src/aria/menu/testing/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+export * from './public-api';

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

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+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 {}
+
+/** Filters for locating a `MenuItemHarness`. */
+export interface MenuItemHarnessFilters extends BaseHarnessFilters {
+  /** Only find instances whose text matches the given value. */
+  text?: string | RegExp;
+  /** Only find instances whose disabled state matches the given value. */
+  disabled?: boolean;
+  /** Only find instances whose expanded state matches the given value. */
+  expanded?: boolean;
+}

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

@@ -0,0 +1,97 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Component} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {Menu} from '../menu';
+import {MenuItem} from '../menu-item';
+import {MenuTrigger} from '../menu-trigger';
+import {MenuItemHarness, MenuTriggerHarness} from './menu-harness';
+
+describe('Aria Menu Harness', () => {
+  let fixture: any;
+  let loader: any;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [Menu, MenuItem, MenuTrigger, 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 open the menu and locate items', async () => {
+    const trigger = await loader.getHarness(MenuTriggerHarness);
+    await trigger.click();
+    fixture.detectChanges();
+
+    const menu = await trigger.getMenu();
+    expect(menu).toBeTruthy();
+
+    const items = await menu.getItems();
+    expect(items.length).toBe(4);
+    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();
+    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();
+    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();
+    const subItems = await submenu!.getItems();
+    expect(subItems.length).toBe(1);
+    expect(await subItems[0].getText()).toBe('Nested Item');
+  });
+});
+
+@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>
+
+      <div ngMenu #nestedMenu="ngMenu">
+        <div ngMenuItem value="Nested Item">Nested Item</div>
+      </div>
+    </div>
+  `,
+  imports: [Menu, MenuItem, MenuTrigger],
+})
+class MenuTestApp {}

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

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * 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';
+
+/** Harness for interacting with a standard ngMenuItem in tests. */
+export class MenuItemHarness extends ComponentHarness {
+  static hostSelector = '[ngMenuItem]';
+
+  static with(options: MenuItemHarnessFilters = {}): HarnessPredicate<MenuItemHarness> {
+    return new HarnessPredicate(MenuItemHarness, options)
+      .addOption('text', options.text, (harness, text) =>
+        HarnessPredicate.stringMatches(harness.getText(), text),
+      )
+      .addOption(
+        'disabled',
+        options.disabled,
+        async (harness, disabled) => (await harness.isDisabled()) === disabled,
+      )
+      .addOption(
+        'expanded',
+        options.expanded,
+        async (harness, expanded) => (await harness.isExpanded()) === expanded,
+      );
+  }
+
+  async getText(): Promise<string> {
+    return (await this.host()).text();
+  }
+
+  async isDisabled(): Promise<boolean> {
+    const host = await this.host();
+    return (await host.getAttribute('aria-disabled')) === 'true';
+  }
+
+  async isExpanded(): Promise<boolean> {
+    const host = await this.host();
+    return (await host.getAttribute('aria-expanded')) === 'true';
+  }
+
+  async click(): Promise<void> {
+    return (await this.host()).click();
+  }
+
+  async hasSubmenu(): Promise<boolean> {
+    return (await (await this.host()).getAttribute('aria-haspopup')) !== null;
+  }
+
+  async getSubmenu(): Promise<MenuHarness | null> {
+    if (await this.hasSubmenu()) {
+      const controlsId = await (await this.host()).getAttribute('aria-controls');
+      return this.documentRootLocatorFactory().locatorFor(
+        MenuHarness.with({selector: controlsId ? `#${controlsId}` : undefined}),
+      )();
+    }
+    return null;
+  }
+}
+
+/** Harness for interacting with a standard ngMenu in tests. */
+export class MenuHarness extends ComponentHarness {
+  static hostSelector = '[ngMenu]';
+
+  static with(options: MenuHarnessFilters = {}): HarnessPredicate<MenuHarness> {
+    return new HarnessPredicate(MenuHarness, options);
+  }
+
+  async getItems(filters: MenuItemHarnessFilters = {}): Promise<MenuItemHarness[]> {
+    return this.locatorForAll(MenuItemHarness.with(filters))();
+  }
+}
+
+/** 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),
+    );
+  }
+
+  async getText(): Promise<string> {
+    return (await this.host()).text();
+  }
+
+  async click(): Promise<void> {
+    return (await this.host()).click();
+  }
+
+  async getMenu(filters: MenuHarnessFilters = {}): Promise<MenuHarness> {
+    return this.documentRootLocatorFactory().locatorFor(MenuHarness.with(filters))();
+  }
+}

src/aria/menu/testing/public-api.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+export * from './menu-harness';
+export * from './menu-harness-filters';