Loki: Add tests for explain section in builder and code editor (#53113)

* Loki: Add tests for new explain section

* Update any assertions
This commit is contained in:
Ivana Huckova 2022-08-02 17:20:22 +02:00 committed by GitHub
parent 8a1dc85e2c
commit 5009c330ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 97 additions and 8 deletions

View File

@ -7562,10 +7562,6 @@ exports[`better eslint`] = {
"public/app/plugins/datasource/loki/querybuilder/binaryScalarOperations.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.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/loki/querybuilder/components/LokiQueryBuilder.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"]

View File

@ -2,10 +2,13 @@ import { render, screen, getAllByRole, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { DataSourceInstanceSettings, DataSourcePluginMeta } from '@grafana/data';
import { LokiDatasource } from '../../datasource';
import { LokiOperationId, LokiVisualQuery } from '../types';
import { LokiQueryBuilder } from './LokiQueryBuilder';
import { EXPLAIN_LABEL_FILTER_CONTENT } from './LokiQueryBuilderExplained';
const defaultQuery: LokiVisualQuery = {
labels: [{ op: '=', label: 'baz', value: 'bar' }],
@ -17,8 +20,8 @@ const createDefaultProps = () => {
{
url: '',
jsonData: {},
meta: {} as any,
} as any,
meta: {} as DataSourcePluginMeta,
} as DataSourceInstanceSettings,
undefined,
undefined
);
@ -66,4 +69,30 @@ describe('LokiQueryBuilder', () => {
).not.toBeInTheDocument();
});
});
it('shows explain section when showExplain is true', async () => {
const query = {
labels: [{ label: 'foo', op: '=', value: 'bar' }],
operations: [{ id: LokiOperationId.LineContains, params: ['error'] }],
};
const props = createDefaultProps();
props.showExplain = true;
props.datasource.getDataSamples = jest.fn().mockResolvedValue([]);
render(<LokiQueryBuilder {...props} query={query} />);
expect(await screen.findByText(EXPLAIN_LABEL_FILTER_CONTENT)).toBeInTheDocument();
});
it('does not shows explain section when showExplain is false', async () => {
const query = {
labels: [{ label: 'foo', op: '=', value: 'bar' }],
operations: [{ id: LokiOperationId.LineContains, params: ['error'] }],
};
const props = createDefaultProps();
props.datasource.getDataSamples = jest.fn().mockResolvedValue([]);
render(<LokiQueryBuilder {...props} query={query} />);
await waitFor(() => {
expect(screen.queryByText(EXPLAIN_LABEL_FILTER_CONTENT)).not.toBeInTheDocument();
});
});
});

View File

@ -21,6 +21,7 @@ import { lokiQueryModeller } from '../LokiQueryModeller';
import { buildVisualQueryFromString } from '../parsing';
import { LokiOperationId, LokiVisualQuery } from '../types';
import { EXPLAIN_LABEL_FILTER_CONTENT } from './LokiQueryBuilderExplained';
import { NestedQueryList } from './NestedQueryList';
export interface Props {
@ -119,7 +120,7 @@ export const LokiQueryBuilder = React.memo<Props>(({ datasource, query, onChange
stepNumber={1}
title={<RawQuery query={`${lokiQueryModeller.renderLabels(query.labels)}`} lang={lang} />}
>
Fetch all log lines matching label filters.
{EXPLAIN_LABEL_FILTER_CONTENT}
</OperationExplainedBox>
)}
<OperationsEditorRow>

View File

@ -10,6 +10,8 @@ import { lokiQueryModeller } from '../LokiQueryModeller';
import { buildVisualQueryFromString } from '../parsing';
import { LokiVisualQuery } from '../types';
export const EXPLAIN_LABEL_FILTER_CONTENT = 'Fetch all log lines matching label filters.';
export interface Props {
query: string;
}
@ -24,7 +26,7 @@ export const LokiQueryBuilderExplained = React.memo<Props>(({ query }) => {
stepNumber={1}
title={<RawQuery query={`${lokiQueryModeller.renderLabels(visQuery.labels)}`} lang={lang} />}
>
Fetch all log lines matching label filters.
{EXPLAIN_LABEL_FILTER_CONTENT}
</OperationExplainedBox>
<OperationListExplained<LokiVisualQuery>
stepNumber={2}

View File

@ -0,0 +1,53 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { DataSourceInstanceSettings, DataSourcePluginMeta } from '@grafana/data';
import { LokiDatasource } from '../../datasource';
import { LokiQuery } from '../../types';
import { EXPLAIN_LABEL_FILTER_CONTENT } from './LokiQueryBuilderExplained';
import { LokiQueryCodeEditor } from './LokiQueryCodeEditor';
const defaultQuery: LokiQuery = {
expr: '{job="bar}',
refId: 'A',
};
const createDefaultProps = () => {
const datasource = new LokiDatasource(
{
url: '',
jsonData: {},
meta: {} as DataSourcePluginMeta,
} as DataSourceInstanceSettings,
undefined,
undefined
);
const props = {
datasource,
onRunQuery: () => {},
onChange: () => {},
showExplain: false,
};
return props;
};
describe('LokiQueryCodeEditor', () => {
it('shows explain section when showExplain is true', () => {
const props = createDefaultProps();
props.showExplain = true;
props.datasource.metadataRequest = jest.fn().mockResolvedValue([]);
render(<LokiQueryCodeEditor {...props} query={defaultQuery} />);
expect(screen.getByText(EXPLAIN_LABEL_FILTER_CONTENT)).toBeInTheDocument();
});
it('does not shows explain section when showExplain is true', () => {
const props = createDefaultProps();
props.datasource.metadataRequest = jest.fn().mockResolvedValue([]);
render(<LokiQueryCodeEditor {...props} query={defaultQuery} />);
expect(screen.queryByText(EXPLAIN_LABEL_FILTER_CONTENT)).not.toBeInTheDocument();
});
});

View File

@ -8,6 +8,7 @@ import { QueryEditorMode } from 'app/plugins/datasource/prometheus/querybuilder/
import { LokiDatasource } from '../../datasource';
import { LokiQuery, LokiQueryType } from '../../types';
import { EXPLAIN_LABEL_FILTER_CONTENT } from './LokiQueryBuilderExplained';
import { LokiQueryEditorSelector } from './LokiQueryEditorSelector';
jest.mock('@grafana/runtime', () => {
@ -117,6 +118,13 @@ describe('LokiQueryEditorSelector', () => {
expect(selector.textContent).toBe('{job="grafana"}');
});
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);