fix(autocomplete/testing): incorrect options if multiple panels are on the page at the same time (#19114)

Fixes the autocomplete harness returning the options of the first autocomplete panel, if multiple panels are on the page at the same time.

Author: crisbeto

src/material/autocomplete/testing/autocomplete-harness.ts

@@ -16,13 +16,9 @@ import {
 } from '@angular/material/core/testing';
 import {AutocompleteHarnessFilters} from './autocomplete-harness-filters';
 
-/** Selector for the autocomplete panel. */
-const PANEL_SELECTOR = '.mat-autocomplete-panel';
-
 /** Harness for interacting with a standard mat-autocomplete in tests. */
 export class MatAutocompleteHarness extends ComponentHarness {
   private _documentRootLocator = this.documentRootLocatorFactory();
-  private _optionalPanel = this._documentRootLocator.locatorForOptional(PANEL_SELECTOR);
 
   /** The selector for the host element of a `MatAutocomplete` instance. */
   static hostSelector = '.mat-autocomplete-trigger';
@@ -70,7 +66,7 @@ export class MatAutocompleteHarness extends ComponentHarness {
     Promise<MatOptionHarness[]> {
     return this._documentRootLocator.locatorForAll(MatOptionHarness.with({
       ...filters,
-      ancestor: PANEL_SELECTOR
+      ancestor: await this._getPanelSelector()
     }))();
   }
 
@@ -79,7 +75,7 @@ export class MatAutocompleteHarness extends ComponentHarness {
     Promise<MatOptgroupHarness[]> {
     return this._documentRootLocator.locatorForAll(MatOptgroupHarness.with({
       ...filters,
-      ancestor: PANEL_SELECTOR
+      ancestor: await this._getPanelSelector()
     }))();
   }
 
@@ -95,7 +91,19 @@ export class MatAutocompleteHarness extends ComponentHarness {
 
   /** Whether the autocomplete is open. */
   async isOpen(): Promise<boolean> {
-    const panel = await this._optionalPanel();
+    const panel = await this._getPanel();
     return !!panel && await panel.hasClass('mat-autocomplete-visible');
   }
+
+  /** Gets the panel associated with this autocomplete trigger. */
+  private async _getPanel() {
+    // Technically this is static, but it needs to be in a
+    // function, because the autocomplete's panel ID can changed.
+    return this._documentRootLocator.locatorForOptional(await this._getPanelSelector())();
+  }
+
+  /** Gets the selector that can be used to find the autocomplete trigger's panel. */
+  private async _getPanelSelector(): Promise<string> {
+    return `#${(await (await this.host()).getAttribute('aria-owns'))}`;
+  }
 }

src/material/autocomplete/testing/shared.spec.ts

@@ -101,7 +101,21 @@ export function runHarnessTests(
     const options = await input.getOptions();
 
     expect(groups.length).toBe(3);
+    expect(options.length).toBe(14);
+  });
+
+  it('should be able to get the autocomplete panel groups', async () => {
+    const input = await loader.getHarness(autocompleteHarness.with({selector: '#plain'}));
+    await input.focus();
+
+    const input2 = await loader.getHarness(autocompleteHarness.with({selector: '#grouped'}));
+    await input2.focus();
+
+    const options = await input.getOptions();
+    const options2 = await input2.getOptions();
+
     expect(options.length).toBe(11);
+    expect(options2.length).toBe(14);
   });
 
   it('should be able to get filtered panel groups', async () => {
@@ -178,15 +192,32 @@ class AutocompleteHarnessTest {
   stateGroups = [
     {
       name: 'One',
-      states: this.states.slice(0, 3)
+      states: [
+        {code: 'IA', name: 'Iowa'},
+        {code: 'KS', name: 'Kansas'},
+        {code: 'KY', name: 'Kentucky'},
+        {code: 'LA', name: 'Louisiana'},
+        {code: 'ME', name: 'Maine'}
+      ]
     },
     {
       name: 'Two',
-      states: this.states.slice(3, 7)
+      states: [
+        {code: 'RI', name: 'Rhode Island'},
+        {code: 'SC', name: 'South Carolina'},
+        {code: 'SD', name: 'South Dakota'},
+        {code: 'TN', name: 'Tennessee'},
+        {code: 'TX', name: 'Texas'},
+      ]
     },
     {
       name: 'Three',
-      states: this.states.slice(7)
+      states: [
+        {code: 'UT', name: 'Utah'},
+        {code: 'WA', name: 'Washington'},
+        {code: 'WV', name: 'West Virginia'},
+        {code: 'WI', name: 'Wisconsin'}
+      ]
     }
   ];
 }