fix(select/testing): incorrect options if multiple selects are on the…

… page at the same time (#19112)

Fixes the test harness always retrieving the options for the first select when there are multiple selects on the page.

Fixes #19075.

src/material/select/select.html

@@ -32,6 +32,7 @@
   <div class="mat-select-panel-wrap" [@transformPanelWrap]>
     <div
       #panel
+      [attr.id]="id + '-panel'"
       class="mat-select-panel {{ _getPanelTheme() }}"
       [ngClass]="panelClass"
       [@transformPanel]="multiple ? 'showing-multiple' : 'showing'"

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

@@ -16,13 +16,11 @@ import {
 } from '@angular/material/core/testing';
 import {SelectHarnessFilters} from './select-harness-filters';
 
-const PANEL_SELECTOR = '.mat-select-panel';
 
 /** Harness for interacting with a standard mat-select in tests. */
 export class MatSelectHarness extends MatFormFieldControlHarness {
   private _documentRootLocator = this.documentRootLocatorFactory();
   private _backdrop = this._documentRootLocator.locatorFor('.cdk-overlay-backdrop');
-  private _optionalPanel = this._documentRootLocator.locatorForOptional(PANEL_SELECTOR);
   private _trigger = this.locatorFor('.mat-select-trigger');
   private _value = this.locatorFor('.mat-select-value');
 
@@ -84,7 +82,7 @@ export class MatSelectHarness extends MatFormFieldControlHarness {
     Promise<MatOptionHarness[]> {
     return this._documentRootLocator.locatorForAll(MatOptionHarness.with({
       ...filter,
-      ancestor: PANEL_SELECTOR
+      ancestor: await this._getPanelSelector()
     }))();
   }
 
@@ -93,13 +91,13 @@ export class MatSelectHarness extends MatFormFieldControlHarness {
     Promise<MatOptgroupHarness[]> {
     return this._documentRootLocator.locatorForAll(MatOptgroupHarness.with({
       ...filter,
-      ancestor: PANEL_SELECTOR
+      ancestor: await this._getPanelSelector()
     }))();
   }
 
   /** Gets whether the select is open. */
   async isOpen(): Promise<boolean> {
-    return !!(await this._optionalPanel());
+    return !!await this._documentRootLocator.locatorForOptional(await this._getPanelSelector())();
   }
 
   /** Opens the select's panel. */
@@ -138,4 +136,10 @@ export class MatSelectHarness extends MatFormFieldControlHarness {
       return (await this._backdrop()).click();
     }
   }
+
+  /** Gets the selector that should be used to find this select's panel. */
+  private async _getPanelSelector(): Promise<string> {
+    const id = await (await this.host()).getAttribute('id');
+    return `#${id}-panel`;
+  }
 }

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

@@ -152,7 +152,28 @@ export function runHarnessTests(
     const options = await select.getOptions();
 
     expect(groups.length).toBe(3);
-    expect(options.length).toBe(11);
+    expect(options.length).toBe(14);
+  });
+
+  it('should be able to get the select options when there are multiple open selects', async () => {
+    const singleSelect = await loader.getHarness(selectHarness.with({
+      selector: '#single-selection'
+    }));
+    await singleSelect.open();
+
+    const groupedSelect = await loader.getHarness(selectHarness.with({selector: '#grouped'}));
+    await groupedSelect.open();
+
+    const [singleOptions, groupedOptions] = await Promise.all([
+      singleSelect.getOptions(),
+      groupedSelect.getOptions()
+    ]);
+
+    expect(await singleOptions[0].getText()).toBe('Alabama');
+    expect(singleOptions.length).toBe(11);
+
+    expect(await groupedOptions[0].getText()).toBe('Iowa');
+    expect(groupedOptions.length).toBe(14);
   });
 
   it('should be able to get the value text from a single-selection select', async () => {
@@ -268,15 +289,32 @@ class SelectHarnessTest {
   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'}
+      ]
     }
   ];
 }