From caf92ce34af50655b5d38c1ceeb3f2a262d5d065 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 19 Apr 2020 12:47:58 +0200
Subject: [PATCH] fix(select/testing): incorrect options if multiple selects
 are on the page at the same time

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               |  1 +
 src/material/select/testing/select-harness.ts | 14 ++++--
 src/material/select/testing/shared.spec.ts    | 46 +++++++++++++++++--
 3 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/src/material/select/select.html b/src/material/select/select.html
index bd0a4522c612..82fb56187b3f 100644
--- a/src/material/select/select.html
+++ b/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'"
diff --git a/src/material/select/testing/select-harness.ts b/src/material/select/testing/select-harness.ts
index 4038a08c77a7..8597389665b1 100644
--- a/src/material/select/testing/select-harness.ts
+++ b/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`;
+  }
 }
diff --git a/src/material/select/testing/shared.spec.ts b/src/material/select/testing/shared.spec.ts
index bf8e1573cddf..4b847ec56e56 100644
--- a/src/material/select/testing/shared.spec.ts
+++ b/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'}
+      ]
     }
   ];
 }