Skip to content

N
nexpie-grafana-theme
Commit 9ed08d19 by Lukas Siatka Committed by GitHub
Options

Bugfix: updates cloudwatch query editor test async render to prevent it from… 

Bugfix: updates cloudwatch query editor test async render to prevent it from throwing error (#22150)
parent 6d879a02
Showing with 43 additions and 401 deletions
public/app/plugins/datasource/cloudwatch/components/QueryEditor.test.tsx
import React from 'react'; import React from 'react';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
import { DataSourceInstanceSettings } from '@grafana/data'; import { DataSourceInstanceSettings } from '@grafana/data';
import { TemplateSrv } from 'app/features/templating/template_srv'; import { TemplateSrv } from 'app/features/templating/template_srv';
import { CustomVariable } from 'app/features/templating/all'; import { CustomVariable } from 'app/features/templating/all';
...@@ -58,45 +59,52 @@ const setup = () => { ...@@ -58,45 +59,52 @@ const setup = () => {
}; };
describe('QueryEditor', () => { describe('QueryEditor', () => {
it('should render component', () => { it('should render component', async () => {
const props = setup(); const { act } = renderer;
const tree = renderer.create(<QueryEditor {...props} />).toJSON(); await act(async () => {
expect(tree).toMatchSnapshot(); const props = setup();
const tree = renderer.create(<QueryEditor {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
}); });
describe('should use correct default values', () => { describe('should use correct default values', () => {
it('when region is null is display default in the label', () => { it('when region is null is display default in the label', async () => {
const props = setup(); await act(async () => {
props.query.region = null; const props = setup();
const wrapper = mount(<QueryEditor {...props} />); props.query.region = null;
expect( const wrapper = mount(<QueryEditor {...props} />);
wrapper expect(
.find('.gf-form-inline') wrapper
.first() .find('.gf-form-inline')
.find('.gf-form-label.query-part') .first()
.first() .find('.gf-form-label.query-part')
.text() .first()
).toEqual('default'); .text()
).toEqual('default');
});
}); });
it('should init props correctly', () => { it('should init props correctly', async () => {
const props = setup(); await act(async () => {
props.query.namespace = null; const props = setup();
props.query.metricName = null; props.query.namespace = null;
props.query.expression = null; props.query.metricName = null;
props.query.dimensions = null; props.query.expression = null;
props.query.region = null; props.query.dimensions = null;
props.query.statistics = null; props.query.region = null;
const wrapper = mount(<QueryEditor {...props} />); props.query.statistics = null;
const { const wrapper = mount(<QueryEditor {...props} />);
query: { namespace, region, metricName, dimensions, statistics, expression }, const {
} = wrapper.props(); query: { namespace, region, metricName, dimensions, statistics, expression },
expect(namespace).toEqual(''); } = wrapper.props();
expect(metricName).toEqual(''); expect(namespace).toEqual('');
expect(expression).toEqual(''); expect(metricName).toEqual('');
expect(region).toEqual('default'); expect(expression).toEqual('');
expect(statistics).toEqual(['Average']); expect(region).toEqual('default');
expect(dimensions).toEqual({}); expect(statistics).toEqual(['Average']);
expect(dimensions).toEqual({});
});
}); });
}); });
}); });
public/app/plugins/datasource/cloudwatch/components/__snapshots__/QueryEditor.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`QueryEditor should render component 1`] = ` exports[`QueryEditor should render component 1`] = `null`;
Array [
<div
className="gf-form-inline"
>
<label
className="gf-form-label width-8 query-keyword"
>
Region
</label>
<div
className="gf-form"
onClick={[Function]}
>
<a
className="gf-form-label query-part"
>
us-east-1
</a>
</div>
<div
className="gf-form gf-form--grow"
>
<div
className="gf-form-label gf-form-label--grow"
/>
</div>
</div>,
<div
className="gf-form-inline"
>
<label
className="gf-form-label width-8 query-keyword"
>
Namespace
</label>
<div
className="gf-form"
onClick={[Function]}
>
<a
className="gf-form-label query-part"
>
ec2
</a>
</div>
<div
className="gf-form gf-form--grow"
>
<div
className="gf-form-label gf-form-label--grow"
/>
</div>
</div>,
<div
className="gf-form-inline"
>
<label
className="gf-form-label width-8 query-keyword"
>
Metric Name
</label>
<div
className="gf-form"
onClick={[Function]}
>
<a
className="gf-form-label query-part"
>
CPUUtilization
</a>
</div>
<div
className="gf-form gf-form--grow"
>
<div
className="gf-form-label gf-form-label--grow"
/>
</div>
</div>,
<div
className="gf-form-inline"
>
<label
className="gf-form-label width-8 query-keyword"
>
Stats
</label>
<div
className="gf-form"
onClick={[Function]}
>
<a
className="gf-form-label query-part"
>
Average
</a>
</div>
<div
className="gf-form"
onClick={[Function]}
>
<a
className="gf-form-label query-part"
>
<i
className="fa fa-plus"
/>
</a>
</div>
<div
className="gf-form gf-form--grow"
>
<div
className="gf-form-label gf-form-label--grow"
/>
</div>
</div>,
<div
className="gf-form-inline"
>
<label
className="gf-form-label width-8 query-keyword"
>
Dimensions
</label>
<div
className="gf-form"
onClick={[Function]}
>
<a
className="gf-form-label query-part"
>
somekey
</a>
</div>
<label
className="gf-form-label query-segment-operator"
>
=
</label>
<div
className="gf-form"
onClick={[Function]}
>
<a
className="gf-form-label query-part"
>
somevalue
</a>
</div>
<div
className="gf-form"
onClick={[Function]}
>
<a
className="gf-form-label query-part"
>
<i
className="fa fa-plus"
/>
</a>
</div>
<div
className="gf-form gf-form--grow"
>
<div
className="gf-form-label gf-form-label--grow"
/>
</div>
</div>,
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<label
className="gf-form-label width-8 query-keyword"
>
Id
<div
className="gf-form-help-icon gf-form-help-icon--right-normal"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<i
className="fa fa-info-circle"
/>
</div>
</label>
<div
style={
Object {
"flexGrow": 1,
}
}
>
<input
className="gf-form-input gf-form-input width-8"
onBlur={[Function]}
onChange={[Function]}
value=""
/>
</div>
</div>
<div
className="gf-form gf-form--grow"
>
<label
className="gf-form-label width-8 query-keyword"
>
Expression
<div
className="gf-form-help-icon gf-form-help-icon--right-normal"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<i
className="fa fa-info-circle"
/>
</div>
</label>
<div
style={
Object {
"flexGrow": 1,
}
}
>
<input
className="gf-form-input gf-form-input"
onBlur={[MockFunction]}
onChange={[Function]}
value=""
/>
</div>
</div>
</div>,
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<label
className="gf-form-label width-8 query-keyword"
>
Period
<div
className="gf-form-help-icon gf-form-help-icon--right-normal"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<i
className="fa fa-info-circle"
/>
</div>
</label>
<div
style={
Object {
"flexGrow": 1,
}
}
>
<input
className="gf-form-input gf-form-input width-8"
onBlur={[MockFunction]}
onChange={[Function]}
placeholder="auto"
value=""
/>
</div>
</div>
<div
className="gf-form"
>
<label
className="gf-form-label width-8 query-keyword"
>
Alias
<div
className="gf-form-help-icon gf-form-help-icon--right-normal"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<i
className="fa fa-info-circle"
/>
</div>
</label>
<div
style={
Object {
"flexGrow": 1,
}
}
>
<input
className="gf-form-input gf-form-input width-16"
onChange={[Function]}
type="text"
value=""
/>
</div>
<div
className="gf-form-switch-container-react"
>
<label
className="gf-form gf-form-switch-container "
htmlFor="1"
>
<div
className="gf-form-label query-keyword pointer"
>
Match Exact
<div
className="gf-form-help-icon gf-form-help-icon--right-normal"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<i
className="fa fa-info-circle"
/>
</div>
</div>
<div
className="gf-form-switch "
>
<input
checked={true}
id="1"
onChange={[Function]}
type="checkbox"
/>
<span
className="gf-form-switch__slider"
/>
</div>
</label>
</div>
<label
className="gf-form-label"
>
<a
onClick={[Function]}
>
<i
className="fa fa-caret-right"
/>
Show
Query Preview
</a>
</label>
</div>
<div
className="gf-form gf-form--grow"
>
<div
className="gf-form-label gf-form-label--grow"
/>
</div>
</div>,
]
`;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment