opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-06 12:09:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

CloudMonitoring: add tests around experimental UI (#52487)

Browse Source 
* CloudMonitoring: add tests around experimental UI

I also reworked the annotation query editor UI a little bit to bring it
inline with how AzureMonitor's query editor looks.

Closes #44431
This commit is contained in:
Adam Simpson
2022-07-20 09:40:55 -04:00
committed by GitHub
parent f7c5eceb21
commit c8be92e827
4 changed files with 88 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/plugins/datasource/cloud-monitoring/__mocks__/cloudMonitoringDatasource.ts
View File

@ -13,6 +13,7 @@ export const createMockDatasource = (overrides?: Partial<Datasource>) => {
getProjects: jest.fn().mockResolvedValue([]),
getDefaultProject: jest.fn().mockReturnValue('cloud-monitoring-default-project'),
templateSrv,
getSLOServices: jest.fn().mockResolvedValue([]),
...overrides,
};

20
public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
View File

@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { useDebounce } from 'react-use';
import { QueryEditorProps, toOption } from '@grafana/data';
import { EditorField, EditorRows, EditorRow } from '@grafana/experimental';
import { EditorField, EditorRows } from '@grafana/experimental';
import { config } from '@grafana/runtime';
import { Input } from '@grafana/ui';
@ -92,18 +92,12 @@ export const AnnotationQueryEditor = (props: Props) => {
datasource={datasource}
query={metricQuery}
/>
<EditorRow>
<EditorField label="Title" htmlFor="annotation-query-title">
<Input id="annotation-query-title" value={title} onChange={handleTitleChange} />
</EditorField>
</EditorRow>
<EditorRow>
<EditorField label="Text" htmlFor="annotation-query-text">
<Input id="annotation-query-text" value={text} onChange={handleTextChange} />
</EditorField>
</EditorRow>
<EditorField label="Title" htmlFor="annotation-query-title">
<Input id="annotation-query-title" value={title} onChange={handleTitleChange} />
</EditorField>
<EditorField label="Text" htmlFor="annotation-query-text">
<Input id="annotation-query-text" value={text} onChange={handleTextChange} />
</EditorField>
</>
) : (
<>

40
public/app/plugins/datasource/cloud-monitoring/components/Experimental/MetricQueryEditor.test.tsx Normal file
View File

@ -0,0 +1,40 @@
import { render, screen, act } from '@testing-library/react';
import React from 'react';
import { config } from '@grafana/runtime';
import { TemplateSrvMock } from 'app/features/templating/template_srv.mock';
import { createMockDatasource } from '../../__mocks__/cloudMonitoringDatasource';
import { createMockMetricQuery } from '../../__mocks__/cloudMonitoringQuery';
import { MetricQueryEditor, Props } from './MetricQueryEditor';
jest.mock('@grafana/runtime', () => ({
...jest.requireActual('@grafana/runtime'),
getTemplateSrv: () => new TemplateSrvMock({}),
}));
const props: Props = {
onChange: jest.fn(),
refId: 'refId',
customMetaData: {},
onRunQuery: jest.fn(),
datasource: createMockDatasource(),
variableOptionGroup: { options: [] },
query: createMockMetricQuery(),
};
describe('Cloud monitoring: Metric Query Editor', () => {
it('shoud render Project selector', async () => {
await act(async () => {
const originalValue = config.featureToggles.cloudMonitoringExperimentalUI;
config.featureToggles.cloudMonitoringExperimentalUI = true;
render(<MetricQueryEditor {...props} />);
expect(screen.getByLabelText('Project')).toBeInTheDocument();
config.featureToggles.cloudMonitoringExperimentalUI = originalValue;
});
});
});

40
public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLOQueryEditor.test.tsx Normal file
View File

@ -0,0 +1,40 @@
import { render, screen, act } from '@testing-library/react';
import React from 'react';
import { config } from '@grafana/runtime';
import { TemplateSrvMock } from 'app/features/templating/template_srv.mock';
import { createMockDatasource } from '../../__mocks__/cloudMonitoringDatasource';
import { createMockSLOQuery } from '../../__mocks__/cloudMonitoringQuery';
import { SLOQueryEditor, Props } from './SLOQueryEditor';
jest.mock('@grafana/runtime', () => ({
...jest.requireActual('@grafana/runtime'),
getTemplateSrv: () => new TemplateSrvMock({}),
}));
const props: Props = {
onChange: jest.fn(),
refId: 'refId',
customMetaData: {},
onRunQuery: jest.fn(),
datasource: createMockDatasource(),
variableOptionGroup: { options: [] },
query: createMockSLOQuery(),
};
describe('Cloud monitoring: SLO Query Editor', () => {
it('shoud render Service selector', async () => {
await act(async () => {
const originalValue = config.featureToggles.cloudMonitoringExperimentalUI;
config.featureToggles.cloudMonitoringExperimentalUI = true;
render(<SLOQueryEditor {...props} />);
expect(screen.getByLabelText('Service')).toBeInTheDocument();
config.featureToggles.cloudMonitoringExperimentalUI = originalValue;
});
});
});