mirror of https://github.com/grafana/grafana
parent
3ce4287e8c
commit
d23c3d2b64
@ -0,0 +1,18 @@ |
||||
import React from 'react'; |
||||
import renderer from 'react-test-renderer'; |
||||
import { QueryEditor, Props, DefaultTarget } from './QueryEditor'; |
||||
|
||||
const props: Props = { |
||||
onQueryChange: target => {}, |
||||
onExecuteQuery: () => {}, |
||||
target: DefaultTarget, |
||||
events: { on: () => {} }, |
||||
datasource: { templateSrv: { variables: [] } }, |
||||
}; |
||||
|
||||
describe('QueryEditor', () => { |
||||
it('renders correctly', () => { |
||||
const tree = renderer.create(<QueryEditor {...props} />).toJSON(); |
||||
expect(tree).toMatchSnapshot(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,455 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`QueryEditor renders correctly 1`] = ` |
||||
Array [ |
||||
<div |
||||
className="gf-form-inline" |
||||
> |
||||
<div |
||||
className="gf-form" |
||||
> |
||||
<span |
||||
className="gf-form-label width-9 query-keyword" |
||||
> |
||||
Service |
||||
</span> |
||||
<div |
||||
className="css-0 gf-form-input gf-form-input--form-dropdown width-15" |
||||
onKeyDown={[Function]} |
||||
> |
||||
<div |
||||
className="css-0 gf-form-select-box__control" |
||||
onMouseDown={[Function]} |
||||
onTouchEnd={[Function]} |
||||
> |
||||
<div |
||||
className="css-0 gf-form-select-box__value-container" |
||||
> |
||||
<div |
||||
className="css-0 gf-form-select-box__placeholder" |
||||
> |
||||
Select Services |
||||
</div> |
||||
<input |
||||
className="css-14uuagi" |
||||
disabled={false} |
||||
id="react-select-2-input" |
||||
onBlur={[Function]} |
||||
onChange={[Function]} |
||||
onFocus={[Function]} |
||||
readOnly={true} |
||||
tabIndex="0" |
||||
value="" |
||||
/> |
||||
</div> |
||||
<div |
||||
className="css-0 gf-form-select-box__indicators" |
||||
> |
||||
<span |
||||
className="gf-form-select-box__select-arrow " |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</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" |
||||
> |
||||
<span |
||||
className="gf-form-label width-9 query-keyword" |
||||
> |
||||
Metric |
||||
</span> |
||||
<div |
||||
className="css-0 gf-form-input gf-form-input--form-dropdown width-15" |
||||
onKeyDown={[Function]} |
||||
> |
||||
<div |
||||
className="css-0 gf-form-select-box__control" |
||||
onMouseDown={[Function]} |
||||
onTouchEnd={[Function]} |
||||
> |
||||
<div |
||||
className="css-0 gf-form-select-box__value-container" |
||||
> |
||||
<div |
||||
className="css-0 gf-form-select-box__placeholder" |
||||
> |
||||
Select Metric |
||||
</div> |
||||
<div |
||||
className="css-0" |
||||
> |
||||
<div |
||||
className="gf-form-select-box__input" |
||||
style={ |
||||
Object { |
||||
"display": "inline-block", |
||||
} |
||||
} |
||||
> |
||||
<input |
||||
aria-autocomplete="list" |
||||
autoCapitalize="none" |
||||
autoComplete="off" |
||||
autoCorrect="off" |
||||
disabled={false} |
||||
id="react-select-3-input" |
||||
onBlur={[Function]} |
||||
onChange={[Function]} |
||||
onFocus={[Function]} |
||||
spellCheck="false" |
||||
style={ |
||||
Object { |
||||
"background": 0, |
||||
"border": 0, |
||||
"boxSizing": "content-box", |
||||
"color": "inherit", |
||||
"fontSize": "inherit", |
||||
"opacity": 1, |
||||
"outline": 0, |
||||
"padding": 0, |
||||
"width": "1px", |
||||
} |
||||
} |
||||
tabIndex="0" |
||||
type="text" |
||||
value="" |
||||
/> |
||||
<div |
||||
style={ |
||||
Object { |
||||
"height": 0, |
||||
"left": 0, |
||||
"overflow": "scroll", |
||||
"position": "absolute", |
||||
"top": 0, |
||||
"visibility": "hidden", |
||||
"whiteSpace": "pre", |
||||
} |
||||
} |
||||
> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
className="css-0 gf-form-select-box__indicators" |
||||
> |
||||
<span |
||||
className="gf-form-select-box__select-arrow " |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
className="gf-form gf-form--grow" |
||||
> |
||||
<div |
||||
className="gf-form-label gf-form-label--grow" |
||||
/> |
||||
</div> |
||||
</div>, |
||||
<div |
||||
style={ |
||||
Object { |
||||
"width": "100%", |
||||
} |
||||
} |
||||
/>, |
||||
<div |
||||
className="gf-form-inline" |
||||
> |
||||
<div |
||||
className="gf-form" |
||||
> |
||||
<label |
||||
className="gf-form-label query-keyword width-9" |
||||
> |
||||
Aggregation |
||||
</label> |
||||
<div |
||||
className="css-0 gf-form-input gf-form-input--form-dropdown width-15" |
||||
onKeyDown={[Function]} |
||||
> |
||||
<div |
||||
className="css-0 gf-form-select-box__control" |
||||
onMouseDown={[Function]} |
||||
onTouchEnd={[Function]} |
||||
> |
||||
<div |
||||
className="css-0 gf-form-select-box__value-container" |
||||
> |
||||
<div |
||||
className="css-0 gf-form-select-box__placeholder" |
||||
> |
||||
Select Aggregation |
||||
</div> |
||||
<div |
||||
className="css-0" |
||||
> |
||||
<div |
||||
className="gf-form-select-box__input" |
||||
style={ |
||||
Object { |
||||
"display": "inline-block", |
||||
} |
||||
} |
||||
> |
||||
<input |
||||
aria-autocomplete="list" |
||||
autoCapitalize="none" |
||||
autoComplete="off" |
||||
autoCorrect="off" |
||||
disabled={false} |
||||
id="react-select-4-input" |
||||
onBlur={[Function]} |
||||
onChange={[Function]} |
||||
onFocus={[Function]} |
||||
spellCheck="false" |
||||
style={ |
||||
Object { |
||||
"background": 0, |
||||
"border": 0, |
||||
"boxSizing": "content-box", |
||||
"color": "inherit", |
||||
"fontSize": "inherit", |
||||
"opacity": 1, |
||||
"outline": 0, |
||||
"padding": 0, |
||||
"width": "1px", |
||||
} |
||||
} |
||||
tabIndex="0" |
||||
type="text" |
||||
value="" |
||||
/> |
||||
<div |
||||
style={ |
||||
Object { |
||||
"height": 0, |
||||
"left": 0, |
||||
"overflow": "scroll", |
||||
"position": "absolute", |
||||
"top": 0, |
||||
"visibility": "hidden", |
||||
"whiteSpace": "pre", |
||||
} |
||||
} |
||||
> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
className="css-0 gf-form-select-box__indicators" |
||||
> |
||||
<span |
||||
className="gf-form-select-box__select-arrow " |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
className="gf-form gf-form--grow" |
||||
> |
||||
<label |
||||
className="gf-form-label gf-form-label--grow" |
||||
> |
||||
<a |
||||
onClick={[Function]} |
||||
> |
||||
<i |
||||
className="fa fa-caret-right" |
||||
ng-hide="ctrl.target.showAggregationOptions" |
||||
/> |
||||
Advanced Options |
||||
</a> |
||||
</label> |
||||
</div> |
||||
</div>, |
||||
<div |
||||
className="gf-form-inline" |
||||
> |
||||
<div |
||||
className="gf-form" |
||||
> |
||||
<label |
||||
className="gf-form-label query-keyword width-9" |
||||
> |
||||
Alias By |
||||
</label> |
||||
<input |
||||
className="gf-form-input width-24" |
||||
onChange={[Function]} |
||||
type="text" |
||||
value="" |
||||
/> |
||||
</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 query-keyword width-9" |
||||
> |
||||
Alignment Period |
||||
</label> |
||||
<div |
||||
className="css-0 gf-form-input gf-form-input--form-dropdown width-15" |
||||
onKeyDown={[Function]} |
||||
> |
||||
<div |
||||
className="css-0 gf-form-select-box__control" |
||||
onMouseDown={[Function]} |
||||
onTouchEnd={[Function]} |
||||
> |
||||
<div |
||||
className="css-0 gf-form-select-box__value-container gf-form-select-box__value-container--has-value" |
||||
> |
||||
<div |
||||
className="css-0 gf-form-select-box__single-value" |
||||
> |
||||
<div |
||||
className="gf-form-select-box__img-value" |
||||
> |
||||
stackdriver auto |
||||
</div> |
||||
</div> |
||||
<div |
||||
className="css-0" |
||||
> |
||||
<div |
||||
className="gf-form-select-box__input" |
||||
style={ |
||||
Object { |
||||
"display": "inline-block", |
||||
} |
||||
} |
||||
> |
||||
<input |
||||
aria-autocomplete="list" |
||||
autoCapitalize="none" |
||||
autoComplete="off" |
||||
autoCorrect="off" |
||||
disabled={false} |
||||
id="react-select-5-input" |
||||
onBlur={[Function]} |
||||
onChange={[Function]} |
||||
onFocus={[Function]} |
||||
spellCheck="false" |
||||
style={ |
||||
Object { |
||||
"background": 0, |
||||
"border": 0, |
||||
"boxSizing": "content-box", |
||||
"color": "inherit", |
||||
"fontSize": "inherit", |
||||
"opacity": 1, |
||||
"outline": 0, |
||||
"padding": 0, |
||||
"width": "1px", |
||||
} |
||||
} |
||||
tabIndex="0" |
||||
type="text" |
||||
value="" |
||||
/> |
||||
<div |
||||
style={ |
||||
Object { |
||||
"height": 0, |
||||
"left": 0, |
||||
"overflow": "scroll", |
||||
"position": "absolute", |
||||
"top": 0, |
||||
"visibility": "hidden", |
||||
"whiteSpace": "pre", |
||||
} |
||||
} |
||||
> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
className="css-0 gf-form-select-box__indicators" |
||||
> |
||||
<span |
||||
className="gf-form-select-box__select-arrow " |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div>, |
||||
<div |
||||
className="gf-form-inline" |
||||
> |
||||
<div |
||||
className="gf-form" |
||||
> |
||||
<span |
||||
className="gf-form-label width-9 query-keyword" |
||||
> |
||||
Project |
||||
</span> |
||||
<input |
||||
className="gf-form-input width-15" |
||||
disabled={true} |
||||
type="text" |
||||
value="Loading project..." |
||||
/> |
||||
</div> |
||||
<div |
||||
className="gf-form" |
||||
onClick={[Function]} |
||||
> |
||||
<label |
||||
className="gf-form-label query-keyword" |
||||
> |
||||
Show Help |
||||
<i |
||||
className="fa fa-caret-right" |
||||
/> |
||||
</label> |
||||
</div> |
||||
|
||||
<div |
||||
className="gf-form gf-form--grow" |
||||
> |
||||
<div |
||||
className="gf-form-label gf-form-label--grow" |
||||
/> |
||||
</div> |
||||
</div>, |
||||
"", |
||||
"", |
||||
] |
||||
`; |
||||
@ -0,0 +1,38 @@ |
||||
import { getAlignmentOptionsByMetric } from './functions'; |
||||
import { ValueTypes, MetricKind } from './constants'; |
||||
|
||||
describe('functions', () => { |
||||
let result; |
||||
describe('getAlignmentOptionsByMetric', () => { |
||||
describe('when double and gauge is passed', () => { |
||||
beforeEach(() => { |
||||
result = getAlignmentOptionsByMetric(ValueTypes.DOUBLE, MetricKind.GAUGE); |
||||
}); |
||||
|
||||
it('should return all alignment options except two', () => { |
||||
expect(result.length).toBe(9); |
||||
expect(result.map(o => o.value)).toEqual( |
||||
expect.not.arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE']) |
||||
); |
||||
}); |
||||
}); |
||||
|
||||
describe('when double and delta is passed', () => { |
||||
beforeEach(() => { |
||||
result = getAlignmentOptionsByMetric(ValueTypes.DOUBLE, MetricKind.DELTA); |
||||
}); |
||||
|
||||
it('should return all alignment options except four', () => { |
||||
expect(result.length).toBe(9); |
||||
expect(result.map(o => o.value)).toEqual( |
||||
expect.not.arrayContaining([ |
||||
'ALIGN_COUNT_TRUE', |
||||
'ALIGN_COUNT_FALSE', |
||||
'ALIGN_FRACTION_TRUE', |
||||
'ALIGN_INTERPOLATE', |
||||
]) |
||||
); |
||||
}); |
||||
}); |
||||
}); |
||||
}); |
||||
Loading…
Reference in new issue