From d41b0f0a21b18b468296f1349b1aa60cd5136abe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Thu, 2 Jun 2022 15:48:04 +0200
Subject: [PATCH] Test commenting query history (#49802)

---
 .../features/explore/spec/helper/assert.ts    | 14 +++++++++++++
 .../explore/spec/helper/interactions.ts       | 12 +++++++++++
 .../explore/spec/queryHistory.test.tsx        | 21 +++++++++++++++++++
 3 files changed, 47 insertions(+)

diff --git a/public/app/features/explore/spec/helper/assert.ts b/public/app/features/explore/spec/helper/assert.ts
index 56fbe497e42..fdf337b8fe6 100644
--- a/public/app/features/explore/spec/helper/assert.ts
+++ b/public/app/features/explore/spec/helper/assert.ts
@@ -23,6 +23,20 @@ export const assertQueryHistory = async (expectedQueryTexts: string[], exploreId
   });
 };
 
+export const assertQueryHistoryComment = async (
+  expectedQueryComments: string[],
+  exploreId: ExploreId = ExploreId.left
+) => {
+  const selector = withinExplore(exploreId);
+  await waitFor(() => {
+    expect(selector.getByText(new RegExp(`${expectedQueryComments.length} queries`))).toBeInTheDocument();
+    const queryComments = selector.getAllByLabelText('Query comment');
+    expectedQueryComments.forEach((expectedQueryText, queryIndex) => {
+      expect(queryComments[queryIndex]).toHaveTextContent(expectedQueryText);
+    });
+  });
+};
+
 export const assertQueryHistoryIsStarred = async (expectedStars: boolean[], exploreId: ExploreId = ExploreId.left) => {
   const selector = withinExplore(exploreId);
   const starButtons = selector.getAllByRole('button', { name: /Star query|Unstar query/ });
diff --git a/public/app/features/explore/spec/helper/interactions.ts b/public/app/features/explore/spec/helper/interactions.ts
index 565e868bca7..ac6272cf019 100644
--- a/public/app/features/explore/spec/helper/interactions.ts
+++ b/public/app/features/explore/spec/helper/interactions.ts
@@ -62,6 +62,18 @@ export const starQueryHistory = (queryIndex: number, exploreId: ExploreId = Expl
   invokeAction(queryIndex, 'Star query', exploreId);
 };
 
+export const commentQueryHistory = async (
+  queryIndex: number,
+  comment: string,
+  exploreId: ExploreId = ExploreId.left
+) => {
+  await invokeAction(queryIndex, 'Add comment', exploreId);
+  const input = withinExplore(exploreId).getByPlaceholderText('An optional description of what the query does.');
+  await userEvent.clear(input);
+  await userEvent.type(input, comment);
+  await invokeAction(queryIndex, 'Submit button', exploreId);
+};
+
 export const deleteQueryHistory = (queryIndex: number, exploreId: ExploreId = ExploreId.left) => {
   invokeAction(queryIndex, 'Delete query', exploreId);
 };
diff --git a/public/app/features/explore/spec/queryHistory.test.tsx b/public/app/features/explore/spec/queryHistory.test.tsx
index 682b1913ac4..93033acd9dd 100644
--- a/public/app/features/explore/spec/queryHistory.test.tsx
+++ b/public/app/features/explore/spec/queryHistory.test.tsx
@@ -11,12 +11,14 @@ import {
   assertDataSourceFilterVisibility,
   assertLoadMoreQueryHistoryNotVisible,
   assertQueryHistory,
+  assertQueryHistoryComment,
   assertQueryHistoryElementsShown,
   assertQueryHistoryExists,
   assertQueryHistoryIsStarred,
   assertQueryHistoryTabIsSelected,
 } from './helper/assert';
 import {
+  commentQueryHistory,
   closeQueryHistory,
   deleteQueryHistory,
   inputQuery,
@@ -182,6 +184,25 @@ describe('Explore: Query History', () => {
     });
   });
 
+  it('add comments to query history', async () => {
+    const urlParams = {
+      left: serializeStateToUrlParam({
+        datasource: 'loki',
+        queries: [{ refId: 'A', expr: 'query #1' }],
+        range: { from: 'now-1h', to: 'now' },
+      }),
+    };
+
+    const { datasources } = setupExplore({ urlParams });
+    (datasources.loki.query as jest.Mock).mockReturnValueOnce(makeLogsQueryResponse());
+    await waitForExplore();
+    await openQueryHistory();
+    await assertQueryHistory(['{"expr":"query #1"}'], ExploreId.left);
+
+    await commentQueryHistory(0, 'test comment');
+    await assertQueryHistoryComment(['test comment'], ExploreId.left);
+  });
+
   it('updates query history settings', async () => {
     // open settings page
     setupExplore();