diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.test.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.test.tsx index 5b5df499d42..8ca87275707 100644 --- a/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.test.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import { PromExploreExtraFieldProps, PromExploreExtraField } from './PromExploreExtraField'; +import { PromExploreExtraFieldProps, PromExploreExtraField, testIds } from './PromExploreExtraField'; const setup = (propOverrides?: PromExploreExtraFieldProps) => { const query = { exemplar: false }; @@ -23,11 +23,11 @@ const setup = (propOverrides?: PromExploreExtraFieldProps) => { describe('PromExploreExtraField', () => { it('should render step field', () => { setup(); - expect(screen.getByTestId('stepField')).toBeInTheDocument(); + expect(screen.getByTestId(testIds.stepField)).toBeInTheDocument(); }); it('should render query type field', () => { setup(); - expect(screen.getByTestId('queryTypeField')).toBeInTheDocument(); + expect(screen.getByTestId(testIds.queryTypeField)).toBeInTheDocument(); }); }); diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx index 410c0055006..35dbc0a8ac1 100644 --- a/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx @@ -66,10 +66,10 @@ export const PromExploreExtraField: React.FC = memo( } return ( -
+
{/*Query type field*/}
= memo(
{/*Step field*/}
= memo( ); } ); + +export const testIds = { + extraFieldEditor: 'prom-editor-extra-field', + stepField: 'prom-editor-extra-field-step', + queryTypeField: 'prom-editor-extra-field-query-type', +}; diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.test.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.test.tsx index b3fc96cd575..aeb454bcfa1 100644 --- a/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.test.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { shallow } from 'enzyme'; -import { act } from 'react-dom/test-utils'; -import PromExploreQueryEditor from './PromExploreQueryEditor'; +import { render, screen } from '@testing-library/react'; +import PromExploreQueryEditor, { testIds } from './PromExploreQueryEditor'; +import { testIds as extraFieldTestIds } from './PromExploreExtraField'; import { PrometheusDatasource } from '../datasource'; import { PromQuery } from '../types'; import { LoadingState, PanelData, toUtc, TimeRange } from '@grafana/data'; @@ -16,18 +16,21 @@ jest.mock('./monaco-query-field/MonacoQueryFieldWrapper', () => { }; }); -const setup = (renderMethod: any, propOverrides?: object) => { +const setup = (propOverrides?: object) => { const datasourceMock: unknown = { languageProvider: { syntax: () => {}, getLabelKeys: () => [], metrics: [], + start: () => Promise.resolve([]), }, + getInitHints: () => [], + exemplarsAvailable: true, }; const datasource: PrometheusDatasource = datasourceMock as PrometheusDatasource; const onRunQuery = jest.fn(); const onChange = jest.fn(); - const query: PromQuery = { expr: '', refId: 'A', interval: '1s' }; + const query: PromQuery = { expr: '', refId: 'A', interval: '1s', exemplar: true }; const range: TimeRange = { from: toUtc('2020-01-01', 'YYYY-MM-DD'), to: toUtc('2020-01-02', 'YYYY-MM-DD'), @@ -84,30 +87,55 @@ const setup = (renderMethod: any, propOverrides?: object) => { Object.assign(props, propOverrides); - return renderMethod(); + return ; }; describe('PromExploreQueryEditor', () => { - let originalGetSelection: typeof window.getSelection; - beforeAll(() => { - originalGetSelection = window.getSelection; - window.getSelection = () => null; - }); - - afterAll(() => { - window.getSelection = originalGetSelection; - }); - it('should render component', () => { - const wrapper = setup(shallow); - expect(wrapper).toMatchSnapshot(); + render(setup()); + expect(screen.getByTestId(testIds.editor)).toBeInTheDocument(); }); it('should render PromQueryField with ExtraFieldElement', async () => { - // @ts-ignore strict null errpr TS2345: Argument of type '() => Promise' is not assignable to parameter of type '() => void | undefined'. - await act(async () => { - const wrapper = setup(shallow); - expect(wrapper.html()).toContain('aria-label="Prometheus extra field"'); - }); + render(setup()); + expect(screen.getByTestId(extraFieldTestIds.extraFieldEditor)).toBeInTheDocument(); + }); + + it('should set default value for expr if it is undefined', async () => { + const onChange = jest.fn(); + const query = { expr: undefined, exemplar: false, instant: false, range: true }; + render(setup({ onChange, query })); + expect(onChange).toHaveBeenCalledTimes(1); + expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ expr: '' })); + }); + + it('should set default value for exemplars if it is undefined', async () => { + const onChange = jest.fn(); + const query = { expr: '', instant: false, range: true }; + render(setup({ onChange, query })); + expect(onChange).toHaveBeenCalledTimes(1); + expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ exemplar: true })); + }); + + it('should set default value for instant and range if expr is falsy', async () => { + const onChange = jest.fn(); + let query = { expr: '', exemplar: true }; + render(setup({ onChange, query })); + expect(onChange).toHaveBeenCalledTimes(1); + expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ instant: true, range: true })); + }); + + it('should not set default value for instant and range with truthy expr', async () => { + const onChange = jest.fn(); + let query = { expr: 'foo', exemplar: true }; + render(setup({ onChange, query })); + expect(onChange).toHaveBeenCalledTimes(0); + }); + + it('should add default values for multiple missing values', async () => { + const onChange = jest.fn(); + let query = {}; + render(setup({ onChange, query })); + expect(onChange).toHaveBeenCalledTimes(3); }); }); diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx index e51f1ced0f9..a953e1b98c8 100644 --- a/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx @@ -19,7 +19,8 @@ export const PromExploreQueryEditor: FC = (props: Props) => { onChange({ ...query, exemplar: true }); } - if (!query.instant && !query.range) { + // Override query type to "Both" only for new queries (no query.expr). + if (!query.instant && !query.range && !query.expr) { onChange({ ...query, instant: true, range: true }); } }, [onChange, query]); @@ -35,6 +36,7 @@ export const PromExploreQueryEditor: FC = (props: Props) => { onBlur={() => {}} history={history} data={data} + data-testid={testIds.editor} ExtraFieldElement={ } @@ -43,3 +45,7 @@ export const PromExploreQueryEditor: FC = (props: Props) => { }; export default memo(PromExploreQueryEditor); + +export const testIds = { + editor: 'prom-editor-explore', +}; diff --git a/public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreQueryEditor.test.tsx.snap b/public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreQueryEditor.test.tsx.snap deleted file mode 100644 index 307cf6fb60a..00000000000 --- a/public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreQueryEditor.test.tsx.snap +++ /dev/null @@ -1,93 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PromExploreQueryEditor should render component 1`] = ` - - } - app="explore" - data={ - Object { - "request": Object { - "app": "Grafana", - "dashboardId": 1, - "interval": "1s", - "intervalMs": 1000, - "panelId": 1, - "range": Object { - "from": "2020-01-01T00:00:00.000Z", - "raw": Object { - "from": "2020-01-01T00:00:00.000Z", - "to": "2020-01-02T00:00:00.000Z", - }, - "to": "2020-01-02T00:00:00.000Z", - }, - "requestId": "1", - "scopedVars": Object {}, - "startTime": 0, - "targets": Array [], - "timezone": "GMT", - }, - "series": Array [], - "state": "NotStarted", - "timeRange": Object { - "from": "2020-01-01T00:00:00.000Z", - "raw": Object { - "from": "2020-01-01T00:00:00.000Z", - "to": "2020-01-02T00:00:00.000Z", - }, - "to": "2020-01-02T00:00:00.000Z", - }, - } - } - datasource={ - Object { - "languageProvider": Object { - "getLabelKeys": [Function], - "metrics": Array [], - "syntax": [Function], - }, - } - } - history={Array []} - onBlur={[Function]} - onChange={[MockFunction]} - onRunQuery={[MockFunction]} - query={ - Object { - "expr": "", - "interval": "1s", - "refId": "A", - } - } - range={ - Object { - "from": "2020-01-01T00:00:00.000Z", - "raw": Object { - "from": "2020-01-01T00:00:00.000Z", - "to": "2020-01-02T00:00:00.000Z", - }, - "to": "2020-01-02T00:00:00.000Z", - } - } -/> -`;