From 3d4940cf8559d4676077e522a8d24a55c017bdfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Thu, 16 Nov 2023 15:06:37 +0100
Subject: [PATCH] QueryHistory: Improve test performance (#78255)

Improve performance
---
 public/app/features/explore/spec/helper/assert.ts    |  9 +++------
 .../app/features/explore/spec/helper/interactions.ts |  7 +++----
 public/app/features/explore/spec/helper/setup.tsx    | 12 +++++++++++-
 .../app/features/explore/spec/queryHistory.test.tsx  |  1 -
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/public/app/features/explore/spec/helper/assert.ts b/public/app/features/explore/spec/helper/assert.ts
index d320cffcb8a..123db21a233 100644
--- a/public/app/features/explore/spec/helper/assert.ts
+++ b/public/app/features/explore/spec/helper/assert.ts
@@ -1,6 +1,6 @@
-import { waitFor, within } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 
-import { withinExplore } from './setup';
+import { getAllByRoleInQueryHistoryTab, withinExplore } from './setup';
 
 export const assertQueryHistoryExists = async (query: string, exploreId = 'left') => {
   const selector = withinExplore(exploreId);
@@ -49,10 +49,7 @@ export const assertQueryHistoryComment = async (expectedQueryComments: string[],
 };
 
 export const assertQueryHistoryIsStarred = async (expectedStars: boolean[], exploreId = 'left') => {
-  const selector = withinExplore(exploreId);
-  // Test ID is used to avoid test timeouts reported in #70158, #59116 and #47635
-  const queriesContainer = selector.getByTestId('query-history-queries-tab');
-  const starButtons = within(queriesContainer).getAllByRole('button', { name: /Star query|Unstar query/ });
+  const starButtons = getAllByRoleInQueryHistoryTab(exploreId, 'button', /Star query|Unstar query/);
 
   await waitFor(() =>
     expectedStars.forEach((starred, queryIndex) => {
diff --git a/public/app/features/explore/spec/helper/interactions.ts b/public/app/features/explore/spec/helper/interactions.ts
index 2213c82b09a..523a48db1ae 100644
--- a/public/app/features/explore/spec/helper/interactions.ts
+++ b/public/app/features/explore/spec/helper/interactions.ts
@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import { selectors } from '@grafana/e2e-selectors';
 
-import { withinExplore } from './setup';
+import { getAllByRoleInQueryHistoryTab, withinExplore } from './setup';
 
 export const changeDatasource = async (name: string) => {
   const datasourcePicker = (await screen.findByTestId(selectors.components.DataSourcePicker.container)).children[0];
@@ -74,8 +74,7 @@ export const loadMoreQueryHistory = async (exploreId = 'left') => {
   await userEvent.click(button);
 };
 
-const invokeAction = async (queryIndex: number, actionAccessibleName: string, exploreId: string) => {
-  const selector = withinExplore(exploreId);
-  const buttons = selector.getAllByRole('button', { name: actionAccessibleName });
+const invokeAction = async (queryIndex: number, actionAccessibleName: string | RegExp, exploreId: string) => {
+  const buttons = getAllByRoleInQueryHistoryTab(exploreId, 'button', actionAccessibleName);
   await userEvent.click(buttons[queryIndex]);
 };
diff --git a/public/app/features/explore/spec/helper/setup.tsx b/public/app/features/explore/spec/helper/setup.tsx
index 5b5a392d79b..db5dfa966f5 100644
--- a/public/app/features/explore/spec/helper/setup.tsx
+++ b/public/app/features/explore/spec/helper/setup.tsx
@@ -1,4 +1,4 @@
-import { waitFor, within } from '@testing-library/dom';
+import { ByRoleMatcher, waitFor, within } from '@testing-library/dom';
 import { render, screen } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { fromPairs } from 'lodash';
@@ -287,3 +287,13 @@ const exploreTestsHelper: { setupExplore: typeof setupExplore; tearDownExplore?:
     setupExplore,
     tearDownExplore: undefined,
   };
+
+/**
+ * Optimized version of getAllByRole to avoid timeouts in tests. Please check #70158, #59116 and #47635, #78236.
+ */
+export const getAllByRoleInQueryHistoryTab = (exploreId: string, role: ByRoleMatcher, name: string | RegExp) => {
+  const selector = withinExplore(exploreId);
+  // Test ID is used to avoid test timeouts reported in
+  const queriesContainer = selector.getByTestId('query-history-queries-tab');
+  return within(queriesContainer).getAllByRole(role, { name });
+};
diff --git a/public/app/features/explore/spec/queryHistory.test.tsx b/public/app/features/explore/spec/queryHistory.test.tsx
index 6db3d87335e..b4c80a13a8e 100644
--- a/public/app/features/explore/spec/queryHistory.test.tsx
+++ b/public/app/features/explore/spec/queryHistory.test.tsx
@@ -205,7 +205,6 @@ describe('Explore: Query History', () => {
     await waitForExplore();
     await openQueryHistory();
     await assertQueryHistory(['{"expr":"query #1"}'], 'left');
-
     await commentQueryHistory(0, 'test comment');
     await assertQueryHistoryComment(['test comment'], 'left');
   });