mirror of
https://github.com/grafana/grafana.git
synced 2025-08-26 19:20:16 +08:00
add aggregation tests
This commit is contained in:
@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { Aggregations, Props } from './Aggregations';
|
||||
import { shallow } from 'enzyme';
|
||||
import { ValueTypes, MetricKind } from '../constants';
|
||||
|
||||
const props: Props = {
|
||||
onChange: () => {},
|
||||
templateSrv: {},
|
||||
metricDescriptor: {
|
||||
valueType: '',
|
||||
metricKind: '',
|
||||
},
|
||||
crossSeriesReducer: '',
|
||||
groupBys: [],
|
||||
children: renderProps => <div />,
|
||||
};
|
||||
|
||||
describe('Aggregations', () => {
|
||||
let wrapper;
|
||||
it('renders correctly', () => {
|
||||
const tree = renderer.create(<Aggregations {...props} />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe('options', () => {
|
||||
describe('when DOUBLE and DELTA is passed as props', () => {
|
||||
beforeEach(() => {
|
||||
const newProps = { ...props, metricDescriptor: { valueType: ValueTypes.DOUBLE, metricKind: MetricKind.GAUGE } };
|
||||
wrapper = shallow(<Aggregations {...newProps} />);
|
||||
});
|
||||
it('', () => {
|
||||
const options = wrapper.state().aggOptions[0].options;
|
||||
expect(options.length).toEqual(11);
|
||||
expect(options.map(o => o.value)).toEqual(
|
||||
expect.not.arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when MONEY and CUMULATIVE is passed as props', () => {
|
||||
beforeEach(() => {
|
||||
const newProps = {
|
||||
...props,
|
||||
metricDescriptor: { valueType: ValueTypes.MONEY, metricKind: MetricKind.CUMULATIVE },
|
||||
};
|
||||
wrapper = shallow(<Aggregations {...newProps} />);
|
||||
});
|
||||
it('', () => {
|
||||
const options = wrapper.state().aggOptions[0].options;
|
||||
expect(options.length).toEqual(1);
|
||||
expect(options.map(o => o.value)).toEqual(expect.arrayContaining(['REDUCE_NONE']));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
@ -16,7 +16,7 @@ export interface Props {
|
||||
children?: (renderProps: any) => JSX.Element;
|
||||
}
|
||||
|
||||
interface State {
|
||||
export interface State {
|
||||
aggOptions: any[];
|
||||
displayAdvancedOptions: boolean;
|
||||
}
|
||||
@ -79,13 +79,9 @@ export class Aggregations extends React.Component<Props, State> {
|
||||
<div className="gf-form gf-form--grow">
|
||||
<label className="gf-form-label gf-form-label--grow">
|
||||
<a onClick={() => this.handleToggleDisplayAdvanced()}>
|
||||
{displayAdvancedOptions ? (
|
||||
<i className="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions" />
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<i className="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions" /> Advanced Options
|
||||
<i className={`fa fa-caret-${displayAdvancedOptions ? 'down' : 'right'}`} /> Advanced Options
|
||||
</React.Fragment>
|
||||
)}
|
||||
</a>
|
||||
</label>
|
||||
</div>
|
||||
|
@ -0,0 +1,119 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Aggregations renders correctly 1`] = `
|
||||
Array [
|
||||
<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-2-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"
|
||||
/>
|
||||
Advanced Options
|
||||
</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>,
|
||||
<div />,
|
||||
]
|
||||
`;
|
@ -276,7 +276,6 @@ Array [
|
||||
>
|
||||
<i
|
||||
className="fa fa-caret-right"
|
||||
ng-hide="ctrl.target.showAggregationOptions"
|
||||
/>
|
||||
Advanced Options
|
||||
</a>
|
||||
|
Reference in New Issue
Block a user