QueryHistory: Improve test performance (#78255)

Improve performance

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) => {

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]);
 };

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 });
+};

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');
   });