Test commenting query history (#49802)

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

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

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();