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,8 +142,8 @@ 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 () => {
+  describe('updates the state in both Explore panes', () => {
+    beforeEach(async () => {
       const urlParams = {
         left: serializeStateToUrlParam({
           datasource: 'loki',
@@ -162,12 +162,16 @@ describe('Explore: Query History', () => {
       await waitForExplore();
       await waitForExplore('right');
 
-    // queries in history
       await openQueryHistory('left');
-    await assertQueryHistory(['{"expr":"query #2"}', '{"expr":"query #1"}'], 'left');
       await openQueryHistory('right');
+    });
+
+    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');
+    });
 
+    it('starred queries are synced', async () => {
       // star one one query
       await starQueryHistory(1, 'left');
       await assertQueryHistoryIsStarred([false, true], 'left');
@@ -176,7 +180,9 @@ describe('Explore: Query History', () => {
         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');
@@ -184,6 +190,7 @@ describe('Explore: Query History', () => {
         queryHistoryEnabled: false,
       });
     });
+  });
 
   it('add comments to query history', async () => {
     const urlParams = {