From feae460c4830eea80c6cabeb617b8c6baec5f797 Mon Sep 17 00:00:00 2001
From: Andreas Christou <andreas.christou@grafana.com>
Date: Tue, 16 May 2023 18:53:07 +0100
Subject: [PATCH] [v10.0.x] E2E: Fix configurePanel flow (#68580)

E2E: Fix configurePanel flow (#68487)

* Updates for new datasource picker

* Correct typing to ensure datasource selection

* Remove unused import

* Update labels

* Update labels and fix test

* Fix another test

(cherry picked from commit 51c15f3a898a930d13f7fd7e06279ed708f56565)

# Conflicts:
#	public/app/features/explore/Explore.test.tsx
---
 .betterer.results                                        | 3 +--
 .../grafana-e2e-selectors/src/selectors/components.ts    | 2 +-
 packages/grafana-e2e/src/flows/addDashboard.ts           | 1 +
 packages/grafana-e2e/src/flows/configurePanel.ts         | 6 +-----
 .../grafana-runtime/src/components/DataSourcePicker.tsx  | 5 ++++-
 public/app/features/explore/Explore.test.tsx             | 9 +++++----
 public/app/features/explore/spec/helper/interactions.ts  | 2 +-
 .../query/components/QueryEditorRowHeader.test.tsx       | 4 ++--
 8 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index aa8acb841fd..d6c1a7ff735 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -775,8 +775,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "packages/grafana-runtime/src/components/DataSourcePicker.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"]
+      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
     ],
     "packages/grafana-runtime/src/components/PanelRenderer.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index 7b13bd96fcc..319d5a438b9 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -301,7 +301,7 @@ export const Components = {
     container: 'data-testid Readonly folder picker select container',
   },
   DataSourcePicker: {
-    container: 'Data source picker select container',
+    container: 'data-testid Data source picker select container',
     /**
      * @deprecated use inputV2 instead
      */
diff --git a/packages/grafana-e2e/src/flows/addDashboard.ts b/packages/grafana-e2e/src/flows/addDashboard.ts
index a8c02d8e1fe..c0deeff25fa 100644
--- a/packages/grafana-e2e/src/flows/addDashboard.ts
+++ b/packages/grafana-e2e/src/flows/addDashboard.ts
@@ -144,6 +144,7 @@ export const addDashboard = (config?: Partial<AddDashboardConfig>) => {
   e2e.pages.SaveDashboardAsModal.newName().clear().type(title, { force: true });
   e2e.pages.SaveDashboardAsModal.save().click();
   e2e.flows.assertSuccessNotification();
+  e2e.pages.AddDashboard.addNewPanel().should('be.visible');
 
   e2e().logToConsole('Added dashboard with title:', title);
 
diff --git a/packages/grafana-e2e/src/flows/configurePanel.ts b/packages/grafana-e2e/src/flows/configurePanel.ts
index c6225fb4a0d..54125a20a56 100644
--- a/packages/grafana-e2e/src/flows/configurePanel.ts
+++ b/packages/grafana-e2e/src/flows/configurePanel.ts
@@ -1,7 +1,6 @@
 import { e2e } from '..';
 import { getScenarioContext } from '../support/scenarioContext';
 
-import { selectOption } from './selectOption';
 import { setDashboardTimeRange } from './setDashboardTimeRange';
 import { TimeRangeConfig } from './setTimeRange';
 
@@ -113,10 +112,7 @@ export const configurePanel = (config: PartialAddPanelConfig | PartialEditPanelC
     e2e().intercept(chartData.method, chartData.route).as('chartData');
 
     if (dataSourceName) {
-      selectOption({
-        container: e2e.components.DataSourcePicker.container(),
-        optionText: dataSourceName,
-      });
+      e2e.components.DataSourcePicker.container().click().type(`${dataSourceName}{downArrow}{enter}`);
     }
 
     // @todo instead wait for '@pluginModule' if not already loaded
diff --git a/packages/grafana-runtime/src/components/DataSourcePicker.tsx b/packages/grafana-runtime/src/components/DataSourcePicker.tsx
index b9ad9c2b761..8d527350366 100644
--- a/packages/grafana-runtime/src/components/DataSourcePicker.tsx
+++ b/packages/grafana-runtime/src/components/DataSourcePicker.tsx
@@ -181,7 +181,10 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
     const isClearable = typeof onClear === 'function';
 
     return (
-      <div aria-label={selectors.components.DataSourcePicker.container}>
+      <div
+        aria-label="Data source picker select container"
+        data-testid={selectors.components.DataSourcePicker.container}
+      >
         <Select
           isLoading={isLoading}
           disabled={disabled}
diff --git a/public/app/features/explore/Explore.test.tsx b/public/app/features/explore/Explore.test.tsx
index fd726b323f7..abfb8523624 100644
--- a/public/app/features/explore/Explore.test.tsx
+++ b/public/app/features/explore/Explore.test.tsx
@@ -4,7 +4,8 @@ import { AutoSizerProps } from 'react-virtualized-auto-sizer';
 import { TestProvider } from 'test/helpers/TestProvider';
 
 import { DataSourceApi, LoadingState, CoreApp, createTheme, EventBusSrv } from '@grafana/data';
-import { ExploreId } from 'app/types/explore';
+import { selectors } from '@grafana/e2e-selectors';
+import { ExploreId } from 'app/types';
 
 import { Explore, Props } from './Explore';
 import { scanStopAction } from './state/query';
@@ -132,7 +133,7 @@ describe('Explore', () => {
     setup();
 
     // Wait for the Explore component to render
-    await screen.findByLabelText('Data source picker select container');
+    await screen.findByTestId(selectors.components.DataSourcePicker.container);
 
     expect(screen.queryByTestId('explore-no-data')).not.toBeInTheDocument();
   });
@@ -142,7 +143,7 @@ describe('Explore', () => {
     setup({ queryResponse: queryResp });
 
     // Wait for the Explore component to render
-    await screen.findByLabelText('Data source picker select container');
+    await screen.findByTestId(selectors.components.DataSourcePicker.container);
 
     expect(screen.getByTestId('explore-no-data')).toBeInTheDocument();
   });
@@ -162,7 +163,7 @@ describe('Explore', () => {
     it('should render data source picker', async () => {
       setup();
 
-      const dataSourcePicker = await screen.findByLabelText('Data source picker select container');
+      const dataSourcePicker = await screen.findByTestId(selectors.components.DataSourcePicker.container);
 
       expect(dataSourcePicker).toBeInTheDocument();
     });
diff --git a/public/app/features/explore/spec/helper/interactions.ts b/public/app/features/explore/spec/helper/interactions.ts
index 4599ed101f1..a981dab22c4 100644
--- a/public/app/features/explore/spec/helper/interactions.ts
+++ b/public/app/features/explore/spec/helper/interactions.ts
@@ -8,7 +8,7 @@ import { ExploreId } from '../../../../types';
 import { withinExplore } from './setup';
 
 export const changeDatasource = async (name: string) => {
-  const datasourcePicker = (await screen.findByLabelText(selectors.components.DataSourcePicker.container)).children[0];
+  const datasourcePicker = (await screen.findByTestId(selectors.components.DataSourcePicker.container)).children[0];
   fireEvent.keyDown(datasourcePicker, { keyCode: 40 });
   const option = screen.getByText(name);
   fireEvent.click(option);
diff --git a/public/app/features/query/components/QueryEditorRowHeader.test.tsx b/public/app/features/query/components/QueryEditorRowHeader.test.tsx
index 668937d3cfa..c94fb627b03 100644
--- a/public/app/features/query/components/QueryEditorRowHeader.test.tsx
+++ b/public/app/features/query/components/QueryEditorRowHeader.test.tsx
@@ -71,13 +71,13 @@ describe('QueryEditorRowHeader', () => {
   it('should show data source picker when callback is passed', async () => {
     renderScenario({ onChangeDataSource: () => {} });
 
-    expect(screen.queryByLabelText(selectors.components.DataSourcePicker.container)).not.toBeNull();
+    expect(screen.queryByTestId(selectors.components.DataSourcePicker.container)).not.toBeNull();
   });
 
   it('should not show data source picker when no callback is passed', async () => {
     renderScenario({ onChangeDataSource: undefined });
 
-    expect(screen.queryByLabelText(selectors.components.DataSourcePicker.container)).toBeNull();
+    expect(screen.queryByTestId(selectors.components.DataSourcePicker.container)).toBeNull();
   });
 
   it('should render variables in the data source picker', async () => {