test(multiple): generate additional tests for angular-aria directives, harness and patterns (#33162)

* test(aria/accordion): generate additional tests for Accordion directives and patterns

* test(aria/grid): generate additional methods and tests for Grid harness

* test(aria/listbox): generate additional tests for Listbox directives, harness, and patterns

* test(aria/menu): generate additional methods and tests for Menu harness

* test(aria/tabs): generate additional tests for Tab directives and patterns

* test(aria/toolbar): generate additional tests for Toolbar directives, harnesses and patterns

* test(aria/tree): generate additional methods and tests for Tree harness

Author: adolgachev

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

@@ -17,7 +17,9 @@ export class GridCellHarness extends ContentContainerComponentHarness {
     getText(): Promise<string>;
     // (undocumented)
     static hostSelector: string;
+    isActive(): Promise<boolean>;
     isDisabled(): Promise<boolean>;
+    isFocused(): Promise<boolean>;
     isSelected(): Promise<boolean>;
     static with(options?: GridCellHarnessFilters): HarnessPredicate<GridCellHarness>;
 }

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

@@ -8,22 +8,17 @@ import { BaseHarnessFilters } from '@angular/cdk/testing';
 import { ComponentHarness } from '@angular/cdk/testing';
 import { HarnessPredicate } from '@angular/cdk/testing';
 
-// @public (undocumented)
+// @public
 export class ListboxHarness extends ComponentHarness {
     blur(): Promise<void>;
-    // (undocumented)
     focus(): Promise<void>;
-    // (undocumented)
+    getActiveDescendantId(): Promise<string | null>;
     getOptions(filters?: ListboxOptionHarnessFilters): Promise<ListboxOptionHarness[]>;
-    // (undocumented)
     getOrientation(): Promise<'vertical' | 'horizontal'>;
     // (undocumented)
     static hostSelector: string;
-    // (undocumented)
     isDisabled(): Promise<boolean>;
-    // (undocumented)
     isMulti(): Promise<boolean>;
-    // (undocumented)
     static with(options?: ListboxHarnessFilters): HarnessPredicate<ListboxHarness>;
 }
 
@@ -32,19 +27,14 @@ export interface ListboxHarnessFilters extends BaseHarnessFilters {
     disabled?: boolean;
 }
 
-// @public (undocumented)
+// @public
 export class ListboxOptionHarness extends ComponentHarness {
-    // (undocumented)
     click(): Promise<void>;
-    // (undocumented)
     getText(): Promise<string>;
     // (undocumented)
     static hostSelector: string;
-    // (undocumented)
     isDisabled(): Promise<boolean>;
-    // (undocumented)
     isSelected(): Promise<boolean>;
-    // (undocumented)
     static with(options?: ListboxOptionHarnessFilters): HarnessPredicate<ListboxOptionHarness>;
 }
 

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

@@ -16,6 +16,7 @@ export class MenuHarness extends ComponentHarness {
     _getTrigger(): Promise<TestElement | null>;
     // (undocumented)
     static hostSelector: string;
+    isMenuBar(): Promise<boolean>;
     isOpen(): Promise<boolean>;
     open(): Promise<void>;
     // (undocumented)
@@ -32,10 +33,12 @@ export class MenuItemHarness extends ComponentHarness {
     click(): Promise<void>;
     getSubmenu(): Promise<MenuHarness | null>;
     getText(): Promise<string>;
+    hasSubmenu(): Promise<boolean>;
     // (undocumented)
     static hostSelector: string;
     isDisabled(): Promise<boolean>;
     isExpanded(): Promise<boolean>;
+    isFocused(): Promise<boolean>;
     // (undocumented)
     static with(options?: MenuItemHarnessFilters): HarnessPredicate<MenuItemHarness>;
 }

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

@@ -44,12 +44,14 @@ export class ToolbarWidgetHarness extends ContentContainerComponentHarness<strin
     static hostSelector: string;
     isActive(): Promise<boolean>;
     isDisabled(): Promise<boolean>;
+    isSelected(): Promise<boolean>;
     static with(options?: ToolbarWidgetHarnessFilters): HarnessPredicate<ToolbarWidgetHarness>;
 }
 
 // @public
 export interface ToolbarWidgetHarnessFilters extends BaseHarnessFilters {
     active?: boolean;
+    selected?: boolean;
     text?: string | RegExp;
 }
 

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

@@ -32,13 +32,17 @@ export interface TreeHarnessFilters extends BaseHarnessFilters {
 
 // @public
 export class TreeItemHarness extends ContentContainerComponentHarness<string> {
+    blur(): Promise<void>;
     click(): Promise<void>;
+    focus(): Promise<void>;
     getLevel(): Promise<number>;
     getText(): Promise<string>;
     // (undocumented)
     static hostSelector: string;
+    isActive(): Promise<boolean>;
     isDisabled(): Promise<boolean>;
     isExpanded(): Promise<boolean>;
+    isFocused(): Promise<boolean>;
     isSelected(): Promise<boolean>;
     static with(options?: TreeItemHarnessFilters): HarnessPredicate<TreeItemHarness>;
 }

src/aria/accordion/accordion.spec.ts

@@ -293,23 +293,23 @@ describe('AccordionGroup', () => {
       });
 
       it('should update collection order when items are shuffled', async () => {
-        const groupDebugElement = fixture.debugElement.query(By.directive(AccordionGroup));
-        const groupDirective = groupDebugElement.injector.get(AccordionGroup);
-
-        let orderedItems = groupDirective._collection.orderedItems();
-        expect(orderedItems.length).toBe(3);
-        expect(orderedItems[0].element.textContent?.trim()).toBe('Item 1 Header');
-        expect(orderedItems[2].element.textContent?.trim()).toBe('Item 3 Header');
+        // Verify initial DOM order
+        expect(triggerElements.length).toBe(3);
+        expect(triggerElements[0].textContent?.trim()).toBe('Item 1 Header');
+        expect(triggerElements[2].textContent?.trim()).toBe('Item 3 Header');
 
+        // Shuffle (reverse) data
         const items = testComponent.items().reverse();
         testComponent.items.set([...items]);
         fixture.detectChanges();
         await waitForMicrotasks();
 
-        orderedItems = groupDirective._collection.orderedItems();
-        expect(orderedItems.length).toBe(3);
-        expect(orderedItems[0].element.textContent?.trim()).toBe('Item 3 Header');
-        expect(orderedItems[2].element.textContent?.trim()).toBe('Item 1 Header');
+        // Re-query elements to check new DOM order
+        setupTriggerAndPanels();
+
+        expect(triggerElements.length).toBe(3);
+        expect(triggerElements[0].textContent?.trim()).toBe('Item 3 Header');
+        expect(triggerElements[2].textContent?.trim()).toBe('Item 1 Header');
       });
 
       describe('wrap behavior', () => {

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

@@ -97,6 +97,19 @@ describe('Grid Harness', () => {
     const rows = await loader.getAllHarnesses(GridRowHarness);
     expect(await rows[0].getCellTextByIndex()).toEqual(['Cell 1.1', 'Cell 1.2']);
   });
+
+  it('reports the active state of a cell', async () => {
+    const cell = await loader.getHarness(GridCellHarness.with({text: 'Cell 1.1'}));
+    expect(await cell.isActive()).toBeTrue();
+  });
+
+  it('reports the focused state of a cell', async () => {
+    const cell = await loader.getHarness(GridCellHarness.with({text: 'Cell 1.1'}));
+    expect(await cell.isFocused()).toBeFalse();
+
+    await cell.focus();
+    expect(await cell.isFocused()).toBeTrue();
+  });
 });
 
 @Component({

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

@@ -79,6 +79,18 @@ export class GridCellHarness extends ContentContainerComponentHarness {
     const host = await this.host();
     return host.blur();
   }
+
+  /** Whether the cell is active. */
+  async isActive(): Promise<boolean> {
+    const host = await this.host();
+    return (await host.getAttribute('data-active')) === 'true';
+  }
+
+  /** Whether the cell is focused. */
+  async isFocused(): Promise<boolean> {
+    const host = await this.host();
+    return host.isFocused();
+  }
 }
 
 /** Harness for interacting with a standard ngGridRow in tests. */

src/aria/listbox/listbox.spec.ts

@@ -434,21 +434,23 @@ describe('Listbox', () => {
           ],
         });
 
-        let orderedItems = listboxInstance._collection.orderedItems();
-        expect(orderedItems.length).toBe(3);
-        expect(orderedItems[0].element.textContent?.trim()).toBe('Item 1');
-        expect(orderedItems[2].element.textContent?.trim()).toBe('Item 3');
+        // Verify initial DOM order
+        expect(optionElements.length).toBe(3);
+        expect(optionElements[0].textContent?.trim()).toBe('Item 1');
+        expect(optionElements[2].textContent?.trim()).toBe('Item 3');
 
         const testComponent = fixture.componentInstance as ListboxExample;
         const items = testComponent.options().reverse();
         testComponent.options.set([...items]);
         fixture.detectChanges();
         await waitForMicrotasks();
 
-        orderedItems = listboxInstance._collection.orderedItems();
-        expect(orderedItems.length).toBe(3);
-        expect(orderedItems[0].element.textContent?.trim()).toBe('Item 3');
-        expect(orderedItems[2].element.textContent?.trim()).toBe('Item 1');
+        // Re-query elements to check new DOM order
+        defineTestVariables(fixture);
+
+        expect(optionElements.length).toBe(3);
+        expect(optionElements[0].textContent?.trim()).toBe('Item 3');
+        expect(optionElements[2].textContent?.trim()).toBe('Item 1');
       });
     });
 

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

@@ -83,6 +83,22 @@ describe('Listbox Harness', () => {
     expect(orientation).toBe('horizontal');
   });
 
+  it('gets the active descendant ID', async () => {
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({
+      imports: [ListboxActiveDescendantTestComponent],
+    });
+    const customFixture = TestBed.createComponent(ListboxActiveDescendantTestComponent);
+    customFixture.detectChanges();
+    const customLoader = TestbedHarnessEnvironment.loader(customFixture);
+
+    const listbox = await customLoader.getHarness(ListboxHarness);
+    const options = await listbox.getOptions();
+
+    await options[0].click();
+    expect(await listbox.getActiveDescendantId()).toBe('apple-id');
+  });
+
   it('clicks an option inside the listbox', async () => {
     const option = await loader.getHarness(ListboxOptionHarness.with({text: 'Apple'}));
 
@@ -91,3 +107,14 @@ describe('Listbox Harness', () => {
     expect(await option.isSelected()).toBeTrue();
   });
 });
+
+@Component({
+  imports: [Listbox, Option],
+  template: `
+    <ul ngListbox focusMode="activedescendant">
+      <li ngOption [value]="1" id="apple-id">Apple</li>
+      <li ngOption [value]="2" id="banana-id">Banana</li>
+    </ul>
+  `,
+})
+class ListboxActiveDescendantTestComponent {}