From bbae4af935146ab54e13190ded63788179f5984d Mon Sep 17 00:00:00 2001
From: Fabrizio <135109076+fabrizio-grafana@users.noreply.github.com>
Date: Wed, 17 Apr 2024 12:32:22 +0200
Subject: [PATCH] Tempo: Add `waitFor` in flaky test (#86277)

---
 .../plugins/datasource/tempo/VariableQueryEditor.test.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/datasource/tempo/VariableQueryEditor.test.tsx b/public/app/plugins/datasource/tempo/VariableQueryEditor.test.tsx
index 3b843ed7a81..3d5554775a5 100644
--- a/public/app/plugins/datasource/tempo/VariableQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/tempo/VariableQueryEditor.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
@@ -56,6 +56,12 @@ describe('TempoVariableQueryEditor', () => {
     render(<TempoVariableQueryEditor {...props} onChange={onChange} />);
 
     await selectOptionInTest(screen.getByLabelText('Query type'), 'Label values');
+    await userEvent.click(document.body);
+
+    // The Label field is rendered only after the query type has been selected.
+    // We wait for it to be displayed to avoid flakyness.
+    await waitFor(() => expect(screen.getByLabelText('Label')).toBeInTheDocument());
+
     await selectOptionInTest(screen.getByLabelText('Label'), 'luna');
     await userEvent.click(document.body);