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

Author: adolgachev

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>;
 }
 

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 {}

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

@@ -9,9 +9,16 @@
 import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
 import {ListboxHarnessFilters, ListboxOptionHarnessFilters} from './listbox-harness-filters';
 
+/** Harness for interacting with a standard ngOption in tests. */
 export class ListboxOptionHarness extends ComponentHarness {
   static hostSelector = '[ngOption]';
 
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for an option
+   * with specific attributes.
+   * @param options Options for filtering which option instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
   static with(options: ListboxOptionHarnessFilters = {}): HarnessPredicate<ListboxOptionHarness> {
     return new HarnessPredicate(ListboxOptionHarness, options)
       .addOption('text', options.text, (harness, text) =>
@@ -29,11 +36,13 @@ export class ListboxOptionHarness extends ComponentHarness {
       );
   }
 
+  /** Whether the option is selected. */
   async isSelected(): Promise<boolean> {
     const host = await this.host();
     return (await host.getAttribute('aria-selected')) === 'true';
   }
 
+  /** Whether the option is disabled. */
   async isDisabled(): Promise<boolean> {
     const host = await this.host();
     return (
@@ -42,20 +51,29 @@ export class ListboxOptionHarness extends ComponentHarness {
     );
   }
 
+  /** Gets the option's text. */
   async getText(): Promise<string> {
     const host = await this.host();
     return host.text();
   }
 
+  /** Clicks the option to toggle its selected state. */
   async click(): Promise<void> {
     const host = await this.host();
     return host.click();
   }
 }
 
+/** Harness for interacting with a standard ngListbox in tests. */
 export class ListboxHarness extends ComponentHarness {
   static hostSelector = '[ngListbox]';
 
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a listbox
+   * with specific attributes.
+   * @param options Options for filtering which listbox instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
   static with(options: ListboxHarnessFilters = {}): HarnessPredicate<ListboxHarness> {
     return new HarnessPredicate(ListboxHarness, options).addOption(
       'disabled',
@@ -64,26 +82,31 @@ export class ListboxHarness extends ComponentHarness {
     );
   }
 
+  /** Gets the orientation of the listbox. */
   async getOrientation(): Promise<'vertical' | 'horizontal'> {
     const host = await this.host();
     const orientation = await host.getAttribute('aria-orientation');
     return orientation === 'horizontal' ? 'horizontal' : 'vertical';
   }
 
+  /** Whether the listbox is multiselectable. */
   async isMulti(): Promise<boolean> {
     const host = await this.host();
     return (await host.getAttribute('aria-multiselectable')) === 'true';
   }
 
+  /** Whether the listbox is disabled. */
   async isDisabled(): Promise<boolean> {
     const host = await this.host();
     return (await host.getAttribute('aria-disabled')) === 'true';
   }
 
+  /** Gets the options inside the listbox. */
   async getOptions(filters: ListboxOptionHarnessFilters = {}): Promise<ListboxOptionHarness[]> {
     return this.locatorForAll(ListboxOptionHarness.with(filters))();
   }
 
+  /** Focuses the listbox container. */
   async focus(): Promise<void> {
     await (await this.host()).focus();
   }
@@ -92,4 +115,10 @@ export class ListboxHarness extends ComponentHarness {
   async blur(): Promise<void> {
     await (await this.host()).blur();
   }
+
+  /** Gets the ID of the active option. */
+  async getActiveDescendantId(): Promise<string | null> {
+    const host = await this.host();
+    return host.getAttribute('aria-activedescendant');
+  }
 }

src/aria/private/listbox/listbox.spec.ts

@@ -90,6 +90,26 @@ describe('Listbox Pattern', () => {
     );
   }
 
+  describe('Tabindex', () => {
+    it('should expose tabIndex signals on listbox and options', () => {
+      const {listbox, options} = getDefaultPatterns();
+
+      expect(listbox.tabIndex()).toBe(-1);
+      expect(options[0].tabIndex()).toBe(0);
+      expect(options[1].tabIndex()).toBe(-1);
+
+      listbox.onKeydown(down());
+
+      expect(options[0].tabIndex()).toBe(-1);
+      expect(options[1].tabIndex()).toBe(0);
+    });
+
+    it('should set tabindex 0 for listbox in activedescendant mode', () => {
+      const {listbox} = getDefaultPatterns({focusMode: signal('activedescendant')});
+      expect(listbox.tabIndex()).toBe(0);
+    });
+  });
+
   describe('Keyboard Navigation', () => {
     it('should navigate next on ArrowDown', () => {
       const {listbox} = getDefaultPatterns();