Prometheus: Add tests for new explain section (#53182)

* Prometheus: Add tests for new explain section

* Update public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.test.tsx

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

* Mock MonacoQueryFieldWrapper

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

.betterer.results

@@ -8125,10 +8125,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
     ],
-    "public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.test.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
     "public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.test.tsx

@@ -2,7 +2,14 @@ import { getByText, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { LoadingState, MutableDataFrame, PanelData, TimeRange } from '@grafana/data';
+import {
+  DataSourceInstanceSettings,
+  DataSourcePluginMeta,
+  LoadingState,
+  MutableDataFrame,
+  PanelData,
+  TimeRange,
+} from '@grafana/data';
 
 import { PrometheusDatasource } from '../../datasource';
 import PromQlLanguageProvider from '../../language_provider';
@@ -11,6 +18,7 @@ import { getLabelSelects } from '../testUtils';
 import { PromVisualQuery } from '../types';
 
 import { PromQueryBuilder } from './PromQueryBuilder';
+import { EXPLAIN_LABEL_FILTER_CONTENT } from './PromQueryBuilderExplained';
 
 const defaultQuery: PromVisualQuery = {
   metric: 'random_metric',
@@ -183,28 +191,69 @@ describe('PromQueryBuilder', () => {
     await userEvent.click(screen.getByText('histogram_metric_sum'));
     await waitFor(() => expect(screen.getAllByText(/hint:/)).toHaveLength(2));
   });
+
+  it('shows explain section when showExplain is true', async () => {
+    const { datasource } = createDatasource();
+    const props = createProps(datasource);
+    props.showExplain = true;
+    render(
+      <PromQueryBuilder
+        {...props}
+        query={{
+          metric: 'histogram_metric_sum',
+          labels: [],
+          operations: [],
+        }}
+      />
+    );
+    expect(await screen.findByText(EXPLAIN_LABEL_FILTER_CONTENT)).toBeInTheDocument();
+  });
+
+  it('does not show explain section when showExplain is false', async () => {
+    const { datasource } = createDatasource();
+    const props = createProps(datasource);
+    render(
+      <PromQueryBuilder
+        {...props}
+        query={{
+          metric: 'histogram_metric_sum',
+          labels: [],
+          operations: [],
+        }}
+      />
+    );
+    expect(await screen.queryByText(EXPLAIN_LABEL_FILTER_CONTENT)).not.toBeInTheDocument();
+  });
 });
 
-function setup(query: PromVisualQuery = defaultQuery, data?: PanelData) {
+function createDatasource() {
   const languageProvider = new EmptyLanguageProviderMock() as unknown as PromQlLanguageProvider;
   const datasource = new PrometheusDatasource(
     {
       url: '',
       jsonData: {},
-      meta: {} as any,
-    } as any,
+      meta: {} as DataSourcePluginMeta,
+    } as DataSourceInstanceSettings,
     undefined,
     undefined,
     languageProvider
   );
-  const props = {
+  return { datasource, languageProvider };
+}
+
+function createProps(datasource: PrometheusDatasource, data?: PanelData) {
+  return {
     datasource,
     onRunQuery: () => {},
     onChange: () => {},
     data,
     showExplain: false,
   };
+}
 
+function setup(query: PromVisualQuery = defaultQuery, data?: PanelData) {
+  const { datasource, languageProvider } = createDatasource();
+  const props = createProps(datasource, data);
   const { container } = render(<PromQueryBuilder {...props} query={query} />);
   return { languageProvider, datasource, container };
 }

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx

@@ -20,6 +20,7 @@ import { PromVisualQuery } from '../types';
 
 import { MetricSelect } from './MetricSelect';
 import { NestedQueryList } from './NestedQueryList';
+import { EXPLAIN_LABEL_FILTER_CONTENT } from './PromQueryBuilderExplained';
 
 export interface Props {
   query: PromVisualQuery;
@@ -115,7 +116,7 @@ export const PromQueryBuilder = React.memo<Props>((props) => {
           stepNumber={1}
           title={<RawQuery query={`${query.metric} ${promQueryModeller.renderLabels(query.labels)}`} lang={lang} />}
         >
-          Fetch all series matching metric name and label filters.
+          {EXPLAIN_LABEL_FILTER_CONTENT}
         </OperationExplainedBox>
       )}
       <OperationsEditorRow>

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderExplained.tsx

@@ -10,6 +10,8 @@ import { OperationListExplained } from '../shared/OperationListExplained';
 import { RawQuery } from '../shared/RawQuery';
 import { PromVisualQuery } from '../types';
 
+export const EXPLAIN_LABEL_FILTER_CONTENT = 'Fetch all series matching metric name and label filters.';
+
 export interface Props {
   query: string;
 }
@@ -24,7 +26,7 @@ export const PromQueryBuilderExplained = React.memo<Props>(({ query }) => {
         stepNumber={1}
         title={<RawQuery query={`${visQuery.metric} ${promQueryModeller.renderLabels(visQuery.labels)}`} lang={lang} />}
       >
-        Fetch all series matching metric name and label filters.
+        {EXPLAIN_LABEL_FILTER_CONTENT}
       </OperationExplainedBox>
       <OperationListExplained<PromVisualQuery>
         stepNumber={2}

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryCodeEditor.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { DataSourceInstanceSettings, DataSourcePluginMeta } from '@grafana/data';
+
+import { PrometheusDatasource } from '../../datasource';
+import PromQlLanguageProvider from '../../language_provider';
+import { EmptyLanguageProviderMock } from '../../language_provider.mock';
+
+import { EXPLAIN_LABEL_FILTER_CONTENT } from './PromQueryBuilderExplained';
+import { PromQueryCodeEditor } from './PromQueryCodeEditor';
+
+jest.mock('../../components/monaco-query-field/MonacoQueryFieldWrapper', () => {
+  const fakeQueryField = () => <div>prometheus query field</div>;
+  return { MonacoQueryFieldWrapper: fakeQueryField };
+});
+
+function createDatasource() {
+  const languageProvider = new EmptyLanguageProviderMock() as unknown as PromQlLanguageProvider;
+  const datasource = new PrometheusDatasource(
+    {
+      url: '',
+      jsonData: {},
+      meta: {} as DataSourcePluginMeta,
+    } as DataSourceInstanceSettings,
+    undefined,
+    undefined,
+    languageProvider
+  );
+  return { datasource, languageProvider };
+}
+
+function createProps(datasource: PrometheusDatasource) {
+  return {
+    datasource,
+    onRunQuery: () => {},
+    onChange: () => {},
+    showExplain: false,
+  };
+}
+
+describe('PromQueryCodeEditor', () => {
+  it('shows explain section when showExplain is true', async () => {
+    const { datasource } = createDatasource();
+    const props = createProps(datasource);
+    props.showExplain = true;
+    render(<PromQueryCodeEditor {...props} query={{ expr: '', refId: 'refid', interval: '1s' }} />);
+    expect(await screen.findByText(EXPLAIN_LABEL_FILTER_CONTENT)).toBeInTheDocument();
+  });
+
+  it('does not show explain section when showExplain is false', async () => {
+    const { datasource } = createDatasource();
+    const props = createProps(datasource);
+    render(<PromQueryCodeEditor {...props} query={{ expr: '', refId: 'refid', interval: '1s' }} />);
+    expect(await screen.queryByText(EXPLAIN_LABEL_FILTER_CONTENT)).not.toBeInTheDocument();
+  });
+});

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx

@@ -9,6 +9,7 @@ import { EmptyLanguageProviderMock } from '../../language_provider.mock';
 import { PromQuery } from '../../types';
 import { QueryEditorMode } from '../shared/types';
 
+import { EXPLAIN_LABEL_FILTER_CONTENT } from './PromQueryBuilderExplained';
 import { PromQueryEditorSelector } from './PromQueryEditorSelector';
 
 // We need to mock this because it seems jest has problem importing monaco in tests
@@ -108,6 +109,13 @@ describe('PromQueryEditorSelector', () => {
     expect(screen.getByLabelText('selector').textContent).toBe('my_metric');
   });
 
+  it('Can enable explain', async () => {
+    renderWithMode(QueryEditorMode.Builder);
+    expect(screen.queryByText(EXPLAIN_LABEL_FILTER_CONTENT)).not.toBeInTheDocument();
+    screen.getByLabelText('Explain').click();
+    expect(await screen.findByText(EXPLAIN_LABEL_FILTER_CONTENT)).toBeInTheDocument();
+  });
+
   it('changes to code mode', async () => {
     const { onChange } = renderWithMode(QueryEditorMode.Builder);
     await switchToMode(QueryEditorMode.Code);