Explore: Fix Query History flakey test (#71190)

* Baseline benchmark

* Baseline benchmark

* Re-trigger the build

* Use test id

* Re-trigger the build

* Re-trigger the build

* Use test id to speed up the test

* Split query history sync tests

public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx

@@ -193,7 +193,7 @@ export function RichHistoryQueriesTab(props: RichHistoryQueriesTabProps) {
         </div>
       </div>
 
-      <div className={styles.containerContent}>
+      <div className={styles.containerContent} data-testid="query-history-queries-tab">
         <div className={styles.selectors}>
           {!richHistorySettings.activeDatasourceOnly && (
             <MultiSelect

public/app/features/explore/spec/helper/assert.ts

@@ -1,4 +1,4 @@
-import { waitFor } from '@testing-library/react';
+import { waitFor, within } from '@testing-library/react';
 
 import { withinExplore } from './setup';
 
@@ -34,7 +34,10 @@ export const assertQueryHistoryComment = async (expectedQueryComments: string[],
 
 export const assertQueryHistoryIsStarred = async (expectedStars: boolean[], exploreId = 'left') => {
   const selector = withinExplore(exploreId);
-  const starButtons = selector.getAllByRole('button', { name: /Star query|Unstar query/ });
+  // 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/ });
+
   await waitFor(() =>
     expectedStars.forEach((starred, queryIndex) => {
       expect(starButtons[queryIndex]).toHaveAccessibleName(starred ? 'Unstar query' : 'Star query');

public/app/features/explore/spec/queryHistory.test.tsx

@@ -142,46 +142,53 @@ describe('Explore: Query History', () => {
     await assertQueryHistory(['{"expr":"query #2"}', '{"expr":"query #1"}']);
   });
 
-  // FIXME: flaky test
-  it.skip('updates the state in both Explore panes', async () => {
-    const urlParams = {
-      left: serializeStateToUrlParam({
-        datasource: 'loki',
-        queries: [{ refId: 'A', expr: 'query #1' }],
-        range: { from: 'now-1h', to: 'now' },
-      }),
-      right: serializeStateToUrlParam({
-        datasource: 'loki',
-        queries: [{ refId: 'A', expr: 'query #2' }],
-        range: { from: 'now-1h', to: 'now' },
-      }),
-    };
+  describe('updates the state in both Explore panes', () => {
+    beforeEach(async () => {
+      const urlParams = {
+        left: serializeStateToUrlParam({
+          datasource: 'loki',
+          queries: [{ refId: 'A', expr: 'query #1' }],
+          range: { from: 'now-1h', to: 'now' },
+        }),
+        right: serializeStateToUrlParam({
+          datasource: 'loki',
+          queries: [{ refId: 'A', expr: 'query #2' }],
+          range: { from: 'now-1h', to: 'now' },
+        }),
+      };
+
+      const { datasources } = setupExplore({ urlParams });
+      jest.mocked(datasources.loki.query).mockReturnValue(makeLogsQueryResponse());
+      await waitForExplore();
+      await waitForExplore('right');
+
+      await openQueryHistory('left');
+      await openQueryHistory('right');
+    });
 
-    const { datasources } = setupExplore({ urlParams });
-    jest.mocked(datasources.loki.query).mockReturnValue(makeLogsQueryResponse());
-    await waitForExplore();
-    await waitForExplore('right');
-
-    // queries in history
-    await openQueryHistory('left');
-    await assertQueryHistory(['{"expr":"query #2"}', '{"expr":"query #1"}'], 'left');
-    await openQueryHistory('right');
-    await assertQueryHistory(['{"expr":"query #2"}', '{"expr":"query #1"}'], 'right');
-
-    // star one one query
-    await starQueryHistory(1, 'left');
-    await assertQueryHistoryIsStarred([false, true], 'left');
-    await assertQueryHistoryIsStarred([false, true], 'right');
-    expect(reportInteractionMock).toBeCalledWith('grafana_explore_query_history_starred', {
-      queryHistoryEnabled: false,
-      newValue: true,
+    it('initial state is in sync', async () => {
+      await assertQueryHistory(['{"expr":"query #2"}', '{"expr":"query #1"}'], 'left');
+      await assertQueryHistory(['{"expr":"query #2"}', '{"expr":"query #1"}'], 'right');
     });
 
-    await deleteQueryHistory(0, 'left');
-    await assertQueryHistory(['{"expr":"query #1"}'], 'left');
-    await assertQueryHistory(['{"expr":"query #1"}'], 'right');
-    expect(reportInteractionMock).toBeCalledWith('grafana_explore_query_history_deleted', {
-      queryHistoryEnabled: false,
+    it('starred queries are synced', async () => {
+      // star one one query
+      await starQueryHistory(1, 'left');
+      await assertQueryHistoryIsStarred([false, true], 'left');
+      await assertQueryHistoryIsStarred([false, true], 'right');
+      expect(reportInteractionMock).toBeCalledWith('grafana_explore_query_history_starred', {
+        queryHistoryEnabled: false,
+        newValue: true,
+      });
+    });
+
+    it('deleted queries are synced', async () => {
+      await deleteQueryHistory(0, 'left');
+      await assertQueryHistory(['{"expr":"query #1"}'], 'left');
+      await assertQueryHistory(['{"expr":"query #1"}'], 'right');
+      expect(reportInteractionMock).toBeCalledWith('grafana_explore_query_history_deleted', {
+        queryHistoryEnabled: false,
+      });
     });
   });